Ruta crítica de renderizado: qué es y cómo optimizarla

Cuando hablamos de brindar a los usuarios una experiencia web ultrarrápida, a menudo nos enfocamos únicamente en lo que nosotros, como propietarios y desarrolladores web, debemos hacer.

Pero la verdad es:

Brindar una experiencia web rápida también requiere mucho trabajo por parte del navegador.

Recibe nuestros archivos HTML, CSS y JavaScript y toma medidas específicas para convertirlos en píxeles en la pantalla.

El secreto para acelerar su rendimiento radica en comprender qué sucede entre la recepción de los recursos y su procesamiento para convertirlos en píxeles renderizados.

Este proceso también se conoce como la ruta de representación crítica (CRP) .

Y en este artículo, aprenderá todo lo que necesita saber sobre CRP y cómo optimizarlo para una representación más rápida.

• ¿Qué es la ruta de representación crítica?
• Explicación de la secuencia de la ruta crítica de renderizado
• Cómo optimizar la ruta de representación crítica de su sitio
• Complementos de 3 WordPress para optimizar su CRP
• Lista de verificación de optimización de CRP

¡Vamos a empezar!

¿Qué es la ruta de representación crítica?

La ruta de representación crítica se refiere a la secuencia de pasos que realiza un navegador web para convertir código HTML, CSS y JavaScript en una representación visual en la pantalla de un usuario.

Implica una serie de procesos, como la construcción del Modelo de objetos del documento (DOM), la generación del Modelo de objetos CSS (CSSOM) y la combinación de ambos para crear el Árbol de representación. Luego, el árbol de renderizado se usa para calcular el diseño y pintar los píxeles en la pantalla del usuario.

La optimización de Critical Rendering Path, por otro lado, se refiere a reducir el tiempo que el navegador web emplea para ejecutar cada paso de la secuencia mientras prioriza el contenido relevante para la acción actual del usuario.

Para garantizar que sus esfuerzos de optimización den en el clavo, debe tener una comprensión profunda de cada paso de la secuencia. Por lo tanto, los siguientes dos párrafos son esenciales y recomendamos encarecidamente leerlos antes de actuar.

Explicación de la secuencia de la ruta crítica de renderizado

Aquí hay una descripción general rápida de los pasos realizados por el navegador al mostrar una página:

1. El navegador descarga y analiza el marcado HTML y crea el DOM.
2. A continuación, descarga y procesa el marcado CSS y construye el modelo de objetos CSS (CSSOM).
3. Luego, combina los nodos necesarios del DOM y CSSOM para crear el árbol de representación, una estructura de árbol de todos los nodos visibles necesarios para representar la página.
4. Calcula las dimensiones y la posición de cada elemento en la página a través del proceso de diseño.
5. Finalmente, el navegador pinta los píxeles en la pantalla.

Ahora analicemos cada paso.

El DOM

El modelo de objeto de documento (DOM) es la representación interna del navegador del documento HTML.

Cuando se carga una página web, el navegador analiza el HTML y crea una estructura en forma de árbol de nodos que representan los elementos del documento. Cada nodo corresponde a un elemento HTML y tiene propiedades que describen sus atributos, contenido y posición en el árbol.

Importante: el navegador construye el DOM gradualmente, lo que nos permite optimizar la representación de la página mediante la construcción de una estructura eficiente y evitando tamaños excesivos de DOM.

El CSSOM

Mientras que el DOM contiene todo el contenido de la página, el CSSOM incluye toda la información sobre cómo diseñar el DOM.

Otra diferencia entre DOM y CSSOM es que:

La construcción de DOM es gradual, mientras que CSSOM no lo es.

Cuando se carga un sitio web, el navegador tiene que procesar el CSS para aplicar los estilos. A diferencia de HTML, que se puede procesar poco a poco, CSS debe procesarse todo a la vez. Esto se debe a que algunos estilos pueden sobrescribirse con otros más adelante en el archivo CSS, por lo que el navegador debe esperar hasta que haya leído todo el archivo CSS antes de decidir qué estilos aplicar.

Esto se hace para evitar mostrar estilos que luego se sobrescribirán y desperdiciarán recursos.

Simplemente pon:

El navegador bloquea el proceso de renderizado hasta que recibe y analiza todo el CSS.

Es por eso que CSS se considera un recurso de bloqueo de procesamiento.

El árbol de renderizado

El Render Tree es la combinación de DOM y CSSOM que utiliza el navegador para crear la representación visual de la página web.

El navegador utiliza Render Tree para calcular las dimensiones y la posición de los nodos como entrada para el proceso de pintura.

Importante: Solo el contenido visible se captura en el árbol de representación. Por lo general, la sección principal no contiene información visible y, por lo tanto, se excluye. Además, si un elemento tiene una propiedad display: none , ni el elemento ni sus descendientes se incluyen en el árbol de representación.

Disposición

