La optimizaci\u00f3n de ruta de visualizaci\u00f3n cr\u00edtica es el proceso de reducir al m\u00e1ximo el tiempo empleado por el navegador para realizar cada paso de la secuencia priorizando la visualizaci\u00f3n de contenidos relacionados con la acci\u00f3n del usuario actual.<\/p><\/blockquote>\n
Gran parte de este proceso se refiere a la porci\u00f3n de la p\u00e1gina que es visible sin necesidad de desplazarse hacia abajo en la ventana del navegador. Esa secci\u00f3n es tambi\u00e9n conocida como Above the Fold <\/strong>. Para una mayor facilidad de uso, el ATF deber\u00eda hacerse tan pronto como sea posible, y esto puede hacerse reduciendo el n\u00famero de viajes de ida y vuelta de red a un m\u00ednimo. Los recursos necesarios para renderizar el ATF se consideran cr\u00edticos, y optimizar el Above the Fold significa minimizar el impacto de los recursos cr\u00edticos en el tiempo de renderizaci\u00f3n de la primera p\u00e1gina.<\/p>\n En esta publicaci\u00f3n, vamos a caminar a trav\u00e9s de la secuencia de optimizaci\u00f3n de ruta de visualizaci\u00f3n cr\u00edtica.<\/p>\n Aqu\u00ed est\u00e1 la secuencia de pasos realizados por el navegador para visualizar una p\u00e1gina:<\/p>\n Como bien se explica en la Gu\u00eda de optimizaci\u00f3n de ruta de visualizaci\u00f3n cr\u00edtica<\/a> de Google, el navegador genera el modelo de objetos de documento en una secuencia de cuatro pasos:<\/p>\n Lo que es importante a tener en cuenta aqu\u00ed es que el navegador construye el DOM de forma incremental. Esto nos da la oportunidad de acelerar el procesamiento de la p\u00e1gina creando eficientes estructuras DOM.<\/p>\n Cuando el analizador encuentra una etiqueta link que haga referencia a una hoja de estilos CSS externa, bloquea el an\u00e1lisis y env\u00eda una solicitud para este recurso. Una vez que el archivo CSS se ha recibido, el explorador inicia la construcci\u00f3n de una estructura de datos de \u00e1rbol de nodos de CSS.<\/p>\n A diferencia de la construcci\u00f3n DOM, la construcci\u00f3n 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\u00f3n, el explorador bloquea el procesamiento hasta que recibe y analiza todas las CSS. Esto significa que CSS es un bloqueador de visualizaci\u00f3n <\/strong>.<\/p>\n El explorador combina DOM y CSSOM en el \u00e1rbol de visualizaci\u00f3n, que es la \u00faltima estructura de \u00e1rbol que contiene todos los nodos y propiedades que se utilizan para visualizar la p\u00e1gina en la pantalla.<\/p>\n El \u00e1rbol de visualizaci\u00f3n s\u00f3lo contiene los nodos que son necesarios para procesar una p\u00e1gina. Como consecuencia de ello, los nodos invisibles son omitidos.<\/p><\/blockquote>\n El navegador utiliza el \u00e1rbol de visualizaci\u00f3n para calcular las dimensiones y la posici\u00f3n y, en \u00faltima instancia, como un insumo para el proceso de pintura.<\/p>\n En el paso de dise\u00f1o, el navegador calcula las dimensiones y posici\u00f3n de cada nodo del \u00e1rbol de visualizaci\u00f3n. En este paso, el explorador recorre el \u00e1rbol de visualizaci\u00f3n desde su ra\u00edz y produce un modelo de caja. Finalmente, esta informaci\u00f3n se utiliza para convertir cada nodo del \u00e1rbol de visualizaci\u00f3n en p\u00edxeles reales en la pantalla.<\/p>\n El tiempo requerido para ejecutar todo el proceso puede ser variable. Eso depende de muchos factores, como el tama\u00f1o del documento, el n\u00famero de peticiones, los estilos aplicados, el dispositivo del usuario, etc. Una de las m\u00e1s importantes recomendaciones de Google es priorizar el contenido visible para visualizar por Above the Fold, lo m\u00e1s r\u00e1pido posible, y ofrece dos reglas principales a seguir:<\/p>\n Como bien se explica en la gu\u00eda de Google PageSpeed<\/a>, si la cantidad de datos necesarios para visualizar ATF excede la ventana de congesti\u00f3n inicial (14.6kb), requerir\u00e1 viajes de ida y vuelta adicionales de red entre el servidor y el navegador. En redes m\u00f3viles, con altas latencias, esto retrasar\u00eda considerablemente la carga de la p\u00e1gina (leer m\u00e1s sobre latencia<\/a>). Pero la optimizaci\u00f3n no termina con la construcci\u00f3n de una eficaz estructura DOM. M\u00e1s bien, es un proceso de mejora y medici\u00f3n que involucra toda la secuencia de la ruta cr\u00edtica de visualizaci\u00f3n. Podemos reducir la cantidad de datos que el navegador va a descargar al minimizar, comprimir y cachear recursos HTML, CSS y JavaScript:<\/p>\n Ahora sabemos que el explorador tiene que esperar hasta que recupere y procese el c\u00f3digo CSS antes de que pueda visualizar la p\u00e1gina (CSS es bloqueador de visualizaci\u00f3n<\/a>).\u00a0 Pero no todos los recursos CSS son de bloqueadores de visualizaci\u00f3n <\/strong>. La hoja de estilo de referencia de esta etiqueta se aplica bajo cualquier condici\u00f3n, independientemente del tipo de medio actual, la resoluci\u00f3n de pantalla, la orientaci\u00f3n del dispositivo, etc. Esto significa que el recurso CSS es siempre bloquea la visualizaci\u00f3n. El navegador a\u00fan descarga la Hoja de estilo print.css <\/em>, pero no bloquear\u00e1 la visualizaci\u00f3n. Adem\u00e1s, el navegador tiene que descargar menos datos para el archivo CSS principal y esto nos ayudar\u00eda a acelerar la descarga. Podemos especificar cualquier consulta de medios en el atributo Aseg\u00farese de que sus estilos sean realmente necesarios para la visualizaci\u00f3n de la p\u00e1gina. Si no, puede agregar un valor adecuado para el atributo de etiqueta de medios y desbloquear la visualizaci\u00f3n.<\/p>\n Tipos de medios y consultas nos pueden ayudar a acelerar el procesamiento de la p\u00e1gina, pero podemos hacer mucho m\u00e1s.<\/p>\n Puedes realizar una mejora r\u00e1pida y sencilla de tu sitio al minificar tu c\u00f3digo directamente desde tu panel de MyKinsta<\/a>. Simplemente utiliza la funci\u00f3n de minificaci\u00f3n de c\u00f3digo<\/a> incluida para habilitar la modificaci\u00f3n autom\u00e1tica de CSS y Javascript con un solo clic.<\/p>\n El tiempo empleado por el navegador para el dise\u00f1o del documento depende del n\u00famero de elementos DOM para dise\u00f1o y de la complejidad de los dise\u00f1os.<\/p>\n El c\u00e1lculo de tama\u00f1o y la posici\u00f3n 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\u00f3n ayudar\u00eda al navegador a acelerar el procesamiento de p\u00e1ginas (leer m\u00e1s sobre optimizaci\u00f3n de dise\u00f1o<\/a>).<\/p>\n Estrictamente conectado al dise\u00f1o est\u00e1 el proceso de pintura, que es probablemente el que m\u00e1s tiempo consume en la cr\u00edtica etapa de secuencia de ruta de visualizaci\u00f3n, porque en cualquier momento en que cambie el dise\u00f1o de un elemento o cualquier propiedad no geom\u00e9trica el explorador desencadena un evento pintura. Hacer las cosas tan sencillas como sea posible en esta etapa podr\u00eda ayudar el explorador a acelerar el proceso de pintura. Por ejemplo, una propiedad box-shadow\u00a0, que requiere alg\u00fan tipo de c\u00e1lculos, tomar\u00eda m\u00e1s tiempo para pintar que un borde s\u00f3lido de color.<\/p>\n Optimizar del proceso de pintura puede no tan f\u00e1cil, y usted debe hacer uso de las herramientas de desarrollo de su navegador para medir cu\u00e1nto tiempo tarda el explorador para activar cada evento Pintura. Puede leer m\u00e1s sobre este tema en la Gu\u00eda de Rendimiento de Renderizado de Google<\/a>.<\/p>\n Cuando el navegador encuentra una etiqueta script tiene que detener el an\u00e1lisis del c\u00f3digo HTML. Las secuencias de comandos se ejecutan en l\u00ednea en el punto exacto donde se encuentran en el documento y bloquean la construcci\u00f3n DOM hasta que el motor JS finaliza la ejecuci\u00f3n. En otras palabras, JavaScript en l\u00ednea puede retrasar significativamente el renderizado inicial de la p\u00e1gina. Pero JavaScript tambi\u00e9n permite manipular las propiedades de CSS, por lo que el navegador tiene que detener la ejecuci\u00f3n del script hasta que haya terminado la descarga y la construcci\u00f3n del CSSOM, tambi\u00e9n. Esto significa que el c\u00f3digo JavaScript est\u00e1 bloqueando el parser <\/strong>. Eso es un mont\u00f3n de cosas, \u00bfno es as\u00ed? Tomemos un descanso, y escribemos una lista de las acciones de optimizaci\u00f3n descritas hasta ahora.<\/p>\n Ahora que conocemos los conceptos b\u00e1sicos de Optimizaci\u00f3n de Ruta de Visualizaci\u00f3n Cr\u00edtica, podemos echar un vistazo a algunos populares plugins de optimizaci\u00f3n de WordPress.<\/p>\n Los usuarios de WordPress pueden tomar ventaja de una serie de plugins que abarcan pr\u00e1cticamente todos los aspectos del proceso de optimizaci\u00f3n. Puede instalar un plugin completo, o puede instalar varios plugins a la vez, cada uno de ellos proporcionando funciones de optimizaci\u00f3n espec\u00edfica.<\/p>\n Si su sitio est\u00e1 alojado por Kinsta no necesita un plugin de cache porque No se Requieren Plugins de Cache de WordPress en Kinsta<\/a>.<\/p><\/blockquote>\n Este \u00fanico plugin cubre casi todas las etapas del proceso de optimizaci\u00f3n de la ruta de visualizaci\u00f3n cr\u00edtica. A primera vista, la configuraci\u00f3n del plugin puede ser abrumador, pero una vez que se familiarice con la secuencia de ruta de visualizaci\u00f3n cr\u00edtica, usted ser\u00e1 capaz de tomar ventaja de un conjunto de herramientas de rendimiento potente.<\/p>\n Aqu\u00ed est\u00e1 una lista de algunas funciones del plugin:<\/p>\n Estas son s\u00f3lo algunas de las muchas caracter\u00edsticas de W3TC. Puedes leer m\u00e1s sobre todas las caracter\u00edsticas, ajustes y opciones del plugin<\/a> en esta gu\u00eda detallada.<\/p>\n WP Super Cache<\/a> es otro popular plugin para el rendimiento del sitio.<\/p>\n Viene con un buen n\u00famero de caracter\u00edsticas de optimizaci\u00f3n, pero es menos completo que el anterior W3 Total Cache y puede parecer m\u00e1s asequible para usuarios principiantes e intermedios.<\/p>\n B\u00e1sicamente, proporciona caracter\u00edsticas de caching y la compresi\u00f3n HTTP, pero carece de recursos y optimizaci\u00f3n de minificaci\u00f3n JavaScript con atributos Con m\u00e1s de 1,000,000 instalaciones activas, Autoptimize<\/a> es uno de los m\u00e1s populares plugins para minificaci\u00f3n gratis.<\/p>\n Viene con una p\u00e1gina de opciones dividida en varias secciones donde el administrador del sitio puede configurar por separado la minificaci\u00f3n HTML, CSS y JavaScript.<\/p>\n Tambi\u00e9n puede agregar scripts independientes u hojas de estilo y establecer excepciones para recursos espec\u00edficos. Adem\u00e1s, Autoptimize permite cachear recursos minimizados en disco o en la CDN y guardar activos optimizados como archivos est\u00e1ticos. Para encontrar la mejor configuraci\u00f3n para tu sitio de WordPress puedes seguir nuestra detallada gu\u00eda de Autoptimize aqu\u00ed<\/a>.<\/p>\n Otros plugins de optimizaci\u00f3n que puedes probar:<\/p>\n Swift Performance<\/a> 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\u00edficamente para ayudarle a tratar y lograr esas puntuaciones 100\/100 de Google PageSpeed Insights<\/a>.<\/p>\n Algunas de sus caracter\u00edsticas principales incluyen:<\/p>\n Encontrar\u00e1 una visi\u00f3n profunda sobre plugins de optimizaci\u00f3n de WordPress en C\u00f3mo Eliminar los Bloqueadores de Visualizaci\u00f3n JavaScript y CSS<\/a>.<\/p>\n La optimizaci\u00f3n de Ruta De Visualizaci\u00f3n Cr\u00edtica es un proceso de mejora y medici\u00f3n que requiere una clara comprensi\u00f3n de cada tarea que el explorador realiza para convertir c\u00f3digo en p\u00edxeles y para visualizar una p\u00e1gina en la pantalla. Usted puede aprender m\u00e1s acerca de la ruta de visualizaci\u00f3n cr\u00edtica en la gu\u00eda de optimizaci\u00f3n de Google<\/a>.<\/p>\n Aqu\u00ed en el blog de Kinsta intentamos cubrir todos los aspectos de optimizaci\u00f3n. Una lista de lecturas adicionales:<\/p>\n \u00bfCu\u00e1nto tiempo tard\u00f3 en optimizar la ruta de visualizaci\u00f3n cr\u00edtica de sus sitios web? \u00bfQu\u00e9 aspectos del proceso de optimizaci\u00f3n eran los peores? \u00a1D\u00e9jenos saber en los comentarios abajo!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" La ruta de visualizaci\u00f3n cr\u00edtica es la secuencia de tareas que el navegador realiza para primero visualizar una p\u00e1gina en la pantalla, es decir, descargar, procesar …<\/p>\n","protected":false},"author":38,"featured_media":16581,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[435,172],"topic":[1345,1351],"class_list":["post-16591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-rendimiento","tag-wordpress","topic-desarrollo-wordpress","topic-rendimiento-de-wordpress"],"yoast_head":"\n\n
La Secuencia de Ruta de Visualizaci\u00f3n Cr\u00edtica<\/h2>\n
\n
El DOM<\/h3>\n
\n
![\"Estructura](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2018\/05\/ruta-de-visualizaci\u00f3n-cr\u00edtica-2-1.png\")
<\/a>La CSSOM<\/h3>\n
\n
![\"Estructura](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2018\/05\/ruta-de-visualizaci\u00f3n-cr\u00edtica-3.png\")
<\/a>El \u00c1rbol de Visualizaci\u00f3n<\/h3>\n
![\"Estructura](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2018\/05\/ruta-de-visualizaci\u00f3n-cr\u00edtica-4-1.png\")
<\/a>Dise\u00f1o y Pintura<\/h3>\n
Optimizaci\u00f3n de Ruta de Visualizaci\u00f3n Cr\u00edtica<\/h2>\n
\n
\nEl 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\u00e1gina.<\/p>\n![\"El](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2018\/05\/ruta-de-visualizaci\u00f3n-cr\u00edtica-5.png\")
<\/a>
\nVayamos a bucear profundo.<\/p>\nMinimizar Dimensiones de Recursos<\/h2>\n
\n
Optimizar CSS<\/h2>\n
\nCSS puede ser limitado a condiciones particulares, y podemos optimizarlo usando tipos de medios y consultas de medios. Si est\u00e1 viendo una p\u00e1gina web en la pantalla, el navegador enviar\u00e1 una solicitud de tipo de material de impresi\u00f3n pero no bloquear\u00e1 la visualizaci\u00f3n de la p\u00e1gina para este recurso.
\nTome la siguiente etiqueta link<\/code>:<\/p>\n<link rel=\"stylesheet\" href=\"style.css\" \/><\/code><\/pre>\n
\nAfortunadamente, podemos enviar una solicitud para un recurso CSS bajo condiciones espec\u00edficas. Podr\u00edamos cambiar estilos de impresi\u00f3n en un archivo separado y utilizar el atributo media<\/code> para decirle al navegador que la hoja de estilos especificada debe cargarse solamente cuando se imprime la p\u00e1gina, y no es necesario bloquear la visualizaci\u00f3n en la pantalla:<\/p>\n<link rel=\"stylesheet\" href=\"print.css\" media=\"print\" \/><\/code><\/pre>\nlink<\/code>, as\u00ed que podemos dividir el CSS en varios archivos y cargarlos condicionalmente:<\/p>\n<link rel=\"stylesheet\" href=\"style.css\" media=\"screen\" \/>\n<link rel=\"stylesheet\" href=\"portrait.css\" media=\"orientation:portrait\" \/>\n<link rel=\"stylesheet\" href=\"widescreen.css\" media=\"(min-width: 42rem)\" \/><\/code><\/pre>\n\n
Acelere los Procesos de Dise\u00f1o y Pintura<\/h2>\n
\n
![\"Chrome](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2018\/05\/ruta-de-visualizaci\u00f3n-cr\u00edtica-6.png\")
<\/a>Desbloqueo de JavaScript<\/h2>\n
\nEn 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\u00eda ralentizar bastante el tiempo para el primer render de la p\u00e1gina.
\nDicho esto, \u00bfqu\u00e9 podemos hacer para minimizar el tiempo empleado por el navegador para cargar y ejecutar JavaScript?<\/p>\n\n
async<\/code>\u00a0de la etiqueta script<\/code> indica al navegador que ejecute el script asincr\u00f3nicamente, si es posible, sin necesidad de bloquear la construcci\u00f3n de DOM. El navegador env\u00eda la petici\u00f3n HTTP para el script, y contin\u00faa con el an\u00e1lisis del DOM. Adem\u00e1s, el script no bloquea la construcci\u00f3n CSSOM, lo que significa que no bloquear\u00e1 la ruta de visualizaci\u00f3n cr\u00edtica (v\u00e9ase MDN docs<\/a> para obtener m\u00e1s informaci\u00f3n sobre los atributos de la etiqueta script <\/strong>)<\/li>\ndefer<\/code> de la etiqueta script<\/code> indica al navegador para ejecutar el script despu\u00e9s de que el documento ha sido analizado, pero antes de encadenar el evento DOMContentLoaded<\/code>. Este atributo no debe usarse si el atributo src est\u00e1 ausente, es decir, secuencias de comandos en l\u00ednea (leer m\u00e1s sobre Mozilla Hacks<\/a>)<\/li>\nasync<\/code> y defer<\/code> atributos para scripts en l\u00ednea, de modo que la \u00fanica manera para cargarlos despu\u00e9s de que el documento ha sido cargado es moverlos a la parte inferior. La ventaja es que los scripts en l\u00ednea no requieren otras solicitudes HTTP. Sin embargo, los scripts en l\u00ednea usados en varias p\u00e1ginas se traducir\u00eda en c\u00f3digo redundante.<\/li>\n<\/ul>\nResumiendo las Reglas de Optimizaci\u00f3n<\/h2>\n
\n
\n
link<\/code><\/li>\n\n
defer<\/code> en las etiquetas de script<\/li>\nasync<\/code> en las etiquetas script<\/li>\nscript<\/code> al final del documento<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nOptimizar la Ruta de Visualizaci\u00f3n Cr\u00edtica en WordPress<\/h2>\n
W3 Total Cache<\/h3>\n
![\"W3](\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/11\/w3-total-cache-wordpress-plugin.jpg\")
<\/a>\n
async<\/code>\u00a0y\u00a0defer<\/code><\/li>\n![\"Configuraci\u00f3n](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2018\/05\/ruta-de-visualizaci\u00f3n-cr\u00edtica-7.png\")
<\/a>WP Super Cache<\/h3>\n
![\"\"<yoastmark\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/11\/wp-super-cache-wordpress-plugin.png\")
<\/a><\/p>\n![](\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/11\/WP_Super_Cache.png\")
async<\/code> y defer<\/code>. Sin embargo, m\u00e1s de un mill\u00f3n de instalaciones activas demuestran que el plugin vale la pena probar.<\/p>\n![\"\"Opci\u00f3n\"](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2018\/05\/ruta-de-visualizaci\u00f3n-cr\u00edtica-8.png\")
<\/a><\/p>\nAutoptimize<\/h3>\n
![\"Autoptimize](\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/11\/autoptimize-wordpress-plugin.jpg\")
<\/a>![\"Opci\u00f3n](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2018\/05\/ruta-de-visualizaci\u00f3n-cr\u00edtica-9.png\")
<\/a>\n
Swift Performance<\/h3>\n
![\"Swift](\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/11\/swift-performance-wordpress-plugin.png\")
<\/a>\n
Conclusiones<\/h2>\n
\n