Para ofrecer el tiempo más rápido de renderización inicial, debemos minimizar tres variables:
- La cantidad de recursos críticos
- la longitud de la ruta crítica.
- La cantidad de bytes críticos.
Un recurso crítico es aquel que podría bloquear la representación inicial de la página. Cuantos menos de estos recursos haya, menos trabajo tendrá el navegador, la CPU y otros recursos.
De manera similar, la extensión de la ruta de acceso crítica es una función del gráfico de dependencias entre los recursos críticos y su tamaño de bytes: algunas descargas de recursos solo se pueden iniciar después de que se haya procesado un recurso anterior, y cuanto mayor sea el recurso, mayores serán los recorridos necesarios para descargar.
Por último, cuantos menos bytes críticos tenga que descargar el navegador, más rápido podrá procesar contenido y hacerlo visible en la pantalla. Para reducir la cantidad de bytes, podemos reducir la cantidad de recursos (eliminarlos o hacer que no sean críticos) y asegurarnos de minimizar el tamaño de transferencia comprimiendo y optimizando cada recurso.
La secuencia general de pasos para optimizar la ruta de renderización crítica es la siguiente:
- Analiza y caracteriza tu ruta crítica: cantidad de recursos, bytes y longitud.
- Minimiza la cantidad de recursos críticos: elimínalos, aplaza su descarga, márcalos como asíncronos, etcétera.
- Optimizar la cantidad de bytes críticos para reducir el tiempo de descarga (cantidad de recorridos de ida y vuelta).
- Optimice el orden en el que se cargan los recursos críticos restantes: descargue todos los elementos críticos lo antes posible para acortar la longitud de la ruta crítica.