Como optimizar aplicaciones web

En este artículo explicaré como pueden mejorar el rendimiento de sus aplicaciones web, específicamente en sus clientes.

Primero consideremos algo fundamental, la velocidad de internet varia de persona en persona, algunas tienen decenas, cientos de MBs de descarga por segundo en la conexión de sus hogares, mientras que otros se conectan desde una red 3G o 4G.

Más del 52% del tráfico web en el 2018 fue generado por dispositivos móviles, así que estos son una prioridad a la hora de desarrollar un aplicativo web, optimizar para que, sin importar la conexión, nuestros usuarios reciban respuestas en cuestión de un par de segundos.

Como funciona la web

Empecemos por lo más básico, cuándo una persona intenta ingresar a nuestra página web, lo que hace es enviar una petición (Request), nuestro servidor procesará dicha petición y finalmente retornará una respuesta (Response).

https://i.imgur.com/72cIHww.jpg

Hasta aquí, podemos identificar dos actores, un cliente y un servidor, es decir, tenemos dos áreas donde podríamos mejorar nuestros procesos para que el rendimiento de la aplicación sea mejor, en el cliente y en el servidor.

Además de poder optimizar nuestro frontend y backend, también podemos mejorar nuestra transferencia de archivos, acá entran en juego estrategias como minimizar archivos.

Pero… la vida no es tan fácil, en una típica página web el cliente se comunicará con el servidor muchas veces, no solo una.

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="login.css" />
  </head>
  <body>
    ...
  </body>
</html>

Cuando un usuario visite nuestra página, el servidor le enviará el archivo HTML, el cual empezará a leer. Una vez llegue al stylesheet externo, tendrá que comunicarse nuevamente con el servidor, iniciando así otra petición, para obtener el CSS que necesitamos. Este proceso se repetirá cada vez que necesitemos un archivo externo (imágenes, archivos de estilo, javascript, etc.)

Primeros pasos

Imágenes enormes, archivos CSS y JavaScript sin minificar, son una gran parte del problema.

La próxima vez que estés creando un sitio web, piensa dos veces antes de añadir aquella imagen que pesa 500KB, ¿en serio vale la pena correr el riesgo de que un usuario abandone tu página porque tarda demasiado en cargar?

Ahora, en caso de que no sepas que es minificar un archivo, simplemente es comprimirla. Por ejemplo, si tengo este archivo CSS:

