Cómo optimizar una ruta de renderización crítica en WordPress

Una ruta de representación crítica es una serie de tareas que realiza un navegador la primera oportunidad que se expone una página en la pantalla, o sea, carga, trata y transforma código HTML, CSS y JavaScript en pixeles reales y lo dibuja en la pantalla. .

La optimización de la ruta de representación crítica es el proceso de minimizar el tiempo que tarda un navegador en completar cada paso de una secuencia y priorizar la visualización de contenido relacionado con la actividad de hoy del usuario.

La mayoría de este proceso implica unas partes de la página que ve sin desplazarse por la ventana del navegador, esta parte también lleva por nombre Dobla la parte de arribaPara lograr una mejor usabilidad, la ATF debe realizarse lo mucho más rápido posible, lo que se puede poder achicando el viaje de ida y vuelta de la red. Los recursos necesarios para producir ATF se piensan críticos, y la optimización "por encima del plegado" significa reducir el impacto de los elementos críticos en el tiempo de reproducción de la primera página.

En el artículo, mostramos la secuencia de optimización para la ruta de renderización crítica.

• Primero, describo la labor del navegador para delinear el contenido de la página.
• Ahora, analizo las primordiales funcionalidades que tenemos la posibilidad de realizar para mejorar la ruta de renderización crítica.
• Por último, enumeraré ciertas extensiones de optimización de WordPress útiles (y populares).

Ruta de renderización crítica

Estos son los pasos que prosigue un navegador para representar una página:

• Primero, el navegador carga y analiza las anotaciones HTML y crea un DOM
• Luego carga y procesa las anotaciones CSS y crea una plantilla de objeto CSS
• Combina los nodos DOM y CSSOM precisos para representar una página en el árbol de representación; es la composición de árbol de todos y cada uno de los nodos visibles.
• Calcula el tamaño y la posición del objeto en cada página.
• Después de todo, dibuja píxeles en la pantalla.

DOM

Como se enseña en la Guía de Google+ para optimizar la ruta de representación crítica, el navegador crea el modelo de objetos del archivo en cuatro pasos:

• Primero, el navegador lee los bytes de la línea y los convierte en letras y números particulares.
• Luego convierte la cadena dentro de los corchetes de las esquinas en ID.
• Estos ID se convierten en elementos de nodo.
• Los objetos de nodo están vinculados a una composición de datos en forma de árbol que contiene contenido HTML, atributos y relaciones entre los nodos. Modelo de objeto de archivo.

Cabe apuntar que el navegador crea el DOM gradualmente. Esto nos deja acelerar la representación de la página mediante la creación de una poderosa composición DOM.

CSSOM

Cuando el análisis está activado. hallarse backlink Una etiqueta que se refiere a una hoja de estilo CSS externa evita el análisis y solicita un recurso. En el momento en que se recibe el fichero CSS, el navegador comienza a crear la composición de árbol de los nodos CSS.

• El navegador lee los bytes de línea en el archivo .css y los transforma en caracteres individuales
• Transforma una cadena de corchetes rizados en monedas.
• Estos ID se convierten en objetos de nodo
• Los objetos de nodo están vinculados a una composición de datos en forma de árbol que tiene dentro las características CSS de cada nodo y la relación entre los nodos. Plantilla de objeto CSS (CSSOM).

En contraste a la estructura DOM, la estructura CSSOM no es incremental. El navegador no puede entrar a parte de la hoja de estilo pues el estilo se puede ajustar y regresar a publicar con la misma hoja de estilo. En consecuencia, el navegador inhabilita el proceso de renderizado hasta el momento en que recibe y analiza todos los archivos CSS. CSS impide el renderizado.

Render de un árbol

El navegador combina DOM y CSSOM en un árbol de representación, y la estructura de árbol final contiene todos y cada uno de los nodos y atributos empleados para representar la página en la pantalla.

El árbol de renderizado tiene dentro solo los nodos necesarios para renderizar la página. Por consiguiente, se suprimen los nodos invisibles.

El navegador emplea el árbol de renderizado para calcular el tamaño y la ubicación del nodo como entrada al dibujo.

Maquetación y dibujo

En la fase de diseño, el navegador calcula el tamaño y la localización de cada nodo en el árbol de renderizado. El navegador se ejecuta desde las raíces del árbol de renderizado y crea un modelo de caja en este punto. Esta información se utiliza ocasionalmente para convertir cada nodo en el árbol de renderizado en píxeles reales en la pantalla.

Optimización de la ruta de representación crítica

El tiempo preciso para completar todo el desarrollo varía. Depende del tamaño del archivo, el número de peticiones, el estilo de la app, el equipo del usuario, etc.
Entre las primordiales sugerencias de Google plus es priorizar el contenido aparente a fin de que se muestre en la parte superior de la página lo mucho más rápido posible, y tiene 2 reglas primordiales:

