How to fix render blocking JavaScript and CSS in WordPress

Cómo arreglar la representación de bloqueo de JavaScript y CSS en WordPress

¿Quieres eliminar el bloqueo de renderizado de JavaScript y CSS en WordPress? Si prueba su sitio web en la información de Google PageSpeed, es probable que vea una sugerencia para eliminar los scripts de bloqueo de renderizado y CSS. Sin embargo, no proporciona ningún detalle sobre cómo hacer esto en su sitio de WordPress. En este artículo, le mostraremos cómo solucionar fácilmente los problemas de JavaScript y CSS que bloquean la representación en WordPress para mejorar su puntaje de PageSpeed ​​de Google.

Cómo arreglar el bloqueo de renderizado de JavaScript y CSS en WordPress

¿Qué están bloqueando el renderizado JavaScript y CSS?

Contents

Los archivos JavaScript y CSS que bloquean el procesamiento son archivos que impiden que un sitio web muestre una página web antes de cargar estos archivos. Cada sitio de WordPress tiene un tema y complementos que agregan archivos JavaScript y CSS al front-end de su sitio web. Estos scripts pueden aumentar el tiempo de carga de la página de su sitio y también pueden bloquear la representación de la página.
Problema de bloqueo de procesamiento resaltado en Google Pagespeed Insights
El navegador de un usuario deberá cargar estos scripts y CSS antes de cargar el resto del HTML en la página. Esto significa que los usuarios con una conexión más lenta tendrán que esperar unos milisegundos más para ver la página. Estos scripts y hojas de estilo se denominan renderizado que bloquea JavaScript y CSS. Los propietarios de sitios web que intenten lograr una puntuación de Google PageSpeed ​​de 100 deberán solucionar este problema para lograr la puntuación perfecta.

¿Qué es la puntuación de PageSpeed ​​de Google?

Google PageSpeed ​​Insights es una herramienta de prueba de velocidad de sitios web creada por Google para ayudar a los propietarios de sitios web a optimizar y probar sus sitios web. Esta herramienta prueba su sitio web según las pautas de velocidad de Google y ofrece sugerencias para mejorar los tiempos de carga de la página de su sitio. Le muestra una puntuación basada en la cantidad de reglas que aprueba su sitio. La mayoría de los sitios web tienen entre 50 y 70. Sin embargo, algunos propietarios de sitios web se sienten presionados a llegar a 100 (la puntuación más alta que puede obtener una página).
¿Realmente necesitas la puntuación perfecta de Google PageSpeed ​​»100″?
El objetivo de las estadísticas de Google PageSpeed ​​es brindarle pautas para mejorar la velocidad y el rendimiento de su sitio web. No tiene que seguir estrictamente estas reglas. Recuerde, la velocidad es solo una de las muchas métricas de SEO de sitios web que ayudan a Google a determinar cómo clasificar su sitio. La razón por la que la velocidad es tan importante es que mejora la experiencia del usuario en su sitio. Una mejor experiencia de usuario requiere más que velocidad. También debe generar información útil, una mejor interfaz de usuario y contenido atractivo con texto, imágenes y videos. Su objetivo debe ser crear un sitio web rápido con una excelente experiencia de usuario. Durante el último rediseño de MundoCMS, nos enfocamos en la velocidad y en mejorar la experiencia del usuario. Le recomendamos que use las reglas de Google Pagespeed como sugerencia, y si puede implementarlas fácilmente sin arruinar la experiencia del usuario, entonces eso es genial. De lo contrario, debe esforzarse por hacer todo lo que pueda y luego no preocuparse por el resto. Dicho esto, echemos un vistazo a lo que puede hacer para corregir la representación de bloqueo de JavaScript y CSS en WordPress. Vamos a cubrir dos métodos que arreglarán la representación de bloqueo de JavaScript y CSS en WordPress. Puedes elegir el que mejor se adapte a tu sitio web.

1. Se corrigieron los scripts de bloqueo de renderizado y CSS con WP Rocket

