La ruta de visualización crítica es la secuencia de tareas que el navegador realiza para primero visualizar una página en la pantalla, es decir, descargar, procesar y convertir código HTML, CSS y JavaScript en píxeles reales, y pintarlos en la pantalla.
La optimización de ruta de visualización crítica es el proceso de reducir al máximo el tiempo empleado por el navegador para realizar cada paso de la secuencia priorizando la visualización de contenidos relacionados con la acción del usuario actual.
Gran parte de este proceso se refiere a la porción de la página que es visible sin necesidad de desplazarse hacia abajo en la ventana del navegador. Esa sección es también conocida como Above the Fold . Para una mayor facilidad de uso, el ATF debería hacerse tan pronto como sea posible, y esto puede hacerse reduciendo el número de viajes de ida y vuelta de red a un mínimo. Los recursos necesarios para renderizar el ATF se consideran críticos, y optimizar el Above the Fold significa minimizar el impacto de los recursos críticos en el tiempo de renderización de la primera página.
En esta publicación, vamos a caminar a través de la secuencia de optimización de ruta de visualización crítica.
- En primer lugar, voy a dar un panorama general de las tareas que realiza el explorador para visualizar el contenido de una página.
- Después, voy a diseccionar las acciones más relevantes que podemos realizar para optimizar la ruta de visualización crítica.
- Por último, mencionaré algunos plugins útiles (y populares) de optimización de WordPress.
La Secuencia de Ruta de Visualización Crítica
Aquí está la secuencia de pasos realizados por el navegador para visualizar una página:
- En primer lugar, el navegador descarga y analiza el código HTML mark-up y construye el DOM
- Después, descarga y procesa el CSS mark-up y construye el modelo de objetos CSS
- Combina los nodos DOM y CSSOM requeridos para visualizar la página en el árbol de visualización (Render Tree), que es una estructura de árbol de todos los nodos visibles
- Este calcula las dimensiones y posición de cada objeto en la página
- Por último, pinta los píxeles en la pantalla
El DOM
Como bien se explica en la Guía de optimización de ruta de visualización crítica de Google, el navegador genera el modelo de objetos de documento en una secuencia de cuatro pasos:
- En primer lugar, el navegador lee la fila de bytes y los traduce a caracteres individuales
- Después, convierte las cadenas de caracteres encerrados entre paréntesis angulares en símbolos
- Estos símbolos se convierten en objetos de nodo
- Los objetos de nodo están vinculados en una estructura de datos como de árbol que contiene contenido HTML, Propiedades, y todas las relaciones entre nodos. Esta estructura es el Modelo De Objetos De Documento (Document Object Model) .
Lo que es importante a tener en cuenta aquí es que el navegador construye el DOM de forma incremental. Esto nos da la oportunidad de acelerar el procesamiento de la página creando eficientes estructuras DOM.
La CSSOM
Cuando el analizador encuentra una etiqueta link que haga referencia a una hoja de estilos CSS externa, bloquea el análisis y envía una solicitud para este recurso. Una vez que el archivo CSS se ha recibido, el explorador inicia la construcción de una estructura de datos de árbol de nodos de CSS.
- El navegador lee la fila de bytes del archivo .css y los traduce a caracteres individuales
- Convierte las cadenas de caracteres encerradas entre llaves en tokens
- Estos símbolos se convierten en objetos de nodo
- Los objetos de nodo están vinculados en una estructura de datos como de árbol que contiene las propiedades CSS de cada nodo, y las relaciones entre los nodos. Esta estructura es el Modelo De Objetos CSS (CSSOM).
A diferencia de la construcción DOM, la construcción CSSOM no es incremental. El navegador no puede utilizar una parte de una hoja de estilos, porque los estilos pueden ser refinados y redeclarados en la misma hoja de estilos. Por esta razón, el explorador bloquea el procesamiento hasta que recibe y analiza todas las CSS. Esto significa que CSS es un bloqueador de visualización .
El Árbol de Visualización
El explorador combina DOM y CSSOM en el árbol de visualización, que es la última estructura de árbol que contiene todos los nodos y propiedades que se utilizan para visualizar la página en la pantalla.
El árbol de visualización sólo contiene los nodos que son necesarios para procesar una página. Como consecuencia de ello, los nodos invisibles son omitidos.
El navegador utiliza el árbol de visualización para calcular las dimensiones y la posición y, en última instancia, como un insumo para el proceso de pintura.
Diseño y Pintura
En el paso de diseño, el navegador calcula las dimensiones y posición de cada nodo del árbol de visualización. En este paso, el explorador recorre el árbol de visualización desde su raíz y produce un modelo de caja. Finalmente, esta información se utiliza para convertir cada nodo del árbol de visualización en píxeles reales en la pantalla.
Optimización de Ruta de Visualización Crítica
El tiempo requerido para ejecutar todo el proceso puede ser variable. Eso depende de muchos factores, como el tamaño del documento, el número de peticiones, los estilos aplicados, el dispositivo del usuario, etc. Una de las más importantes recomendaciones de Google es priorizar el contenido visible para visualizar por Above the Fold, lo más rápido posible, y ofrece dos reglas principales a seguir:
- La estructura HTML para cargar el contenido crítico, Above the Fold primero
- Reduce la cantidad de datos que utilizan recursos HTML, CSS y JS
Como bien se explica en la guía de Google PageSpeed, si la cantidad de datos necesarios para visualizar ATF excede la ventana de congestión inicial (14.6kb), requerirá viajes de ida y vuelta adicionales de red entre el servidor y el navegador. En redes móviles, con altas latencias, esto retrasaría considerablemente la carga de la página (leer más sobre latencia).
El navegador genera el DOM de forma incremental, y esto nos da la oportunidad de reducir el tiempo necesario para procesar el ATF al estructurar el HTML para cargar el ATF y aplazar el resto de la página.
Pero la optimización no termina con la construcción de una eficaz estructura DOM. Más bien, es un proceso de mejora y medición que involucra toda la secuencia de la ruta crítica de visualización.
Vayamos a bucear profundo.
Minimizar Dimensiones de Recursos
Podemos reducir la cantidad de datos que el navegador va a descargar al minimizar, comprimir y cachear recursos HTML, CSS y JavaScript:
- Minimización es el proceso de eliminar los caracteres innecesarios como comentarios y espacios en blanco del código fuente. Estos caracteres son fundamentales para el desarrollo, pero son inútiles para renderizar la página.
- Compresión es la capacidad de los servidores web y clientes para reducir el tamaño de los archivos transmitidos a fin de mejorar la velocidad y la utilización del ancho de banda
- Caching : cada navegador viene con una implementación de un HTTP cache . Lo que debemos hacer es asegurar que cada respuesta del servidor proporcione los encabezados HTTP correctos para instruir al navegador sobre cuándo y por cuánto tiempo se deben almacenar en cache los recursos solicitados
Optimizar CSS
Ahora sabemos que el explorador tiene que esperar hasta que recupere y procese el código CSS antes de que pueda visualizar la página (CSS es bloqueador de visualización). Pero no todos los recursos CSS son de bloqueadores de visualización .
CSS puede ser limitado a condiciones particulares, y podemos optimizarlo usando tipos de medios y consultas de medios. Si está viendo una página web en la pantalla, el navegador enviará una solicitud de tipo de material de impresión pero no bloqueará la visualización de la página para este recurso.
Tome la siguiente etiqueta link:
<link rel="stylesheet" href="style.css" />La hoja de estilo de referencia de esta etiqueta se aplica bajo cualquier condición, independientemente del tipo de medio actual, la resolución de pantalla, la orientación del dispositivo, etc. Esto significa que el recurso CSS es siempre bloquea la visualización.
Afortunadamente, podemos enviar una solicitud para un recurso CSS bajo condiciones específicas. Podríamos cambiar estilos de impresión en un archivo separado y utilizar el atributo media para decirle al navegador que la hoja de estilos especificada debe cargarse solamente cuando se imprime la página, y no es necesario bloquear la visualización en la pantalla:
<link rel="stylesheet" href="print.css" media="print" />El navegador aún descarga la Hoja de estilo print.css , pero no bloqueará la visualización. Además, el navegador tiene que descargar menos datos para el archivo CSS principal y esto nos ayudaría a acelerar la descarga. Podemos especificar cualquier consulta de medios en el atributo link, así que podemos dividir el CSS en varios archivos y cargarlos condicionalmente:
<link rel="stylesheet" href="style.css" media="screen" />
<link rel="stylesheet" href="portrait.css" media="orientation:portrait" />
<link rel="stylesheet" href="widescreen.css" media="(min-width: 42rem)" />Asegúrese de que sus estilos sean realmente necesarios para la visualización de la página. Si no, puede agregar un valor adecuado para el atributo de etiqueta de medios y desbloquear la visualización.
Tipos de medios y consultas nos pueden ayudar a acelerar el procesamiento de la página, pero podemos hacer mucho más.
- Minimizar CSS : espacio en blanco y comentarios sólo nos ayudan a leer las declaraciones de CSS. Quitando los comentarios y espacios en blanco de la hoja de estilos se puede reducir significativamente el número de bytes de un archivo CSS
- Combinar varios archivos CSS : esto reduciría el número de solicitudes HTTP. Esta acción es particularmente importante en las conexiones móviles, donde el rendimiento se ve afectado por la alta latencia (leer más sobre latencia).
- CSS crítico en línea: algunos estilos son críticos en el sentido de que son necesarios para visualizar el Above the Fold de la página. Usted debe considerar siempre estilos críticos en línea directamente en el marcado HTML para evitar otras solicitudes HTTP. Pero evite grandes archivos en línea CSS, porque esto podría requerir más viajes de ida y vuelta para visualizar el Above the Fold, y esto podría dar lugar a una advertencia en PageSpeed.
Puedes realizar una mejora rápida y sencilla de tu sitio al minificar tu código directamente desde tu panel de MyKinsta. Simplemente utiliza la función de minificación de código incluida para habilitar la modificación automática de CSS y Javascript con un solo clic.
Acelere los Procesos de Diseño y Pintura
El tiempo empleado por el navegador para el diseño del documento depende del número de elementos DOM para diseño y de la complejidad de los diseños.
- Si usted tiene un montón de elementos DOM, el navegador puede tardar mucho tiempo para calcular la posición y las dimensiones de todos ellos: evite el diseño siempre que sea posible.
- Prefiera el nuevo modelo de Flexbox, ya que es más rápido que los antiguos Flexbox y los diseños flotantes.
- Evite el diseño forzado síncrono con JavaScript
El cálculo de tamaño y la posición del elemento lleva tiempo y reduce el rendimiento. Haciendo el DOM tan simple como sea posible, y evitando el uso de JavaScript para anticipar el proceso de disposición ayudaría al navegador a acelerar el procesamiento de páginas (leer más sobre optimización de diseño).
Estrictamente conectado al diseño está el proceso de pintura, que es probablemente el que más tiempo consume en la crítica etapa de secuencia de ruta de visualización, porque en cualquier momento en que cambie el diseño de un elemento o cualquier propiedad no geométrica el explorador desencadena un evento pintura. Hacer las cosas tan sencillas como sea posible en esta etapa podría ayudar el explorador a acelerar el proceso de pintura. Por ejemplo, una propiedad box-shadow , que requiere algún tipo de cálculos, tomaría más tiempo para pintar que un borde sólido de color.
Optimizar del proceso de pintura puede no tan fácil, y usted debe hacer uso de las herramientas de desarrollo de su navegador para medir cuánto tiempo tarda el explorador para activar cada evento Pintura. Puede leer más sobre este tema en la Guía de Rendimiento de Renderizado de Google.
Desbloqueo de JavaScript
Cuando el navegador encuentra una etiqueta script tiene que detener el análisis del código HTML. Las secuencias de comandos se ejecutan en línea en el punto exacto donde se encuentran en el documento y bloquean la construcción DOM hasta que el motor JS finaliza la ejecución. En otras palabras, JavaScript en línea puede retrasar significativamente el renderizado inicial de la página. Pero JavaScript también permite manipular las propiedades de CSS, por lo que el navegador tiene que detener la ejecución del script hasta que haya terminado la descarga y la construcción del CSSOM, también. Esto significa que el código JavaScript está bloqueando el parser .
En el caso de archivos externos JS, el analizador debe esperar hasta que el recurso se haya recuperado de la cache o en un servidor remoto, y esto podría ralentizar bastante el tiempo para el primer render de la página.
Dicho esto, ¿qué podemos hacer para minimizar el tiempo empleado por el navegador para cargar y ejecutar JavaScript?
- Cargar de forma asíncrona JavaScript : el atributo boolean
asyncde la etiquetascriptindica al navegador que ejecute el script asincrónicamente, si es posible, sin necesidad de bloquear la construcción de DOM. El navegador envía la petición HTTP para el script, y continúa con el análisis del DOM. Además, el script no bloquea la construcción CSSOM, lo que significa que no bloqueará la ruta de visualización crítica (véase MDN docs para obtener más información sobre los atributos de la etiqueta script ) - Aplazar el JavaScript : boolean el atributo
deferde la etiquetascriptindica al navegador para ejecutar el script después de que el documento ha sido analizado, pero antes de encadenar el eventoDOMContentLoaded. Este atributo no debe usarse si el atributo src está ausente, es decir, secuencias de comandos en línea (leer más sobre Mozilla Hacks) - Aplazar el JavaScript en línea : muchos scripts no manipulan el DOM o el CSSOM, así que no hay ninguna buena razón para bloquear el análisis. Lamentablemente, no podemos utilizar
asyncydeferatributos para scripts en línea, de modo que la única manera para cargarlos después de que el documento ha sido cargado es moverlos a la parte inferior. La ventaja es que los scripts en línea no requieren otras solicitudes HTTP. Sin embargo, los scripts en línea usados en varias páginas se traduciría en código redundante.
Resumiendo las Reglas de Optimización
Eso es un montón de cosas, ¿no es así? Tomemos un descanso, y escribemos una lista de las acciones de optimización descritas hasta ahora.
- Minificar, comprimir y poner en cache recursos HTML, CSS y JavaScript.
- Minimizar el uso de recursos de bloqueo de visualización (concretamente el CSS)
- Utilice las consultas de media en etiquetas
link - Divida hojas de estilo y CSS crítico en línea
- Combinar varios archivos CSS
- Utilice las consultas de media en etiquetas
- Minimizar el uso de recursos de bloqueo del analizador (JavaScript)
- Utilice el atributo
deferen las etiquetas de script - Utilice el atributo
asyncen las etiquetas script - Ponga en línea el JavaScript y mueva las etiquetas
scriptal final del documento
- Utilice el atributo
Ahora que conocemos los conceptos básicos de Optimización de Ruta de Visualización Crítica, podemos echar un vistazo a algunos populares plugins de optimización de WordPress.
Optimizar la Ruta de Visualización Crítica en WordPress
Los usuarios de WordPress pueden tomar ventaja de una serie de plugins que abarcan prácticamente todos los aspectos del proceso de optimización. Puede instalar un plugin completo, o puede instalar varios plugins a la vez, cada uno de ellos proporcionando funciones de optimización específica.
Si su sitio está alojado por Kinsta no necesita un plugin de cache porque No se Requieren Plugins de Cache de WordPress en Kinsta.
W3 Total Cache
Este único plugin cubre casi todas las etapas del proceso de optimización de la ruta de visualización crítica. A primera vista, la configuración del plugin puede ser abrumador, pero una vez que se familiarice con la secuencia de ruta de visualización crítica, usted será capaz de tomar ventaja de un conjunto de herramientas de rendimiento potente.
Aquí está una lista de algunas funciones del plugin:
- Publicaciones y páginas HTML, CSS y JavaScript cacheado en memoria , en el disco o en la CDN
- Caching de feeds, resultados de búsqueda, objetos de la base de datos, objetos y fragmentos de WordPress
- Minificación de publicaciones y páginas HTML minificación
- Minificación de JavaScript y CSS
- Optimización de JavaScript con
asyncydefer - Cache del navegador usando cache-control, encabezados de caducación futura y etiquetas de entidades
- (HTTP) compresión gzip.
- Resultados Google PageSpeed en el Panel de Control de WordPress
Estas son sólo algunas de las muchas características de W3TC. Puedes leer más sobre todas las características, ajustes y opciones del plugin en esta guía detallada.
WP Super Cache
WP Super Cache es otro popular plugin para el rendimiento del sitio.
Viene con un buen número de características de optimización, pero es menos completo que el anterior W3 Total Cache y puede parecer más asequible para usuarios principiantes e intermedios.
Básicamente, proporciona características de caching y la compresión HTTP, pero carece de recursos y optimización de minificación JavaScript con atributos async y defer. Sin embargo, más de un millón de instalaciones activas demuestran que el plugin vale la pena probar.
Autoptimize
Con más de 1,000,000 instalaciones activas, Autoptimize es uno de los más populares plugins para minificación gratis.
Viene con una página de opciones dividida en varias secciones donde el administrador del sitio puede configurar por separado la minificación HTML, CSS y JavaScript.
También puede agregar scripts independientes u hojas de estilo y establecer excepciones para recursos específicos. Además, Autoptimize permite cachear recursos minimizados en disco o en la CDN y guardar activos optimizados como archivos estáticos. Para encontrar la mejor configuración para tu sitio de WordPress puedes seguir nuestra detallada guía de Autoptimize aquí.
Otros plugins de optimización que puedes probar:
Swift Performance
Swift Performance es otro plugin que es posible que desee verificar. Este es un plugin premium que pueden ayudar a aumentar su rendimiento, y fue desarrollado específicamente para ayudarle a tratar y lograr esas puntuaciones 100/100 de Google PageSpeed Insights.
Algunas de sus características principales incluyen:
- No sólo puede minificar y combinar los archivos CSS y Javascript, sino que puede crear CSS críticos sobre la marcha para sus páginas.
- Caching inteligente, así como solicitudes AJAX y dinámicas.
- Construido en la compresión de imágenes sin pérdidas.
- Soporte CDN.
Encontrará una visión profunda sobre plugins de optimización de WordPress en Cómo Eliminar los Bloqueadores de Visualización JavaScript y CSS.
Conclusiones
La optimización de Ruta De Visualización Crítica es un proceso de mejora y medición que requiere una clara comprensión de cada tarea que el explorador realiza para convertir código en píxeles y para visualizar una página en la pantalla. Usted puede aprender más acerca de la ruta de visualización crítica en la guía de optimización de Google.
Aquí en el blog de Kinsta intentamos cubrir todos los aspectos de optimización. Una lista de lecturas adicionales:
- Latencia de la Red – Comparando el Impacto sobre su Sitio WordPress
- WordPress CDN – Por Qué Usted Debería Usar Una en 2018
- Cómo Optimizar Imágenes para la Web y Mejor Rendimiento
- Cómo Reducir el TTFB para Mejorar Tiempos de Carga de Página de WordPress
- Una Inmersión Profunda en GTmetrix Herramienta de Test de Velocidad
- 14 Herramientas Gratuitas de Prueba de Velocidad para Usuarios de WordPress
- 8 WordPress Plugins de Rendimiento Menos Conocidos (pero útiles)
- ¿Cómo Sacar 100/100 en Google PageSpeed Insights con WordPress?
¿Cuánto tiempo tardó en optimizar la ruta de visualización crítica de sus sitios web? ¿Qué aspectos del proceso de optimización eran los peores? ¡Déjenos saber en los comentarios abajo!
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Fenomenal