• Produzca HTML para cargar la keyword anterior primero
• Reducir la proporción de datos utilizados por los recursos HTML, CSS y JS

Como se enseña en la Guía de PageSpeed ​​de Google+, se requieren rondas adicionales entre el servidor y el navegador si la proporción de datos necesarios para producir un ATF excede la ventana de congestión original (14,6 kb). En redes móviles inteligentes con alta latencia, esto puede postergar significativamente la carga de la página (lea mucho más sobre la latencia).
El navegador construye el DOM de forma incremental para que tengamos la posibilidad reducir el tiempo que lleva construir un ATF al analizar el código HTML para cargar la primera pantalla primero y postergar el final de la página.

No obstante, la optimización no termina con la construcción de una composición DOM eficaz. Más bien, es un proceso de optimización y medición que cubre toda la secuencia de la ruta de reiteración crítica.

Profundicemos.

Achicar la dimensión de recursos

Podemos reducir la proporción de datos descargados por el navegador reduciendo, comprimiendo y guardando en caché los elementos HTML, CSS y JavaScript:

• Distancia Los caracteres insignificantes (como comentarios y espacios) se eliminan del código fuente. Estos caracteres son útiles en el avance, pero inútiles en la capacitación de páginas.
• compresión Es la capacidad de los servidores web y los clientes del servicio de achicar el tamaño de los ficheros transferidos para progresar la velocidad y el uso del ancho de banda.
• Cache: Cada navegador tiene una implementación Caché HTTPNecesitamos asegurarnos de que cada respuesta del servidor tenga los encabezados HTTP correctos que señalen cuándo y cuándo el navegador debe guardar en caché el recurso solicitado.

Mejorar CSS

Ahora sabemos que el navegador debe aguardar para recibir y procesar el código CSS antes de renderizar la página (CSS bloquea la presentación). Pero no todos y cada uno de los recursos CSS evitan la renderización.

CSS se puede limitar a determinadas condiciones y tenemos la posibilidad de personalizarlo con tipos de medios y consultas de medios. Cuando muestra una página web en la pantalla, el navegador envía una solicitud de impresión para el tipo de medio, pero no impide que se cree esa página de recursos.
Toma el siguiente link Etiqueta:

La hoja de estilo de referencia para este personaje se aplica a todas y cada una de las condiciones, con independencia del tipo de medio actual, la resolución de pantalla, la orientación del dispositivo, etc. Esto significa que los recursos CSS siempre y en todo momento se muestran bloqueados.

A dios gracias, bajo ciertas situaciones, tenemos la posibilidad de mandar peticiones desde recursos CSS, transferir el estilo de impresión a un archivo separado y utilizarlo. media El atributo le afirma al navegador que el papel de estilo especificada solo debe cargarse cuando se imprime la página, sin que se muestre en el Bloque:

El navegador todavía se está cargando Imprimir documentos Hoja de estilo, pero no evita el renderizado. Además de esto, el navegador precisa cargar menos datos en el fichero CSS primordial, lo que nos ayuda a acelerar la descarga. link Peculiaridades para que tengamos la posibilidad dividir CSS en varios ficheros y cargarlo condicionalmente:

Asegúrese de que se requiera su estilo para enseñar la página. Puede agregar los valores apropiados al atributo de etiqueta de medios; en caso contrario, deshaga la representación.

Los modelos de medios y las consultas tienen la posibilidad de asistirnos a enseñar las páginas mucho más rápido, pero podemos realizar mucho más.

• Minimizar CSS: Los espacios y los comentarios solo nos asisten a leer el mensaje CSS. Comenzando con una hoja de estilo, tenemos la posibilidad de achicar significativamente la cantidad de bytes en un fichero CSS.
• Combina varios ficheros CSS: Esto disminuye la proporción de peticiones HTTP. Este desarrollo es primordial para conexiones móviles inteligentes donde el desempeño se ve perjudicado por una alta latencia (lea más sobre la latencia).
• Integrar CSS crítico: Ciertos estilos son importantes porque deben enseñar la primera pantalla de la página. Siempre es mejor incluir estilos de clave engastados de forma directa en las etiquetas HTML para eludir solicitudes HTTP auxiliares. Sin embargo, evite tocar ficheros CSS enormes, ya que esto puede requerir viajes de ida y vuelta adicionales para formar la primera pantalla, lo que puede generar advertencias de PageSpeed.

Acelere el desarrollo de diseño y dibujo

El tiempo que tarda un navegador en cargar un documento es dependiente de la proporción de elementos DOM que se van a crear y de la complejidad de esos diseños.