body {
  background: linear-gradient(240deg, #ffffff, #000000);
}

a {
  color: #ff1b1b;
}

Una vez minificado, se vería así:

body {
  background: linear-gradient(240deg, #fff, #000);
}
a {
  color: #ff1b1b;
}

Lo mismo ocurre con los archivos JavaScript, así se ve jQuery sin minificar y minificado.

La interrogante es ¿cómo minificar nuestros assets? y la respuesta dependerá de las tecnologías que uses, hay incluso páginas web donde subes tus archivos y te dan su equivalente minificado. Personalmente uso webpack o Parcel, pero a gustos colores.

También puedes empaquetar todos tus archivos JavaScript en uno solo, y lo mismo con tus archivos CSS, esto provee ventajas y desventajas, solo tendrías que hacer una petición por cada tipo de archivo, pero ¿y si en tu página de inicio no necesitas los estilos de tu página de registro?, una vez más, hay que sentarse a pensar que tipo de solución será mejor para el proyecto.

Optimizando imágenes

Siendo honestos, ¿sabes las diferencias entre los archivos png y jpg?

Vamos, que está bien si no las sabes, para eso está el artículo, discutamos primero lo más básico, que tipo de imágenes usar.

  1. Utiliza jpg o webp a menos que necesites una imagen con transparencia, en dicho caso, usa .png
  2. Prefiere svg para logos e iconos, es naturalmente responsive y los archivos pesan muy poco.

Que alce la mano quien haga referencia a FontAwesome en su sitio web, pero utiliza menos de una decena de iconos. Es mejor utilizar svg si solo necesitamos un par de logos de redes sociales, aquí puedes encontrar los assets de Facebook, por ejemplo.

Por cierto, elimina los meta datos de tus imágenes.

Utiliza imágenes pequeñas, ¿en serio necesitas una imagen de 5000x5000 pixeles en tu sitio?

Planea apropiadamente, si la mayoría de los usuarios de tu sitio utilizan sus teléfonos móviles para acceder, quizás desees utilizar imágenes con menos pixeles (lo que conlleva a que sean más pequeñas).

Puede que quieras utilizar una imagen de fondo en dispositivos de escritorio, laptops, y un color en móviles, simplemente usa media queries. El navegador es lo suficientemente capaz de pedir los assets solo cuando los necesita.

https://i.imgur.com/haS5XrV.gif

Critical Rendering Path

Acá todo se va al carajo, antes estábamos viendo imágenes lindas y reduciendo el tamaño de archivos, pero ahora hay que adentrarse en un mundo desconocido por muchos, como pinta cada pixel en la pantalla nuestro navegador.

El Critical Rendering Path (CRP), es la secuencia de pasos que sigue el navegador para convertir nuestros archivos HTML, CSS y JavaScript en pixeles que podemos ver en nuestras pantallas.

El optimizar el CRP mejora el rendimiento del renderizado de nuestra página web. El CRP incluye el Document Object Model (DOM), CSS Object Model (CSSOM), el render tree y el layout.

Primero, el DOM es creado mientras el navegador analiza el HTML. El HTML puede pedir un archivo JS, el cual a su vez puede alterar el DOM, los estilos CSS crean el CSS Object Model. Posteriormente el navegador combina ambos (el DOM y el CSSOM) para crear el Render Tree. El layout determina el tamaño y la localización de todo en la página, una vez que este sea determinado, se pintan los pixeles en la pantalla.

¿Recuerdan cuando estaban aprendiendo a crear páginas web que los archivos CSS iban en el header y los archivos JS iban al final del body?

Si bien hay excepciones para esto, la mayoría de veces es así, pero es importante entender el porqué.

Ciertos archivos pueden bloquear la carga subsecuente de otros assets, si tenemos por ejemplo

<!DOCTYPE html>
<html>
  <head>
    ...
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="login.css" />
  </head>
  <body>
    ...
  </body>
</html>

Donde script.js contiene

alert("Bloqueo");

Nuestra página no va a cargar hasta que aceptemos la alerta, bastante curioso, pero nos permite visualizar el problema, algunos assets que bloquean la carga de otros.

Ahora bien, hay casos donde si puede resultar conveniente tener JS en el head, hay quienes necesitan ver que hace un usuario desde el momento en que entran a la página y por eso instalan Google Analytics en medio del head, por ejemplo. Si hay assets que debes descargar de manera crítica, juega con su orden.

Además de pensar el orden en el cual cargamos nuestros archivos, también hay otras mejoras que podemos realizar.

  1. Utiliza menos tags en HTML de ser posible.
<div>
  <div>
    <div></div>
  </div>
</div>

¿En verdad necesitas todos estos div o puedes reestructurar tu página de otra manera?

  1. Se menos especifico en tus reglas CSS si es posible, el cambio es minúsculo, pero existe.
.hola {
}

Es procesado más rápido que

.hola .mundo {
}
  1. Usa defer cuando lo veas conveniente. Usualmente nuestros script tags se ven así:
<script src="script.js"></script>

Como ya vimos, puede que estos bloqueen la carga de otros archivos, por eso generalmente se posicionan antes del tag </body>.

Solo tiene sentido utilizar defer dentro de nuestro <head>...</head>, de nada servirá si el archivo es el último en ser pedido.

Hacemos esto para que el archivo sea descargado en paralelo con el análisis de nuestro HTML.

Conclusión

Esto fue solo una breve introducción a técnicas que pueden ser utilizadas para mejorar el rendimiento de páginas web típicas, minificar archivos CSS y JavaScript, comprimir imágenes y usar tamaños apropiados para el dispositivo en el cual van a ser visualizadas, ser críticos a la hora de incluir una nueva librería y ordenar de manera lógica nuestros assets.

¡Hasta una próxima entrega!