Fecha de publicación: 31 de marzo de 2014
Para ofrecer el tiempo de renderización más rápido posible, debemos minimizar tres variables:
- La cantidad de recursos críticos
- La longitud de la ruta crítica.
- Es la cantidad de bytes críticos.
Un recurso crítico es un recurso que podría bloquear la renderización inicial de la página. Cuanto menos recursos se usen, menos trabajo tendrán el navegador, la CPU y otros recursos.
De manera similar, la longitud de la ruta crítica es una función del gráfico de dependencias entre los recursos críticos y su tamaño en bytes: algunas descargas de recursos solo se pueden iniciar después de que se haya procesado un recurso anterior, y cuanto más grande sea el recurso, más ida y vuelta se necesitará para descargarlo.
Por último, cuanto menos bytes críticos tenga que descargar el navegador, más rápido podrá procesar el contenido y hacerlo visible en la pantalla. Para reducir la cantidad de bytes, podemos reducir la cantidad de recursos (eliminarlos o hacerlos no esenciales) 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, difiere su descarga, márcalos como asíncronos y ten en cuenta otras consideraciones importantes.
- Optimiza la cantidad de bytes críticos para reducir el tiempo de descarga (cantidad de ida y vuelta).
- Optimiza el orden en que se cargan los recursos críticos restantes: descarga todos los recursos críticos lo antes posible para acortar la longitud de la ruta crítica.