• Si tiene bastantes elementos DOM, puede conducir un buen tiempo calcular la ubicación y el tamaño de su navegador: evite el diseño tanto como sea posible.
• Prefiero el nuevo modelo de flexbox porque es mucho más veloz que el antiguo flexbox y tiene un aspecto flotante.
• Evite la utilización de JavaScript para forzar un diseño sincrónico.

Calcular el tamaño y la ubicación de los elementos lleva tiempo y degrada el desempeño. Si mantiene el DOM lo mucho más simple posible y evita utilizar JavaScript para adivinar el desarrollo de diseño, su navegador puede apresurar la representación de la página (lea mucho más sobre la optimización del diseño).

Estrechamente relacionado con el diseño está el proceso de pintura, que es quizás el paso que más tiempo lleva en la secuencia de la ruta de renderización crítica. Siempre y cuando cambie el diseño de un factor u otras características no geométricas, el navegador envía un acontecimiento de dibujo. Al simplificar las cosas en este punto, el navegador puede apresurar el proceso de dibujo, por ejemplo, un box-shadow Se precisa mucho más tiempo para dibujar atributos calculados que los colores de marco puro.

Posiblemente mejorar el proceso de dibujo de la página no sea tan sencillo. Utilice las herramientas de desarrollo del navegador para medir el tiempo que tarda el navegador en advertir cada acontecimiento de personaje. Consulte la Guía de representación de desempeño de Google plus para obtener mucho más información.

Habilite JavaScript para desbloquear

En el momento en que un navegador encuentra una etiqueta de comando, debe dejar de analizar el código HTML. El script de adentro se ejecuta en el punto exacto del archivo y inhabilita la composición DOM hasta que se ejecuta el motor JS. En otras expresiones, JavaScript incrustado puede postergar de manera significativa la representación inicial de una página. No obstante, JavaScript asimismo deja manipular las propiedades de CSS, por lo que el navegador debe dejar de realizar scripts hasta el momento en que CSSOM se haya cargado y construido. JavaScript inhabilita el analizador.

Para los ficheros JS externos, el analizador también debe aguardar recibir elementos del caché o del servidor remoto, lo que puede ralentizar relevantemente el tiempo de procesamiento de la primera página.
No obstante, ¿qué podemos realizar para minimizar el tiempo que lleva cargar un navegador y realizar JavaScript?

• Descargar JavaScript de manera asincrónica: Valor booleano async Atributo script La etiqueta pide al navegador que ejecute el script de forma asincrónica, si es posible, sin bloquear la composición DOM. El navegador manda una solicitud HTTP de secuencia de comandos y examina aún más el DOM, y la secuencia de comandos no evita que se cree CSSOM, lo que significa que no inhabilita las sendas de renderización críticas (consulte la documentación de MDN para conseguir más información). manuscrito Identificadores)
• Mueva JavaScript: Valor booleano defer Atributo script La etiqueta pide al navegador que ejecute el script tras analizar el archivo, pero antes de comenzarlo. DOMContentLoaded Evento. Si el atributo src no existe, no debe emplearse, es decir, scripts internos (lea mucho más sobre Mozilla firefox Hacks)
• Mueva JavaScript interno: Varios scripts no manipulan ficheros DOM o CSSOM, con lo que no hay una aceptable razón para evitar el análisis. Desafortunadamente, no tenemos la posibilidad de emplearlos. async con defer Los atributos de la secuencia de comandos están incrustados, con lo que cuando se carga un archivo, la única forma de cargarlos es moverlos hacia abajo. El beneficio es que los scripts internos no necesitan solicitudes HTTP adicionales. Sin embargo, los scripts engastados que se utilizan en varias páginas pueden provocar redundancia de código.

Resumir las reglas de optimización

Son varias cosas, ¿no? Respiramos profundamente y escribimos una lista de las acciones de optimización descritas hasta la actualidad.

• Minimice, comprima y almacene en caché elementos HTML, CSS y JavaScript.
• Minimizar la utilización de recursos de bloqueo de renderizado (singularmente CSS)
  • Utilice encuestas de medios link etiqueta
  • Comparta hojas de estilo y CSS clave incrustado
  • Combina varios ficheros CSS
• Reducir la utilización de analizadores para bloquear recursos (JavaScript)
  • utilizar defer Atributos de la etiqueta de secuencia de comandos
  • usar async Atributos de la etiqueta de secuencia de comandos
  • Incluya JavaScript y listo script Pegatina en la parte inferior del documento.

En este momento que conocemos el concepto básico de optimización de la ruta de renderización crítica, podemos ver algunas de las populares extensiones de optimización de WordPress.

Optimice una ruta de renderización crítica en WordPress

Los clientes de WordPress tienen la posibilidad de aprovechar múltiples complementos que cubren casi todas las unas partes del proceso de optimización. Puede disponer un complemento versátil o varios complementos al tiempo, cada uno con características de optimización concretas.

