Módulo 2: Aumentar la velocidad de los sitios web móviles

2.2.5 Optimizar la ruta de renderizado crítica

Para ofrecer el renderizado más rápido posible por primera vez, tenemos que reducir tres variables:

  • El número de recursos críticos.
  • La longitud de la ruta crítica.
  • El número de bytes críticos.

Un recurso crítico es aquel que puede bloquear el renderizado inicial de la página. Cuanto menor sea el número de recursos, menos trabajo tendrán que realizar el navegador, la CPU y otros recursos.

Del mismo modo, la longitud de la ruta crítica depende del gráfico de dependencia entre los recursos críticos y la cantidad de bytes: algunas descargas de recursos solo se inician después de que se haya procesado un recurso previo, y cuanto mayor sea el recurso, más procesos de ida y vuelta realizará para la descarga.

Por último, cuanto menos bytes críticos tenga que descargar el navegador, más rápido podrá procesar el contenido y renderizarlo en la pantalla. Para reducir el número de bytes, podemos disminuir el número de recursos (eliminarlos o hacer que dejen de ser críticos) y asegurarnos de que reducimos el tamaño de la transferencia comprimiendo y optimizando cada recurso.

La secuencia general de pasos para utilizar la ruta de renderizado crítica es la siguiente:

  1. Analizar y diferenciar la ruta crítica: número de recursos, bytes, longitud, etc.
  2. Reducir el número de recursos críticos: eliminarlos, aplazar su descarga, marcarlos como asíncronos, etc.
  3. Optimizar el número de bytes críticos para reducir el tiempo de descarga (número de procesos de ida y vuelta).
  4. Optimizar el orden en el que el resto de recursos críticos se cargan: descargar todos los recursos críticos lo antes posible para acortar la longitud de la ruta de renderizado crítica.
¿Te ha sido útil este artículo?
¿Cómo podemos mejorar esta página?