Una vez construido el árbol de representación, el siguiente paso es el diseño. El diseño establece la ubicación y orientación de cada elemento en la página definiendo sus dimensiones, posición e interrelaciones.

Pero aquí está la cosa:

El rendimiento del diseño se ve afectado por el DOM.

En otras palabras:

Cuanto mayor sea el número de nodos DOM, más largo será el proceso de diseño.

Pintar

La etapa final es pintar los píxeles en la pantalla, que sigue a la creación del árbol de representación y el diseño.

Inicialmente, toda la pantalla se pinta durante el proceso de carga. Posteriormente, solo se vuelven a pintar las partes afectadas de la pantalla, ya que los navegadores están diseñados para volver a pintar solo el área necesaria.

Tenga en cuenta que la duración de la etapa de pintura depende de la naturaleza de las actualizaciones que se implementen en el árbol de representación.

Ahora veamos qué optimizaciones puede aplicar para ayudar al navegador y acelerar algunos de los procesos.

Cómo optimizar la ruta de representación crítica de su sitio

El tiempo necesario para que el navegador se ejecute durante todo el proceso puede variar. Hay muchas partes móviles que contribuyen a la longitud de la ruta crítica:

• Tamaño del documento
• Número de solicitudes
• Dispositivo de usuario
• estilos aplicados

Sin embargo, hay tres técnicas que se consideran las opciones de acceso cuando se trata de la optimización de CRP:

1. Minimice la cantidad de recursos críticos aplazando los no críticos o eliminándolos por completo
2. Optimice la cantidad de solicitudes requeridas junto con el tamaño del archivo de cada solicitud
3. Priorizar la descarga de activos críticos, acortando así la longitud de la ruta crítica

Profundicemos un poco más en cómo implementar cada una de las estrategias de optimización recomendadas:

Optimice los recursos CSS y JS que bloquean el renderizado

Ya sabe que cuando el navegador encuentra recursos CSS y JS que bloquean el renderizado, debe descargarlos, analizarlos y ejecutarlos antes de hacer cualquier otra cosa, incluido el renderizado.

Cuando se trata de optimizar CSS, puede implementar las siguientes técnicas:

• CSS crítico. Identifica el conjunto mínimo de reglas CSS necesarias para representar la parte visible de una página web y las entrega al navegador como CSS en línea en lugar de cargar una hoja de estilo completa. Al cargar solo el CSS necesario para el contenido de la mitad superior de la página, el navegador puede mostrar la página más rápidamente y mejorar la experiencia del usuario . Esto se debe a que el navegador no tiene que esperar a que se cargue toda la hoja de estilo antes de mostrar la página.
  
• Combinar archivos CSS. La concatenación de CSS es el proceso de combinar múltiples archivos CSS en un solo archivo. Esta técnica mejora el rendimiento al reducir la cantidad de solicitudes HTTP necesarias para cargar una página web , ya que el navegador solo necesita descargar y analizar un único archivo CSS en lugar de varios.

En términos de sus archivos JavaScript, esto es lo que puede hacer:

• Retrasar la carga de JS. Aplazar la carga de JS es una técnica que acelerará su sitio al retrasar la carga de archivos JavaScript hasta que el documento HTML haya sido cargado y analizado . Puede usar el atributo aplazar en la etiqueta del script que hace referencia al archivo JS. Es importante tener en cuenta que el atributo aplazar solo debe usarse para archivos JS que no necesitan ejecutarse inmediatamente después de la carga (por ejemplo, archivos que solo se usan en páginas específicas), ya que el orden de ejecución puede ser impredecible si hay varios scripts diferidos. son usados.
  
• Cargue JS de forma asíncrona. Algunos archivos JS pueden requerir el uso del atributo asíncrono, que permite cargar y ejecutar el archivo de forma asíncrona con el análisis del documento HTML.

Hay algunas optimizaciones que puede aplicar tanto a CSS como a JavaScript:

• Minificación. La minificación implica la eliminación de caracteres innecesarios, como espacios en blanco, comentarios y saltos de línea, de los archivos CSS y JavaScript. Este proceso puede reducir significativamente el tamaño de los archivos sin afectar su funcionalidad o apariencia .
  
• Eliminar CSS y JS no utilizados. CSS y JS sin usar se refieren a reglas específicas que no se usan en una página en particular pero que aún están cargadas. La eliminación de estas partes de sus archivos afectará directamente la rapidez con la que el navegador construye el árbol de representación .

Optimice sus recursos de bloqueo de procesamiento en piloto automático. Instalar NitroPack →

Reduce el tamaño de tus archivos

Para reducir la cantidad de datos que el navegador necesita descargar, podemos emplear técnicas como minificación, compresión y almacenamiento en caché de recursos HTML, CSS y JavaScript.

Ya sabes lo que significa minificación, así que centrémonos en los otros dos:

