Cómo arreglar JavaScript y CSS de bloqueo de procesamiento en WordPress

¿Quieres eliminar JavaScript y CSS que bloquean el renderizado 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. En este artículo, le mostraremos cómo solucionar fácilmente el bloqueo de renderizado JavaScript y CSS en WordPress para mejorar su puntaje de Google PageSpeed.


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

Qué es JavaScript y CSS de bloqueo de procesamiento?

Cada sitio de WordPress tiene un tema y complementos que agregan archivos JavaScript y CSS al front-end de su sitio web. Estas secuencias de comandos 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.

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 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 JavaScript y CSS de bloqueo de procesamiento.

Los propietarios de sitios web que intentan alcanzar el puntaje de Google PageSpeed ​​de 100 deberán corregir este problema para lograr ese puntaje perfecto.

¿Qué es el puntaje de Google PageSpeed??

Google PageSpeed ​​Insights es una herramienta en línea creada por Google para ayudar a los propietarios de sitios web a optimizar y probar sus sitios web. Esta herramienta prueba su sitio web con las pautas 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 la cantidad de reglas que pasa su sitio. La mayoría de los sitios web llegan entre 50 y 70. Sin embargo, algunos propietarios de sitios web se sienten obligados a alcanzar 100 (el puntaje más alto que puede obtener una página).

¿Realmente necesita el puntaje perfecto de “100” Google PageSpeed?

El objetivo de las estadísticas de Google PageSpeed ​​es proporcionarle pautas para mejorar la velocidad y el rendimiento de su sitio web. No está obligado a seguir estas reglas estrictamente.

Recuerde que la velocidad es solo 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 solo velocidad. También debe ofrecer 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 que ofrezca una excelente experiencia de usuario.

Recientemente rediseñamos WPBeginner, y nos centramos en la velocidad y en mejorar la experiencia del usuario..

Le recomendamos que use las reglas de Google Pagespeed como sugerencias, 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 se preocupe por el resto.

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

Cubriremos dos métodos que solucionarán el bloqueo de renderizado JavaScript y CSS en WordPress. Puedes elegir el que mejor funcione para tu sitio web.

1. Arregle los scripts de bloqueo de renderizado 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 complemento Autoptimize. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar el Configuración »Optimización automática página para configurar los ajustes del complemento.

Configuración de optimización automática

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

Ahora puede probar su sitio web con la herramienta PageSpeed. Si todavía hay secuencias de comandos de bloqueo de representación, debe volver a la página de configuración del complemento y hacer clic en el botón “Mostrar configuración avanzada” en la parte superior.

Opciones avanzadas de JavaScript

Aquí 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.

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

Haga clic en el botón “Guardar cambios y vaciar caché” para guardar los cambios y vaciar el caché del complemento.

Una vez que haya terminado, continúe y revise su sitio web nuevamente con la herramienta PageSpeed.

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

Como funciona?

La optimización automática agrega todos los JavaScript y CSS en cola. Después de eso, crea archivos CSS y JavaScripts minimizados y sirve copias en caché a su sitio web como asíncronas o diferidas.

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

2. Arregle JavaScript de Render Blocking usando W3 Total Cache

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

Primero deberá instalar y activar el complemento W3 Total Cache. Si necesita ayuda, consulte nuestra guía sobre cómo instalar y configurar W3 Total Cache para principiantes.

A continuación, debes visitar Rendimiento »Configuración general página y desplácese hacia abajo hasta la sección Minificar.

W3 Total Cache habilitar minify

Primero debe marcar “Habilitar” junto a la opción Minificar y luego seleccionar “Manual” para la opción de modo minificar.

Haga clic en el botón Guardar todas las configuraciones para almacenar sus configuraciones.

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

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

Debajo de las sugerencias donde dice: “Elimine JavaScript y CSS que bloquean el procesamiento en el contenido de la mitad superior de la página”, haga clic en “Mostrar cómo solucionarlo”. Le mostrará la lista de scripts y hojas de estilo..

Obtenga URL de JavaScript y hojas de estilo de la herramienta Google PageSpeed

Pase el mouse sobre 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 Rendimiento »Minify página.

Primero debe agregar los archivos JavaScript que desea que se minimicen. Desplácese hacia abajo hasta la sección JS y luego, debajo de “Operaciones en áreas”, establezca el tipo de inserción en “Sincronización sin bloqueo” para la sección.

Agregar scripts para minificar

A continuación, debe hacer clic en el botón “Agregar secuencia de comandos” y luego comenzar a agregar las URL de secuencia de comandos que copió de la herramienta Google PageSpeed.

Una vez que haya terminado, desplácese hacia abajo hasta la sección CSS y luego haga clic en el botón “Agregar una hoja de estilo”. Ahora comience a agregar las URL de hoja de estilo que copió de la herramienta Google PageSpeed.

Agregar hojas de estilo para minificar

Ahora haga clic en el botón “Guardar configuración y purgar caché” para almacenar su configuración.

Visite la herramienta Google PageSpeed ​​y pruebe su sitio web nuevamente.

Asegúrese de probar también su sitio web a fondo para ver que todo funciona bien.

Solución de problemas

Dependiendo de cómo los complementos y sus temas de WordPress usan JavaScript y CSS, podría ser bastante difícil solucionar por completo todos los problemas de bloqueo de JavaScript y CSS.

Si bien las herramientas anteriores pueden ayudar, sus complementos pueden necesitar ciertas secuencias de comandos con un nivel de prioridad diferente para funcionar correctamente. En ese caso, las soluciones anteriores pueden romper sus complementos o podrían comportarse inesperadamente.

Google aún puede mostrarle ciertos problemas, como la optimización de la entrega de CSS para el contenido de la mitad superior de la página. La optimización automática le permite corregir eso agregando manualmente el CSS en línea requerido para mostrar el área de plegado anterior de su tema.

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map