Fecha de publicación: 31 de marzo de 2014
Optimizar la ruta de acceso de renderización crítica hace referencia a priorizar la visualización de el contenido que se relaciona con la acción actual del usuario.
Ofrecer una experiencia web rápida requiere de mucho trabajo por parte del navegador. Como desarrolladores web, no podemos ver la mayor parte de este trabajo: escribimos el lenguaje de marcado y aparece una bonita página en pantalla. Pero ¿cómo pasa exactamente el navegador de consumiendo nuestro código HTML, CSS y JavaScript a píxeles renderizados en la pantalla?
La optimización para mejorar el rendimiento se basa en la comprensión de lo que ocurre en estos pasos intermedios entre la recepción de los bytes de HTML, CSS y JavaScript, y el procesamiento necesario para convertirlos en píxeles representados; esa es la ruta de acceso de representación crítica.
Optimizando la ruta de acceso de representación crítica, podemos mejorar notablemente el tiempo necesario para representar nuestras páginas por primera vez. Además, comprender la ruta de acceso de renderización crítica también sirve como base para crear aplicaciones interactivas de buen rendimiento. El proceso de actualizaciones interactivas es el mismo, solo que se realiza en un bucle continuo. Lo ideal sería a 60 fotogramas por segundo. Pero primero, veremos una descripción general de la manera en que el navegador muestra una página simple.
Recursos adicionales
- Construcción del modelo de objetos
- Construcción, diseño y pintura del árbol de representación
- CSS que bloquea la renderización
- Cómo agregar interactividad con JavaScript
- Medición de la ruta de renderización crítica
- Analiza el rendimiento de la ruta de renderización crítica
- Cómo optimizar la ruta de acceso de renderización crítica
- Reglas y recomendaciones de PageSpeed