Cómo corregir el bloqueo de procesamiento de JavaScript y CSS en WordPress

¿Intenta eliminar los bloqueos de procesado de JavaScript y CSS en WordPress?

Si pruebas tu sitio web en Google PageSpeed insights, es probable que veas una sugerencia para eliminar las secuencias de comandos y CSS que bloquean el procesamiento. Sin embargo, no proporciona ningún detalle sobre cómo hacerlo en su sitio de WordPress.

En este artículo, le mostraremos cómo corregir fácilmente JavaScript y CSS que bloquean el procesamiento en WordPress para mejorar su puntuación de Google PageSpeed.

¿Qué es el JavaScript y CSS con bloqueo de procesamiento / mostrar?

Los archivos JavaScript y CSS que bloquean la renderización impiden que un sitio web muestre una página antes de cargar estos archivos.

Cada sitio web WordPress tiene un tema y plugins que añaden archivos JavaScript y CSS a la parte frontal de su sitio web.

Estos scripts pueden aumentar el tiempo de carga de la página de su sitio, y también pueden bloquear el procesado / mostrado de la página.

El navegador / explorador del usuario tendrá que cargar esos scripts y CSS antes de cargar el resto del HTML de la página. Esto significa que los usuarios con una conexión lenta tendrán que esperar unos milisegundos más para ver la página.

Estas secuencias de comandos y hojas de estilos se denominan JavaScript y CSS de bloqueo de procesamiento.

Los propietarios desitios web en WordPress que intenten alcanzar una puntuación de Google PageSpeed de 100 deberán corregir este problema para conseguir esa puntuación perfecta.

¿Qué es Google PageSpeed Score?

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 comprueba la velocidad de su sitio web según las directrices de Google y ofrece sugerencias para mejorar el tiempo de carga de la página.

Le muestra una puntuación basada en el número de auditorías que supera su sitio. La mayoría de los sitios web obtienen entre 50 y 70 puntos. Sin embargo, algunos propietarios de sitios web se sienten obligados a alcanzar el 100 (la máxima puntuación que puede obtener una página).

¿Necesita realmente la puntuación perfecta “100” de Google PageSpeed?

El objetivo de Google PageSpeed insights es proporcionarle directrices para mejorar la velocidad y el rendimiento de su sitio web. No es obligatorio / requerido / necesario seguir estas normas estrictamente.

Recuerde que la velocidad es solo una de las muchas métricas de optimización de motores de búsqueda (SEO) de sitios web que ayudan a Google a determinar cómo clasificar su sitio. La velocidad es tan importante porque mejora la experiencia del usuario en su sitio.

Una mejor experiencia de usuario requiere mucho más que velocidad. También hay que ofrecer información útil, una mejor interfaz de usuario y contenidos atractivos con texto, imágenes y vídeos.

Su objetivo debe ser crear un sitio web rápido que ofrezca una gran experiencia al usuario.

Le recomendamos que utilice las reglas de Google PageSpeed como sugerencias. Si puedes implementarlas fácilmente sin arruinar la experiencia del usuario, entonces estupendo. De lo contrario, deberías intentar hacer todo lo que puedas y luego no preocuparte por el resto.

Dicho esto, echemos un vistazo a lo que puede hacer para corregir el bloqueo de procesado de JavaScript y CSS en WordPress.

Cubriremos dos métodos que eliminarán los recursos que bloquean el procesamiento en WordPress. Puede elegir el que mejor se adapte a su sitio web:

Método 1: Corrección de secuencias de comandos de bloqueo de renderizado y CSS con WP Rocket

Para este método, vamos a utilizar el plugin WP Rocket. Es el mejor plugin de caché y optimización de WordPress del mercado que te permite mejorar rápidamente el rendimiento de tu sitio web sin necesidad de conocimientos técnicos ni una configuración complicada.

Primero, necesitas instalar y activar el plugin WP Rocket. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

WP Rocket funciona de forma inmediata, y activará el almacenamiento en caché con ajustes óptimos para tu sitio web. Puedes aprender más acerca de ello en nuestra guía completa sobre cómo instalar y establecer correctamente WP Rocket en WordPress.

Por defecto, no activa las opciones de optimización de JavaScript y CSS. Estas optimizaciones pueden afectar a la apariencia de su sitio web o a algunas de sus características, por lo que el plugin le permite activar estos ajustes de forma opcional.

Para ello, debe visitar la página Ajustes ” WP Rocket y luego cambiar a la pestaña ‘Optimización de archivos’.

Desde aquí, desplácese hasta la sección Archivos CSS y marque las casillas situadas junto a “Minimizar CSS”, “Combinar archivos CSS” y “Optimizar la entrega de CSS”.

Para el ajuste ‘Optimizar la entrega de CSS’, WP Rocket recomienda elegir el método‘Eliminar CSS no utilizado‘.

Además de ofrecer el mejor rendimiento, puede ayudar a reducir el tamaño de la página y las peticiones HTTP.

A continuación, debe desplazarse hasta la sección Archivos JavaScript. Desde aquí, puede marcar / comprobar todas las opciones para mejorar al máximo el rendimiento.

Puedes minimizar y combinar archivos JavaScript como hiciste con CSS.

También puede evitar que WordPress cargue el archivo jQuery Migrate. Se trata de un script que WordPress carga para proporcionar compatibilidad a los plugins y temas que utilizan versiones antiguas de jQuery.

La mayoría de los sitios web no necesitan este archivo, pero aún así querrá comprobar su sitio web para asegurarse de que quitarlo no afecta a su tema o plugins.

A continuación, desplácese un poco más hacia abajo y marque las casillas situadas junto a las opciones “Cargar JavaScript diferido” y “Modo seguro para jQuery”.

Estas opciones retrasan la carga de JavaScripts no esenciales, y el modo seguro de jQuery le permite cargar jQuery para temas que puedan utilizarlo integrado. Puede dejar esta opción sin marcar si está seguro de que su tema no utiliza jQuery integrado en ninguna parte.

No olvides hacer clic en el botón “Guardar cambios” para establecer los ajustes.

Después de eso, es posible que también desee vaciar la caché en WP Rocket antes de probar su sitio web de nuevo con Google PageSpeed Insights.

En nuestro sitio de prueba, pudimos obtener una puntuación del 100% en los dispositivos de sobremesa, y el problema de bloqueo de procesado se resolvió tanto en las puntuaciones de móviles como en las de sobremesa.

Método 2: Corregir el bloqueo de procesado de scripts y CSS con Autoptimize

Para este método, vamos a utilizar un plugin hecho específicamente para mejorar la entrega de los archivos CSS y JS de su sitio web. Mientras que este plugin hace el trabajo, no tiene las otras características potentes que WP Rocket tiene.

Lo primero que tienes que hacer es instalar y activar Autoptimize, un plugin gratuito para acelerar el rendimiento del sitio web. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, debe visitar la página Ajustes ” Autoptimizar para configurar los ajustes del plugin.

En primer lugar, debe marcar / comprobar la casilla situada junto a “Optimizar código JavaScript” en el bloque Opciones de JavaScript. Asegúrese de que la opción “Agregar archivos JS” no está marcada.

A continuación, desplácese 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.

Ahora puedes hacer clic en el botón “Guardar cambios y vaciar caché” para establecer tus ajustes.

Pruebe su sitio web con la herramienta PageSpeed Insights. En nuestro sitio de demostración, hemos podido corregir el problema de bloqueo de procesamiento con estos ajustes básicos.

Si todavía hay scripts que bloquean la visualización, puedes volver a la página de configuración del plugin y revisar los ajustes en las opciones JavaScript y CSS.

Por ejemplo, puede permitir que el plugin incluya JS integrado y quitar scripts excluidos por defecto, como seal.js o jquery.js. A continuación, basta con hacer clic en el botón “Guardar cambios y vaciar caché” para guardar los cambios y vaciar la caché del plugin.

Una vez que haya terminado, vuelva a marcar / comprobar su sitio web con la herramienta PageSpeed Insights.

¿Cómo funciona Autoptimize?

Autoptimize agrega todo el JavaScript y CSS en cola. Después, crea archivos CSS y JavaScript minimizados y sirve copias en caché a su sitio web de forma asíncrona o diferida.

Esto permite corregir el problema de los scripts y estilos que bloquean el procesado. Sin embargo, ten en cuenta que también puede afectar al rendimiento o al aspecto de tu sitio web.

Qué hacer si JavaScript y CSS siguen bloqueando la renderización

Dependiendo de cómo los plugins y tu tema de WordPress utilicen JavaScript y CSS, puede ser difícil corregir completamente todos los problemas de JavaScript y CSS que bloquean el procesado.

Aunque las herramientas anteriores pueden ayudar, es posible que tus plugins necesiten ciertos scripts en un nivel de prioridad diferente para funcionar correctamente. En ese caso, las soluciones anteriores pueden romper la funcionalidad de dichos plugins, o podrían comportarse de forma inesperada.

En lugar de tratar de eliminar por completo los problemas de bloqueo de renderizado, recomendamos adoptar enfoques alternativos para acelerar su sitio web. Por ejemplo, puedes utilizar un servicio CDN para servir tus archivos JavaScript y CSS estáticos y reducir el tiempo de carga.

Puede leer nuestra guía definitiva para aumentar la velocidad y el rendimiento de WordPress para obtener más información.

Esperamos que este artículo te haya ayudado a aprender cómo corregir JavaScript y CSS que bloquean la renderización en WordPress. Puede que también quieras ver nuestro artículo sobre cómo WPBeginner aumenta la velocidad de carga de las páginas con 6 consejos y nuestra comparativa de las mejores empresas de hosting gestionado para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.