En este post, vamos a responder a ambas preguntas para usted. Aqu\u00ed est\u00e1 todo lo que cubriremos en este art\u00edculo:<\/p>\n
- \n
- \u00bfQu\u00e9 son los recursos de bloqueo y por qu\u00e9 son un problema?<\/a><\/li>\n
- \u00bfC\u00f3mo arreglar los recursos de bloqueo de renderizado en general?<\/em><\/a><\/li>\n
- \u00bfC\u00f3mo usar los plugins gratuitos o de pago para arreglar el problema en WordPress?<\/a><\/li>\n<\/ul>\n
\u00bfQu\u00e9 significa \u00abEliminar los recursos que bloquean el renderizado\u00bb?<\/h2>\n
Para entender qu\u00e9 son los recursos de bloqueo de renderizado y por qu\u00e9 perjudican los tiempos de carga de su sitio, necesitamos empezar con una mirada b\u00e1sica a c\u00f3mo un navegador web renderiza una p\u00e1gina web.<\/p>\n
Cuando un visitante aterriza en su sitio, su navegador web b\u00e1sicamente comienza en la parte superior del c\u00f3digo de su sitio<\/a> y lee hacia abajo. De arriba a abajo, \u00bfbien?<\/p>\n
Si en ese proceso, se encuentra con un archivo CSS<\/a> o JavaScript, necesita dejar de<\/strong> \u00ableer\u00bb mientras espera para descargar y procesar ese archivo. El tiempo que pasa \u00aben pausa\u00bb para descargar y analizar esos recursos podr\u00eda dedicarse a algo mucho m\u00e1s productivo, como cargar la parte del contenido de su sitio web que es visible inmediatamente cuando alguien aterriza en la p\u00e1gina.<\/p>\n
Veamos un ejemplo extremo para mostrar por qu\u00e9 esto puede ser un problema.<\/p>\n
Digamos que tiene este genial efecto de JavaScript en el pie de p\u00e1gina de su sitio. Est\u00e1 potenciado por \u00abcoolfooter.js\u00bb, que es un script al que se hace referencia en la parte superior del c\u00f3digo de su sitio (aunque el efecto est\u00e1 en el pie de p\u00e1gina, por lo que los visitantes no lo ver\u00e1n hasta que se desplacen al pie de p\u00e1gina<\/em>).<\/p>\n
As\u00ed que un dise\u00f1o muy aproximado<\/em> para el c\u00f3digo de su sitio podr\u00eda ser algo as\u00ed como:<\/p>\n
- \n
- Meta de cabecera<\/li>\n
- Coolfooter.js<\/li>\n
- HTML para su contenido de arriba. Este es todo el contenido que un visitante ve de inmediato (antes de que empiece a interactuar con la p\u00e1gina<\/em>)<\/li>\n<\/ul>\n
Y aqu\u00ed est\u00e1 la raz\u00f3n por la que esto es un problema:<\/p>\n
Cuando un visitante llega a su sitio, su navegador comienza a leer de arriba a abajo. As\u00ed que antes de que pueda analizar y mostrar el HTML para el contenido de su sitio, necesita esperar para descargar y analizar el archivo coolfooter.js.<\/p>\n
\u00bfResultado final? Se tarda m\u00e1s tiempo en mostrar el HTML para el contenido de arriba, <\/strong>lo que significa que sus visitantes percibir\u00e1n que su sitio es m\u00e1s lento.<\/p>\n
Cuando Google le dice que elimine los recursos de bloqueo de renderizado, est\u00e1 diciendo esencialmente, \u00aboiga, no cargue recursos innecesarios en la parte superior del c\u00f3digo de su sitio porque va a hacer que los navegadores de los visitantes tarden m\u00e1s en descargar la parte visible de su contenido\u00bb.<\/p>\n
Con los consejos de este post, podr\u00e1 esperar a cargar ciertos recursos CSS y JavaScript hasta que la parte visible de su p\u00e1gina ya se haya cargado.<\/p>\n
\u00bfQu\u00e9 son los recursos para bloquear el renderizado?<\/h3>\n
Cuando nos referimos a los recursos de bloqueo de renderizado, normalmente hablamos de:<\/p>\n
- \n
- CSS<\/li>\n
- JavaScript<\/li>\n<\/ul>\n
Es importante entender que no todos los archivos CSS y JavaScript bloquean el renderizado<\/strong>.<\/p>\n
Por ejemplo, es importante cargar su CSS cr\u00edtico cerca de la parte superior, de lo contrario sus visitantes podr\u00edan experimentar lo que se conoce como un flash de contenido sin estilo<\/a> (FOUC).<\/p>\n
\u00bfLas im\u00e1genes son recursos que bloquean el renderizado?<\/h3>\n
No, las im\u00e1genes no bloquean el renderizado<\/strong>. Sigue siendo importante optimizar las im\u00e1genes<\/a> para reducir el tama\u00f1o de los archivos, pero no hay que preocuparse por optimizar la ruta de entrega de las im\u00e1genes.<\/p>\n
\u00bfC\u00f3mo probar si su sitio web tiene recursos para bloquear el renderizado?<\/h2>\n
Para evaluar si su sitio de WordPress dispone actualmente de recursos de bloqueo de renderizado, puede utilizar Google PageSpeed Insights<\/a>.<\/p>\n
Todo lo que tiene que hacer es introducir la URL que quiere probar. Entonces, si tiene un problema con los recursos que bloquean el renderizado, PageSpeed Insights listar\u00e1 cada recurso individual en la secci\u00f3n Eliminar recursos que bloquean el renderizado en Oportunidades<\/strong>:<\/p>\n
![\"El](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mensaje-eliminar-recursos-bloquean-1.jpg\")
<\/a>El mensaje \u00abEliminar los recursos que bloquean la reproducci\u00f3n\u00bb en PageSpeed Insights<\/figcaption><\/figure>\n \u00bfC\u00f3mo se eliminan los recursos que bloquean el renderizado?<\/h2>\n
No se preocupe, no tiene que hacer esto manualmente. Hablaremos de los plugins de WordPress que pueden ayudarle a eliminar los recursos de bloqueo de renderizado en la siguiente secci\u00f3n.<\/p>\n
Sin embargo, es \u00fatil entender lo que estos plugins est\u00e1n haciendo entre bastidores para eliminar los recursos de bloqueo del renderizado.<\/p>\n
\u00bfC\u00f3mo eliminar los recursos de bloqueo del renderizado de JavaScript?<\/h3>\n
Hay unas cuantas estrategias diferentes para eliminar los recursos de bloqueo de renderizado de JavaScript. Cubrimos esto en detalle en nuestro art\u00edculo sobre c\u00f3mo diferir el an\u00e1lisis de JavaScript<\/a>, pero aqu\u00ed est\u00e1n los principales m\u00e9todos:<\/p>\n
- \n
- Async<\/strong> – permite al analizador de HTML (por ejemplo, el navegador de un visitante<\/em>) descargar el JavaScript mientras sigue analizando el resto del HTML. Es decir, no deja completamente de analizar mientras el archivo se descarga. Sin embargo, har\u00e1 una pausa en el analizador de HTML para ejecutar el script una vez que se descargue.<\/li>\n
- Defer <\/strong>– deja que el analizador HTML descargue el JavaScript mientras analiza el resto del HTML y<\/strong> espera a ejecutar el script hasta que el an\u00e1lisis HTML termine.<\/li>\n<\/ul>\n
Esta ilustraci\u00f3n de \u00abCreciendo con la Web\u00bb<\/a> hace un gran trabajo para mostrar la diferencia:<\/p>\n
![\"JavaScript](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/08\/javascript-async-vsdeferir.png\")
JavaScript async vs defer<\/figcaption><\/figure>\n El beneficio de usar el defer<\/strong>\u00a0es que sus guiones est\u00e1n garantizados para ejecutarse en el orden en que aparecen en el c\u00f3digo.<\/p>\n
Async<\/strong> no utiliza este enfoque, lo que a veces puede causar problemas si se aplica a<\/strong> todos los recursos de JavaScript porque a menudo puede romper los recursos que dependen de los recursos que aparecen antes en el documento. El problema m\u00e1s com\u00fan que produce async es la rotura de los recursos de jQuery<\/a> que tratan de cargarse antes de que se haya a\u00f1adido jquery.js al documento.<\/p>\n
\u00bfC\u00f3mo eliminar el bloqueador de renderizado CSS?<\/h3>\n
Eliminar el bloqueo de renderizado CSS puede ser un poco m\u00e1s complicado porque hay que tener cuidado de no retrasar el CSS que se necesita para renderizar el contenido por encima de la p\u00e1gina. El arreglo ideal es:<\/p>\n
- \n
- Identificar los estilos que se requieren para renderizar el contenido por encima de la p\u00e1gina y entregar esos estilos en l\u00ednea con el HTML<\/a>.<\/li>\n
- Utilice el atributo de medios en los elementos de enlace que tiran de los archivos CSS para identificar los recursos CSS que son condicionales, es decir, que s\u00f3lo se necesitan para dispositivos o situaciones espec\u00edficas.<\/li>\n
- Los recursos CSS restantes deben ser cargados asincr\u00f3nicamente, un movimiento que se hace t\u00edpicamente agreg\u00e1ndolos con JavaScript diferido o asincr\u00f3nico. Para ser honesto, nos estamos metiendo en un l\u00edo, \u00bfno? Esto es definitivamente territorio de ingenieros de primera l\u00ednea. Lo cual es genial si es un ingeniero de primera l\u00ednea, pero la mayor\u00eda de nosotros no lo somos. La buena noticia es que se trata de un art\u00edculo sobre WordPress, y puede eliminar o al menos reducir significativamente el n\u00famero de recursos de JS y CSS que bloquean el renderizado y que afectan a su sitio con el(los) plugin(s) adecuado(s).<\/li>\n<\/ul>\n
Otra forma r\u00e1pida y sencilla de mejorar la optimizaci\u00f3n general es minificar el c\u00f3digo. Kinsta ha incorporado una funci\u00f3n de minificaci\u00f3n de c\u00f3digo<\/a> en el panel de control de MyKinsta<\/a>, lo que permite a los clientes activar la minificaci\u00f3n autom\u00e1tica de CSS y JavaScript con un simple clic.<\/p>\n
Si no puedes localizar la funci\u00f3n en tu panel de control, simplemente consulta nuestro v\u00eddeo C\u00f3mo Activar la Minificaci\u00f3n en MyKinsta<\/a>.<\/p>\n
\u00bfC\u00f3mo eliminar los recursos CSS y JavaScript que bloquean el renderizado con los plugins de WordPress?<\/h2>\n
Para demostrar c\u00f3mo eliminar los recursos que bloquean el renderizado en WordPress, hemos creado un sencillo sitio de prueba que incluye CSS y JavaScript que bloquean el renderizado y luego le explicaremos c\u00f3mo utilizar dos soluciones de plugin diferentes para eliminar el CSS y el JavaScript que bloquean el renderizado:<\/p>\n
- \n
- Autoptimize + Async JavaScript (gratis)<\/li>\n
- WP Rocket (pagado)<\/li>\n<\/ul>\n
Como referencia, aqu\u00ed est\u00e1 el aspecto de nuestro sitio de prueba antes de optimizar la entrega de CSS<\/a> y JavaScript:<\/p>\n
![\"El](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mensaje-eliminar-recursos-bloquean.jpg\")
<\/a>El mensaje \u00abEliminar los recursos que bloquean la reproducci\u00f3n\u00bb en PageSpeed Insights<\/figcaption><\/figure>\n Si est\u00e1 probando la efectividad de sus cambios con Google PageSpeed Insights, tenga en cuenta que Google almacena sus resultados en cach\u00e9 durante varios minutos. Esencialmente, esto significa que si r\u00e1pidamente…<\/p>\n
- \n
- Pruebe su sitio no optimizado<\/li>\n
- Activar uno de los plugins de esta secci\u00f3n<\/li>\n
- Vuelva a probar su sitio<\/li>\n<\/ol>\n
…entonces seguir\u00e1 viendo los resultados de su sitio no optimizado hasta que Google restablezca su cach\u00e9. As\u00ed que aseg\u00farese de esperar unos minutos para que Google limpie su cach\u00e9 antes de que piense que el plugin no funciona.<\/p>\n
\u00bfC\u00f3mo eliminar los recursos de bloqueo de renderizado con el plugin JavaScript de Autoptimize + Async?<\/h3>\n
Autoptimize<\/a> y Async JavaScript<\/a> son dos plugins independientes y gratuitos del mismo desarrollador. Juntos, le ayudan a optimizar la entrega de su CSS y JavaScript.<\/p>\n
Una vez que haya instalado ambos plugins<\/a>, ve a Settings \u2192 Async JavaScript <\/strong>y:<\/p>\n
- \n
- Marque la casilla para activar el JavaScript Async<\/strong> en la parte superior.<\/li>\n
- Elija entre Aplicar sincronizaci\u00f3n<\/strong> y Aplicar defer<\/strong>\u00a0en el cuadro de configuraci\u00f3n r\u00e1pida<\/strong>.<\/li>\n<\/ul>\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/como-configurar-plugin-javascript-async.jpg\")
\u00bfC\u00f3mo configurar el plugin de JavaScript Async?<\/figcaption><\/figure>\n Si la opci\u00f3n Async<\/strong> causa problemas en su sitio, le recomendamos que pruebe Defer<\/strong> o que excluya jQuery<\/strong>, para lo cual el plugin le da una opci\u00f3n.<\/p>\n
Una vez que haya configurado el plugin de JavaScript Async, vaya a Settings \u2192 Autoptimize <\/strong>y:<\/p>\n
- \n
- Marque la casilla para optimizar el c\u00f3digo JavaScript<\/strong><\/li>\n
- Marque la casilla para optimizar el c\u00f3digo CSS<\/strong><\/li>\n<\/ul>\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/como-configurar-plugin-autoptimizacion.jpg\")
\u00bfC\u00f3mo configurar el plugin de Autoptimize?<\/figcaption><\/figure>\n Si es un usuario avanzado, puede jugar con los ajustes adicionales de optimizaci\u00f3n de JavaScript y CSS, pero la mayor\u00eda de los sitios estar\u00e1n bien con los valores predeterminados.<\/p>\n
Despu\u00e9s de configurar tanto Autoptimize<\/a> como Async JavaScript, nuestro sitio de prueba pas\u00f3 la auditor\u00eda de PageSpeed Insights \u00abEliminar recursos de bloqueo de renderizado\u00bb:<\/p>\n
![\"Resultados](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/resultados-pagespeed-insights-autoptimize-asyncjs.jpg\")
Resultados de PageSpeed Insights con Autoptimize y Async JavaScript<\/figcaption><\/figure>\n Si quisiera eliminar a\u00fan m\u00e1s de esos archivos, podr\u00eda usar Autoptimize para alinear manualmente su cr\u00edtico CSS<\/a>. Sin embargo, esto requiere algunos conocimientos de desarrollo, por lo que no es algo que los no desarrolladores deban intentar.<\/p>\n
Tambi\u00e9n puede usar los plugins por separado si lo prefiere. Pero dado que ambos plugins provienen del mismo desarrollador y est\u00e1n construidos para jugar bien entre ellos, el mejor enfoque para la mayor\u00eda de los sitios es combinarlos.<\/p>\n
\u00bfC\u00f3mo eliminar los recursos de bloqueo de renderizado con el WP Rocket?<\/h3>\n
WP Rocket<\/a> es un popular plugin de rendimiento y cacheo de WordPress.<\/p>\n
Normalmente, no permitimos los plugins de cacheo<\/a> en los sitios de WordPress alojados en Kinsta porque ya manejamos el<\/a> cacheo a nivel de servidor a trav\u00e9s del r\u00e1pido cacheo Nginx FastCGI.<\/p>\n
- Marque la casilla para optimizar el c\u00f3digo CSS<\/strong><\/li>\n<\/ul>\n
- Elija entre Aplicar sincronizaci\u00f3n<\/strong> y Aplicar defer<\/strong>\u00a0en el cuadro de configuraci\u00f3n r\u00e1pida<\/strong>.<\/li>\n<\/ul>\n
- Marque la casilla para activar el JavaScript Async<\/strong> en la parte superior.<\/li>\n
- Defer <\/strong>– deja que el analizador HTML descargue el JavaScript mientras analiza el resto del HTML y<\/strong> espera a ejecutar el script hasta que el an\u00e1lisis HTML termine.<\/li>\n<\/ul>\n
- Async<\/strong> – permite al analizador de HTML (por ejemplo, el navegador de un visitante<\/em>) descargar el JavaScript mientras sigue analizando el resto del HTML. Es decir, no deja completamente de analizar mientras el archivo se descarga. Sin embargo, har\u00e1 una pausa en el analizador de HTML para ejecutar el script una vez que se descargue.<\/li>\n
- \u00bfC\u00f3mo arreglar los recursos de bloqueo de renderizado en general?<\/em><\/a><\/li>\n
![\"\u00bfC\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/wp-rocket-backend.png\")
![\"Resultados](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/resultados-pagespeed-insights-wprocket-es.jpg\")