Si su portal web está alojado en Kinsta, no requiere una extensión de caché porque Kinsta no necesita una extensión de caché de WordPress.

Total de caché W3

Esta extensión cubre casi todos los pasos del desarrollo de optimización de la ruta de renderización crítica. A primera vista, la configuración de una extensión puede resultar abrumadora. No obstante, una vez que esté familiarizado con el orden crítico de las rutas de renderizado, puede explotar las poderosos herramientas de desempeño.

A continuación, se muestra una lista de algunas de las peculiaridades del complemento:

• HTML (mensajes y páginas), CSS y JavaScript cachés en la memoria, en el disco duro o en CDN
• Caché de feeds, resultados de la búsqueda, elementos de banco de información, elementos de WordPress y extractos
• Reducción de HTML (mensajes y páginas)
• Minimización de JavaScript y CSS
• Optimización de JavaScript y async con defer
• Caché del navegador con administración de caché, encabezados de paso entrantes y etiquetas globales
• Compresión HTTP (gzip)
• Resultados de PageSpeed ​​de Google plus en el panel de WordPress

Estas son solo algunas de las muchas especificaciones de W3TC. En esta guía pasito a pasito, aprenderá más sobre todos los complementos, configuraciones y configuraciones.

Super caché de WP

WP Super Cache es otra extensión habitual del desempeño del página web.

Tiene muchas funcionalidades de optimización, pero no es tan completo como el W3 Total Cache anterior, y puede parecer mucho más asequible para principiantes y individuos avanzados.

Básicamente, da almacenamiento en caché y compresión HTTP, pero sin compresión de recursos ni optimización de JavaScript. async con defer Características. Sin embargo, más de un millón de instalaciones activas detallan que vale la pena probar el complemento.

Optimización automática

Con mucho más de 1,000,000 de instalaciones activas, Autoptimize pertence a las extensiones de empaque gratis mucho más populares.

Viene con una página de configuración que se distribuye en varias secciones donde el administrador del lugar puede especificar la minimización de HTML, CSS o JavaScript.

Asimismo puede compilar scripts u hojas de estilo independientes y establecer salvedades para elementos específicos. Además de esto, la optimización automática le deja almacenar por un tiempo los recursos reducidos en su disco duro o CDN y almacenar los elementos optimizados como ficheros estáticos. Para conseguir la mejor configuración para su lugar de WordPress, siga nuestra guía detallada para la optimización automática aquí.

Optimización de plegado

Esta extensión proporciona un grupo terminado de herramientas para la optimización Above the Fold. Es una herramienta para expertos y usuarios avanzados que obtuvieron una puntuación de 100/100 en la prueba de PageSpeed ​​de Google plus.

Estas son ciertas especificaciones más interesantes:

Herramientas CSS importantes:

• Carga CSS condicional
• Administración crítica de CSS con un editor de texto
• Gulp.js Un constructor de CSS crítico
• Prueba de calidad crítica de CSS

Optimización de carga CSS:

• Cargar CSS de forma asincrónica
• Obtener CSS de HTML
• Caché de hoja de estilo externa

Optimización de descarga de JS:

• Carga JS asincrónica
• localStorage Cache
• Descarga aplazada desde JavaScript
• Caché de script de afuera

El complemento asimismo funciona con Google plus Progressive Web y Google+ Webfont Optimization. Otras extensiones de optimización que quizás desee evaluar:

Ejecución rápida

Swift Performance es otra extensión que vale la pena evaluar. Esta extensión avanzada puede ayudarlo a mejorar su rendimiento y está desarrollada para asistirlo a conseguir una calificación de 100/100 de Google+ PageSpeed ​​Insights.

Ciertas de sus principales funciones son:

• No solo puede achicar y conjuntar archivos CSS y Javascript, sino también puede Produzca CSS clave de manera dinámica Para su página web.
• Caché inteligente con AJAX y solicitudes activas.
• Compresión de imagen integrada sin pérdidas.
• Soporte CDN.

Para conseguir mucho más información sobre las extensiones de optimización de WordPress, consulte Remover archivos anti-dispersión de JavaScript y CSS.

finalmente

La optimización de la ruta de representación crítica es un proceso de optimización y medición que requiere una entendimiento clara de cada tarea realizada por el navegador para convertir el código en pixeles y mostrar la página en la pantalla. Para obtener mucho más información sobre las rutas de renderización críticas, consulte la Guía de optimización de Google plus.

En el blog de Kinsta, intentamos de contemplar todos y cada uno de los puntos del ajuste del rendimiento. Ahora se muestra una lista para leer:

¿Cuánto tiempo transporta optimizar una ruta de renderización crítica para un portal de internet? ¿Qué partes del proceso de optimización le resultan más difíciles de gestionar? Háganos entender en los comentarios ahora.