¿Desea eliminar JavaScript y CSS de bloqueo de representación en WordPress? Si prueba su sitio web en las estadísticas de Google PageSpeed, es probable que vea una sugerencia para eliminar los scrips y el CSS que bloquea el procesamiento. En este artículo, le mostraremos cómo reparar fácilmente el bloqueo de representación de JavaScript y CSS en WordPress para mejorar su puntaje de Google PageSpeed.
¿Qué es Render-Blocking JavaScript y CSS?
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 el procesamiento 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 algunos milisegundos más para ver la página.
Estas secuencias de comandos y hojas de estilo se conocen como JavaScript y CSS con bloqueo de representación.
Los propietarios de sitios web que intenten alcanzar el puntaje de Google PageSpeed de 100 necesitarán solucionar este problema para obtener ese puntaje perfecto.
¿Qué es Google PageSpeed Score?
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 en contra de las directrices de Google para la velocidad y ofrece sugerencias para mejorar el tiempo de carga de la página de su sitio.
Le muestra un puntaje basado en la cantidad de reglas que aprueba su sitio. La mayoría de los sitios web tienen un lugar entre 50-70. Sin embargo, algunos propietarios de sitios web se sienten obligados a alcanzar 100 (la puntuación más alta que puede obtener una página).
¿Realmente necesitas el puntaje perfecto de 100 páginas de Google?
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 estrictamente estas reglas.
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 cual 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.
sitio
Recomendamos que utilice las reglas de la velocidad de páginas de Google 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 preocuparse por el resto.
Habiendo dicho eso, echemos un vistazo a lo que puede hacer para corregir el renderizado de JavaScript y CSS en WordPress.
Cubriremos dos métodos que corregirán el renderizado que bloquea JavaScript y CSS en WordPress. Puede elegir el que mejor funciona para su sitio web.
1. Arregle Render Blocking Scripts 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
Tras la activación, debe visitar el Configuraciones »Autoptimizar página para configurar los ajustes del plugin.
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.
Aquí puede permitir que el complemento incluya JS en línea y elimine los scripts que están excluidos de manera predeterminada como seal.js o jquery.js.
A continuación, desplácese hacia abajo a 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 sus cambios y vaciar el caché de complementos.
Una vez que haya terminado, siga adelante y consulte su sitio web nuevamente con la herramienta PageSpeed.
Asegúrese de probar minuciosamente su sitio web para asegurarse de que no se rompe nada mediante la optimización de sus JavaScripts o CSS.
¿Como funciona?
Autómata agrega 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 diferidas.
Esto le permite corregir el problema de scripts y estilos de bloqueo de representación. Sin embargo, tenga en cuenta que también puede afectar el rendimiento o la apariencia de su sitio web.
2. Reparar el bloqueo de renderizado 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 complemento W3 Total Cache en su sitio web.
Primero tendrá que instalar y activar el complemento W3 Total Cache. Si necesitas ayuda
Luego, necesitas visitar Rendimiento »Configuración general página y desplácese hacia abajo a la sección Minificar.
Primero debe marcar ‘Habilitar’ al lado de la opción Minificar y luego seleccionar ‘Manual’ para la opción de modo minify.
Haga clic en el botón Guardar todas las configuraciones para almacenar su configuración.
A continuación, debe agregar los scripts y CSS que desea minificar.
Puede obtener las URL de todas las secuencias de comandos y hojas de estilo que son bloqueadas por la herramienta Google PageSpeed Insights.
En las sugerencias en las que dice: «Elimina el JavaScript que bloquea la visualización y el CSS en el contenido de la mitad superior de la página», haz clic en «Mostrar cómo solucionarlo». Le mostrará la lista de scripts y hojas de estilo.
Pase el mouse sobre un script y le mostrará la URL completa. Puede seleccionar esta URL y luego usar las teclas CTRL + C del teclado (Comando + C en Mac) para copiar la URL.
Ahora ve a tu área de administración de WordPress y ve a Rendimiento »Minificar página.
Primero necesita agregar archivos JavaScript que desea minificar. Desplácese hasta la sección JS y luego en ‘Operaciones en áreas’, establezca el tipo de incrustación en ‘Sincronización no bloqueante’ para el
sección.
A continuación, debe hacer clic en el botón ‘Agregar script’ y luego comenzar a agregar las URL de script que copió de la herramienta Google PageSpeed.
Una vez que haya terminado, desplácese hacia abajo a la sección de CSS y luego haga clic en el botón ‘Agregar una hoja de estilo’. Ahora comience a agregar las URL de la hoja de estilo que copió de la herramienta Google PageSpeed.
Ahora haga clic en el botón ‘Guardar configuración y purgar caché’ para almacenar su configuración.
Visite la herramienta Google PageSpeed y vuelva a probar su sitio web.
Asegúrese de probar su sitio web a fondo para ver si todo funciona bien.
Solución de problemas
Dependiendo de cómo los complementos y los temas de WordPress usen JavaScript y CSS, podría ser todo un reto reparar completamente todos los problemas de JavaScript y CSS que impiden la reproducción.
Si bien las herramientas anteriores pueden ser útiles, es posible que los complementos necesiten ciertas secuencias de comandos en un nivel de prioridad diferente para que funcionen correctamente. En ese caso, las soluciones anteriores pueden romper sus complementos o podrían comportarse inesperadamente.
Es posible que Google aún le muestre ciertos problemas, como la optimización de la entrega de CSS por encima del contenido doble. Autoptimize le permite corregir eso añadiendo manualmente el CSS en línea requerido para mostrar el área de pliegue de su tema.
Sin embargo, podría ser bastante difícil averiguar qué código CSS necesitará para mostrar el contenido doble.
Eso es todo