• Compresión. La compresión es una técnica que aplica algoritmos para reescribir el código binario de los archivos utilizando menos bits que el original. Como resultado, sus archivos tienen un tamaño mucho más pequeño, lo que reduce los tiempos de carga de la página y el uso del ancho de banda.
  
• Almacenamiento en caché. El almacenamiento en caché aprovecha la caché HTTP implementada en cada navegador. Para garantizar un almacenamiento en caché efectivo, debemos asegurarnos de que cada respuesta del servidor proporcione los encabezados HTTP correctos, indicando al navegador cuándo y por cuánto tiempo debe almacenar en caché los recursos solicitados.

Confíe en el mecanismo de almacenamiento en caché más avanzado. Obtenga NitroPack hoy →

Priorizar la descarga de activos críticos

En general, los navegadores son bastante buenos para priorizar los recursos más importantes y buscarlos primero. Sin embargo, en algunos casos, podría ayudarlos a cargar su sitio aún más rápido al priorizar manualmente los recursos más importantes.

Puede usar sugerencias de recursos para decirle al navegador cómo manejar recursos o páginas web específicos.

Aquí están los tres principales:

• Enlace rel=prefetch. Prefetch es una sugerencia de recurso de baja prioridad que permite al navegador obtener recursos que podrían ser necesarios más adelante y almacenarlos en la memoria caché del navegador.

• Enlace rel=preconexión. La directiva de preconexión ayuda al navegador a establecer conexiones tempranas antes de enviar una solicitud inicial al servidor.

• Enlace rel=precarga. La precarga se usa para obligar al navegador a descargar un recurso antes de que el navegador lo descubra porque es crucial para la página.

Importante: Prefetch y preconnect son sugerencias de recursos y se ejecutan cuando el navegador lo considera adecuado. La directiva de precarga es un comando que es obligatorio para los navegadores. Obtenga más información sobre cómo implementar sugerencias de recursos.

Ahora que sabe cómo manejar la optimización de Critical Rendering Path, veamos algunos complementos de WordPress que pueden automatizar el proceso.

3 complementos de WordPress para optimizar la ruta de representación crítica

Todas las optimizaciones mencionadas anteriormente se pueden realizar manualmente. Sin embargo, algunos de ellos requieren conocimientos técnicos para garantizar que no rompa su sitio durante el proceso.

Afortunadamente para todos los usuarios de WordPress, existen complementos que pueden ayudar con la optimización de CRP. Veamos los 3 mejores candidatos, en nuestra opinión:

NitroPack: la solución todo en uno

NitroPack es la solución líder de optimización de la velocidad del sitio todo en uno que combina más de 35 funciones de rendimiento web. Cuando se trata de optimizar su ruta de renderizado crítica, NitroPack manejará automáticamente optimizaciones como:

• CSS crítico
• Minificación de CSS y JS
• Compresión CSS y JS
• almacenamiento en caché
• Retrasar la carga de JS
• Eliminar CSS y JS no utilizados

Pero las funciones de optimización no terminan aquí. También obtendrá el kit de herramientas de rendimiento completo:

• CDN incorporado
• Pila completa de optimización de imágenes
• Optimización de fuentes
• Almacenamiento en caché del carrito de comercio electrónico
• Soporte 24/7

Acelera tu sitio web automáticamente. Obtenga NitroPack hoy →

WP Super Cache - Complemento de solo almacenamiento en caché

WP Super Cache es un complemento de almacenamiento en caché que ofrece principalmente funciones de almacenamiento en caché y compresión HTTP, pero se queda corto en la minimización de recursos y la optimización de JavaScript con atributos asíncronos y diferidos.

Las características más notables incluyen:

• Habilitar el almacenamiento en caché para todos los visitantes
• Deshabilitar el almacenamiento en caché para los visitantes registrados
• Comprima las páginas para que se sirvan más rápidamente a los visitantes.
• reconstrucción de caché

Rendimiento rápido

Swift Performance es otro complemento que puede resultarle útil en su búsqueda de un CRP optimizado. Algunas de sus características incluyen:

• Minimización de archivos CSS y JavaScript
• CSS crítico
• almacenamiento en caché
• Optimización de imagen

Optimización de la ruta de representación crítica [Lista de verificación]

Hemos cubierto mucho terreno en este artículo, por lo que aquí hay una lista de verificación útil de todas las optimizaciones que mencionamos:

• Generar CSS crítico
• Combinar archivos CSS
• Retrasar la carga de JavaScript
• Cargar JavaScript de forma asíncrona
• Minificar CSS y JavaScript
• Comprimir CSS y JavaScript
• Eliminar CSS y JavaScript no utilizados
• Aplicar minificación
• Aplicar compresión
• Usar almacenamiento en caché
• Implementar enlace rel=preload
• Implementar enlace rel=prefetch
• Implementar enlace rel=preconnect

Descargue la lista de verificación de optimización de CRP →

Y por último, pero no menos importante, ¡ no olvide probar antes y después de cada optimización!