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 procesar el ATF son considerados críticos, y por Above the Fold significa minimizar el impacto de los recursos críticos en el tiempo para la primera visualización de la página.

¿Sigue buscando ese WordPress host perfecto?

Pruebe el premium WordPress hosting gestionado de Kinsta para experimentar su sitio sin problemas.
  • Controles estilizados que representan la gestión Completamente administrado
  • Escudo con un tic que representa la seguridadSeguro como Fort Knox
  • Fusión de líneas que representa migracionesMigraciones gratuitas
  • Tres chevrones a la derecha que representan la velocidad del servidorÚltima velocidad
  • Flecha circular con punto central que representa backupsBackups diarios
  • Hexágonos desplazados que representan nuestro conjunto de servidoresGoogle Cloud Platform

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.

Estructura DOM

Estructura 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.

Estructura CSSOM

Estructura CSSOM

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.

Estructura del Árbol de visualización

Estructura del Árbol de visualización

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.

El contenido Above the Fold varía dependiendo del dispositivo del usuario

El contenido Above the Fold varía dependiendo del dispositivo del usuario

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 sumamente útiles en el desarrollo, pero son inútiles para el navegador para la visualización 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.

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.

Chrome DevTools permite identificar las partes de la página que están siendo pintadas

Chrome DevTools permite identificar las partes de la página que están siendo pintadas

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 async de la etiqueta script indica 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 boolean difiere de la etiqueta script indica al navegador para ejecutar el script después de que el documento ha sido analizado, pero antes de encadenar el evento DOMContentLoaded. 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 async y aplazar los atributos 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
  • Minimizar el uso de recursos de bloqueo del analizador (JavaScript)
    • Utilice el atributo defer en las etiquetas de script
    • Utilice el atributo Async en las etiquetas script
    • Ponga en línea el JavaScript y mueva las etiquetas script al final del documento

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.

W3 Total Cache WordPress plugin

W3 Total Cache WordPress plugin

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 async y defer
  • 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. Puede leer más en la página del plugin de WordPress.org.

Configuración de minimización de W3 Total Cache JavaScript

Configuración de minimización de W3 Total Cache JavaScript

WP Super Cache

WP Super Cache es otro popular plugin para el rendimiento del sitio.

"<yoastmark

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Conozca nuestras características

It comes with a good number of optimization features, but it’s less comprehensive than the previous W3 Total Cache and may look more affordable to novice and intermediate users.

WordPress Super Cache tester

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.

"Opción

Autoptimize

Con más de 400,000 instalaciones activas, Autoptimize es uno de los más populares plugins para minificación gratis.

Autoptimize WordPress plugin

Autoptimize WordPress plugin

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.

Opción de optimización de HTML Autoptimize

Opción de optimización de HTML Autoptimize

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.

Above the Fold Optimization

Este plugin proporciona un completo conjunto de herramientas de optimización por Above the Fold. Es una herramienta para los profesionales y usuarios avanzados destinados a obtener puntuación 100/100 en la prueba Google PageSpeed.

Above the Fold Optimization WordPress plugin

Above the Fold Optimization WordPress plugin

Aquí están algunas de las características más interesantes:

Herramientas CSS crítico:

  • Cargado CSS condicional
  • Gestión de CSS crítico a través del editor de texto
  • Gulp.js creador de CSS crítico
  • Prueba de calidad CSS crítico

Optimización de carga CSS:

  • Carga asincrónica CSS
  • Extracción de HTML CSS
  • Caching de hoja de estilo externa

Optimización de la carga JS:

  • Carga asincrónica JS
  • localStorage cache
  • JavaScript de carga diferida 
  • Cache de script externo

Además, el plugin proporciona soporte para la aplicación Progressive Web de Google y optimización Google Web Font. Otros plugins de optimización que querrá 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.

Swift Performance WordPress plugin

Swift Performance WordPress plugin

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:

¿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!