Para este método, usaremos el complemento WP Rocket. Es el mejor complemento de almacenamiento en caché de WordPress del mercado y le permite mejorar rápidamente el rendimiento de su sitio web sin ninguna habilidad técnica o configuración complicada. En primer lugar, debe instalar y activar el complemento WP Rocket. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. WP Rocket funciona desde el primer momento y permitirá el almacenamiento en caché con una configuración óptima para su sitio web. Puede leer más sobre esto en nuestra guía completa sobre cómo instalar y configurar correctamente WP Rocket en WordPress. De forma predeterminada, no habilita las opciones de optimización de JavaScript y CSS. Estas optimizaciones pueden afectar potencialmente el aspecto de su sitio web o ciertas características, por lo que el complemento le permite habilitar estas configuraciones como una opción. Para hacer esto, debes visitar Configuración »WP Rocket luego vaya a la pestaña «Optimización de archivos». Desde allí, desplácese hacia abajo hasta la sección Archivos CSS y marque las casillas junto a las opciones Minimizar CSS, Combinar archivos CSS y Optimizar la entrega de CSS.
Configuración de optimización CSS en WP Rocket
Notar: WP Rocket intentará minimizar todos sus archivos CSS, combinarlos y cargar solo el CSS necesario para la parte visible de su sitio web. Podría afectar el aspecto de su sitio web, por lo que debe probarlo a fondo en varios dispositivos y tamaños de pantalla. A continuación, debe desplazarse hacia abajo hasta la sección Archivos JavaScript. Desde aquí puede consultar todas las opciones para mejorar al máximo el rendimiento.
Optimización de JavaScript
Puede contraer y combinar archivos JavaScript como lo hizo con CSS. También puede evitar que WordPress cargue el archivo jQuery Migrate. Este es un script que WordPress carga para garantizar la compatibilidad de complementos y temas que utilizan versiones anteriores de jQuery. La mayoría de los sitios web no necesitan este archivo, pero aun así querrá revisar su sitio web para asegurarse de que eliminarlo no afecte su tema o complementos. Luego, desplácese hacia abajo un poco más y marque las casillas junto a las opciones ‘Cargar JavaScript perezoso’ y ‘Modo seguro para jQuery’.
Optimizar la entrega de JavaScript
Estas opciones retrasan la carga de JavaScripts no esenciales, y el modo seguro de jQuery le permite cargar jQuery para temas que pueden usarlo en línea. Puede dejar esta opción sin marcar si está seguro de que su tema no usa jQuery en línea en ninguna parte. No olvide hacer clic en el botón Guardar cambios para guardar su configuración. Después de eso, es posible que también desee borrar el caché en WP Rocket antes de probar su sitio web nuevamente con Google Page Speed ​​Insights. En nuestro sitio de prueba, pudimos lograr una puntuación de escritorio del 100%, y el problema de procesamiento atascado se resolvió en las puntuaciones de dispositivos móviles y de escritorio.
Se solucionó un problema por el cual la renderización se atascaba para obtener una puntuación de velocidad de página perfecta

2. Se corrigieron los scripts de bloqueo de renderizado y CSS con Autoptimize

Para este método, utilizaremos un complemento separado diseñado específicamente para mejorar la entrega de los archivos CSS y JS de su sitio web. Si bien este complemento hace su trabajo, carece de las otras características poderosas de WP Rocket. Lo primero que debe hacer es instalar y activar el complemento Autoptimize. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Durante la activación, debe visitar el Configuración »Optimización automática página para configurar los ajustes del complemento. En primer lugar, debe marcar la casilla junto a la opción «Optimizar código JavaScript» en el bloque Opciones de JavaScript. Asegúrese de que la opción «Agregar archivos JS» no esté marcada.
Optimizar archivos JS en Autoptimize
A continuación, desplácese hacia abajo hasta el cuadro Opciones de CSS y marque la opción ‘Optimizar código CSS’. Asegúrese de que la opción «Agregar archivos CSS» no esté marcada.
Optimizar CSS en Autoptimize
Ahora puede hacer clic en el botón «Guardar cambios y borrar caché» para guardar su configuración. Continúe y pruebe su sitio web con la herramienta Page Speed ​​Insights. En nuestro sitio de demostración, pudimos solucionar el problema de procesamiento atascado con estas configuraciones básicas.
Problema de renderizado solucionado en WordPress con el complemento Autoptimize
Si todavía hay scripts de bloqueo de renderización allí, debe volver a la página de configuración del complemento y revisar las opciones en las opciones de JavaScript y CSS. Por ejemplo, puede permitir que el complemento incluya JS en línea y elimine los scripts que están excluidos de forma predeterminada, como seal.js o jquery.js. Haga clic en el botón «Guardar cambios y borrar caché» para guardar los cambios y borrar la caché del complemento. Una vez que haya terminado, continúe y revise su sitio web nuevamente con la herramienta Page Speed.
¿Como funciona?
Autoptimize reúne todos los JavaScript y CSS en cola. Después de eso, crea archivos CSS y JavaScripts minificados y sirve copias en caché en su sitio web como asincrónicas o perezosas. Esto le permite solucionar el problema de los scripts y estilos que se atascan en el renderizado. Sin embargo, tenga en cuenta que también puede afectar el rendimiento o la apariencia de su sitio web.

Solución de problemas

Dependiendo de cómo los complementos y su tema de WordPress usen JavaScript y CSS, puede ser bastante difícil resolver por completo todos los problemas de bloqueo de renderización mediante JavaScript y CSS. Si bien las herramientas anteriores pueden ayudarlo, sus complementos pueden necesitar ciertos scripts en un nivel de prioridad diferente para funcionar correctamente. En este caso, las soluciones anteriores pueden interrumpir la funcionalidad de estos complementos o comportarse de forma inesperada. Google aún puede mostrarle algunos problemas, como la optimización de la entrega de CSS para el contenido en la mitad superior de la página. WP Rocket le permite resolver este problema agregando manualmente el CSS crítico requerido para mostrar el área de pliegue anterior de su tema. Sin embargo, puede ser bastante difícil saber qué código CSS necesitará mostrar sobre el contenido del pliegue. Esperamos que este artículo le haya ayudado a aprender cómo solucionar problemas de renderización de bloqueo de JavaScript y CSS en WordPress. También puede consultar nuestra guía definitiva sobre cómo acelerar el rendimiento de WordPress para principiantes y nuestra comparación de las empresas de alojamiento de WordPress mejor administradas. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply