Cómo corregir el bloqueo de Render-Blocking JavaScript y CSS en WordPress

¿Quieres eliminar el bloqueo de render de JavaScript y CSS en WordPress? Si prueba su sitio web en Google PageSpeed insight, entonces probablemente verá una sugerencia para eliminar los scrips de bloqueo de render y CSS. En este artículo, te mostraremos cómo arreglar fácilmente el bloqueo de renderizado de JavaScript y CSS en WordPress para mejorar tu puntuación de Google PageSpeed.

¿Qué es Render-Blocking JavaScript y CSS?

Cada sitio de WordPress tiene un tema y plugins que añaden 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 el renderizado de la página.

El navegador de un usuario tendrá que cargar esos scripts y CSS antes de cargar el resto del HTML en la página. Esto significa que los usuarios en 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 JavaScript y CSS de bloqueo de render.

Los propietarios de sitios web que estén intentando conseguir la puntuación de Google PageSpeed de 100 necesitarán arreglar este problema para conseguir esa puntuación perfecta.

¿Qué es el PageSpeed Score de Google?

Google PageSpeed Insights es una herramienta online creada por Google para ayudar a los propietarios de sitios web a optimizar y probar sus sitios web. Esta herramienta comprueba su sitio web en función de las directrices de velocidad de Google y ofrece sugerencias para mejorar el tiempo de carga de la página de su sitio.

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

¿Realmente necesitas la puntuación perfecta de “100” en Google PageSpeed?

El propósito de Google PageSpeed es proporcionarle directrices para mejorar la velocidad y el rendimiento de su sitio web. Usted no está obligado a seguir estas reglas estrictamente.

Recuerde que la velocidad es sólo una de las muchas métricas de SEO que ayudan a Google a determinar cómo clasificar su sitio web. La razón por la que la velocidad es tan importante es porque mejora la experiencia del usuario en su sitio.

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

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

Recientemente hemos rediseñado TopManuales, y hemos mantenido nuestro enfoque en la velocidad y en mejorar la experiencia del usuario.

Te recomendamos que utilices las reglas de Google Pagespeed como sugerencias, y si puedes 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 se preocupe por el resto.

Dicho esto, echemos un vistazo a lo que puedes hacer para arreglar el bloqueo de renderizado de JavaScript y CSS en WordPress.

Cubriremos dos métodos que arreglarán el bloqueo del renderizado de JavaScript y CSS en WordPress. Usted puede elegir el que mejor se adapte a su sitio web.

1. Corrección de los scripts de bloqueo de render y CSS con Autoptimize

Este método es más simple y recomendado para la mayoría de los usuarios.

Lo primero que debe hacer es instalar y activar el plugin Autoptimize. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debe visitar la página Configuración ” Autoptimizar para configurar la configuración del plugin.

Puede comenzar marcando la casilla junto a Opciones de JavaScript y Opciones de CSS y, a continuación, haga clic en el botón Guardar cambios.

Ahora puede probar su sitio web utilizando la herramienta PageSpeed. Si todavía hay scripts de bloqueo de renderizado, entonces necesitas volver a la página de configuración del plugin y hacer clic en el botón’Mostrar configuración avanzada’ en la parte superior.

Aquí puede permitir que el plugin incluya JS en línea y eliminar los scripts que están excluidos por defecto como seal.js o jquery.js.

A continuación, desplácese hacia abajo hasta la opción CSS y permita que el plugin agregue CSS en línea.

Haga 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, siga adelante y revise su sitio web de nuevo con la herramienta PageSpeed.

Asegúrese de que usted prueba a fondo su sitio web para ver que nada se rompe al optimizar sus JavaScripts o CSS.

¿Cómo funciona el sistema?

Autoptimizar agregados todos los JavaScript y CSS en cola. Después de eso, crea archivos CSS y JavaScripts minificados y sirve copias en caché a su sitio web como sincronización o diferido.

Esto le permite corregir el problema de bloqueo de scripts y estilos de renderizado. Sin embargo, tenga en cuenta que también puede afectar el rendimiento o la apariencia de su sitio web.

2. Arreglo Render Blocking JavaScript usando W3 Total Cache

Este método requiere un poco más de trabajo y se recomienda para los usuarios que ya utilizan el plugin W3 Total Cache en su sitio web.

Primero necesitarás instalar y activar el plugin W3 Total Cache. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar y configurar W3 Total Cache for Beginners.

A continuación, debe visitar la página Performance ” General Settings (Configuración general) y desplazarse hacia abajo hasta la sección Minify (Minimizar).

Primero debe marcar la opción “Activar” junto a “Minify” y luego seleccionar “Manual” para la opción de modo minify.

Haga clic en el botón Guardar todos los ajustes para guardarlos.

A continuación, debe agregar los scripts y CSS que desea minimizar.

Puede obtener las URL de todos los guiones y hojas de estilo que bloquean el renderizado desde la herramienta Google PageSpeed Insights.

En las sugerencias, donde dice: `Eliminar el bloqueo de render de JavaScript y CSS en el contenido de arriba’, haga clic en `Mostrar cómo corregir’. Le mostrará la lista de scripts y hojas de estilo.

Lleve el ratón a un script y le mostrará la URL completa. Puede seleccionar esta URL y luego usar las teclas CTRL+C (Comando+C en Mac) de su teclado para copiar la URL.

Ahora dirígete a tu área de administración de WordPress y ve a Performance ” Minify page.

Primero necesitas añadir los archivos JavaScript que quieras que se minifiquen. Desplácese hacia abajo hasta la sección JS y, a continuación, en la sección `Operaciones en las áreas’ defina el tipo de incrustación en “Sync sin bloqueo” para la sección .

A continuación, debes hacer clic en el botón “Añadir guión” y, a continuación, empezar a añadir las URL de guión que hayas copiado de la herramienta Google PageSpeed.

Una vez que haya terminado, desplácese hacia abajo a la sección CSS y haga clic en el botón’Agregar una hoja de estilo’. Ahora empieza a añadir las URL de las hojas de estilo que has copiado de la herramienta Google PageSpeed.

Ahora haga clic en el botón’Guardar configuración y purgar caché’ para guardar su configuración.

Visite la herramienta PageSpeed de Google y vuelva a probar su sitio web.

Asegúrese de que usted también prueba su sitio web a fondo para ver que todo está funcionando bien.

Solución de problemas

Dependiendo de cómo los plugins y tus temas de WordPress usen JavaScript y CSS, podría ser un reto arreglar completamente todos los problemas de bloqueo de render de JavaScript y CSS.

Aunque las herramientas anteriores pueden ayudar, es posible que sus plugins necesiten ciertos scripts con un nivel de prioridad diferente para funcionar correctamente. En ese caso, las soluciones anteriores pueden romper sus plugins o pueden comportarse de forma inesperada.

Google todavía puede mostrar ciertos problemas como la optimización de la entrega de CSS por encima del contenido del pliegue. Autoptimizar le permite corregirlo añadiendo manualmente el CSS en línea necesario para mostrar el área de plegado anterior del tema.

Sin embargo, podría ser bastante difícil averiguar qué código CSS necesitará mostrar sobre el contenido del pliegue.

Eso es todo, esperamos que este artículo te haya ayudado a aprender a arreglar el bloqueo de renderizado de JavaScript y CSS en WordPress. También puede que quieras ver nuestra guía definitiva para aumentar la velocidad y el rendimiento de WordPress para principiantes.

Valora el post

Deja un comentario