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 procesamiento y CSS. Sin embargo, no proporciona ningún detalle sobre cómo hacerlo en su sitio de WordPress.
En este artículo, le mostraremos cómo arreglar fácilmente JavaScript y CSS que bloquean el renderizado en WordPress para mejorar su puntaje de PageSpeed de Google.
¿Qué es JavaScript y CSS de bloqueo de renderizado?
El bloqueo de renderizado JavaScript y CSS 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 plugins 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.
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 que bloquean la representación.
Los propietarios de sitios web que intenten alcanzar la puntuación de Google PageSpeed de 100 deberán solucionar este problema para lograr la 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 prueba su sitio web según 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 obtienen 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 la puntuación de PageSpeed de Google “100” perfecta?
El propósito de la información de Google PageSpeed es brindarle 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 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 porque mejora la experiencia del usuario en su sitio.
Una mejor experiencia de usuario requiere mucho más que 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.
Durante el último rediseño de , mantuvimos nuestro enfoque 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 preocuparse por el resto.
Habiendo dicho eso, echemos un vistazo a lo que puede hacer para corregir JavaScript y CSS que bloquean el renderizado en WordPress.
Cubriremos dos métodos que arreglarán el JavaScript y CSS que bloquean el renderizado en WordPress. Puede elegir el que mejor se adapte a su sitio web.
1. Arregle los scripts de bloqueo de renderizado y CSS con WP Rocket
Para este método, usaremos el WP Rocket plugin. Es el mejor almacenamiento en caché de WordPress. plugin en el mercado y le permite mejorar rápidamente el rendimiento de su sitio web sin ninguna habilidad técnica o una configuración complicada.
Primero, necesitas instalar y activar WP Rocket plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.
WP Rocket funciona de inmediato y activará el almacenamiento en caché con la configuración óptima para su sitio web. Puede obtener más información al respecto en nuestra guía completa sobre cómo instalar y configurar correctamente WP Rocket en WordPress.
De forma predeterminada, no activa las opciones de optimización de JavaScript y CSS. Estas optimizaciones pueden afectar potencialmente la apariencia de su sitio web o algunas características, por lo que el plugin le permite habilitar estas configuraciones opcionalmente.
Para hacer eso, debes visitar Configuración »WP Rocket página y luego cambie a la pestaña ‘Optimización de archivos’. Desde aquí, desplácese hasta la sección Archivos CSS y marque las casillas junto a las opciones Minificar CSS, Combinar archivos CSS y Optimizar la entrega de CSS.
Nota: WP Rocket intentará minimizar todos sus archivos CSS, combinarlos y solo cargar el CSS necesario para la parte visible de su sitio web. Esto podría afectar la apariencia de su sitio web, por lo que debe probarlo a fondo en varios dispositivos y tamaños de pantalla.
A continuación, debe desplazarse a la sección Archivos JavaScript. Desde aquí, puede consultar todas las opciones para mejorar al máximo el rendimiento.
Puede minimizar y combinar archivos JavaScript como lo hizo con CSS.
También puede evitar que WordPress cargue el archivo jQuery Migrate. Es un script que WordPress carga para proporcionar compatibilidad para plugins y temas que utilizan versiones antiguas 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 plugins.
A continuación, desplácese hacia abajo un poco más y marque las casillas 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 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 almacenar 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 un puntaje del 100% en el escritorio y el problema de bloqueo de procesamiento se resolvió en los puntajes de dispositivos móviles y de escritorio.
2. Corrija los scripts de bloqueo de renderizado y CSS con Autoptimize
Para este método, usaremos un plugin hecho específicamente para mejorar la entrega de los archivos CSS y JS de su sitio web. Mientras esto plugin hace el trabajo, no tiene las otras características poderosas que tiene WP Rocket.
Lo primero que debe hacer es instalar y activar el Autoptimizar plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.
Tras la activación, debe visitar el Configuración »Optimización automática página para configurar el plugin ajustes.
Primero, debe marcar la casilla junto a la opción ‘Optimizar código JavaScript’ debajo del bloque Opciones de JavaScript. Asegúrese de que la opción ‘Agregar archivos JS’ esté desmarcada.
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’ esté desmarcada.
Ahora puede hacer clic en el botón ‘Guardar cambios y vaciar caché’ para almacenar 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 bloqueo de procesamiento con estas configuraciones básicas.
Si todavía hay scripts de bloqueo de procesamiento, debe volver a la pluginla página de configuración y las opciones de revisión en las opciones de JavaScript y CSS.
Por ejemplo, puede permitir plugin para incluir JS en línea y eliminar los scripts que están excluidos de forma predeterminada, como seal.js o jquery.js.
Haga clic en el botón ‘Guardar cambios y vaciar caché’ para guardar sus cambios y vaciar plugin cache.
Una vez que haya terminado, continúe y revise su sitio web nuevamente con la herramienta Page Speed.
¿Como funciona?
Autoptimize agrega todos los JavaScript y CSS en cola. Después de eso, crea archivos CSS y JavaScripts minificados y envía copias en caché a su sitio web como asíncronas o diferidas.
Esto le permite solucionar el problema de estilos y scripts que bloquean el procesamiento. 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 plugins y su tema de WordPress utiliza JavaScript y CSS, podría ser bastante difícil solucionar por completo todos los problemas de JavaScript y CSS que bloquean la representación.
Si bien las herramientas anteriores pueden ayudar, su plugins puede necesitar ciertos scripts con un nivel de prioridad diferente para funcionar correctamente. En ese caso, las soluciones anteriores pueden romper la funcionalidad de tales pluginso podrían comportarse de forma inesperada.
Google aún puede mostrarle ciertos problemas, como optimizar la entrega de CSS para el contenido de la mitad superior de la página. WP Rocket le permite solucionarlo agregando manualmente CSS crítico requerido para mostrar el área de pliegue anterior de su tema.
Sin embargo, podría ser bastante difícil averiguar qué código CSS necesitará para mostrar el contenido en la mitad superior de la página.
Esperamos que este artículo le haya ayudado a aprender cómo corregir JavaScript y CSS que bloquean el renderizado en WordPress. Es posible que también desee ver 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 . También puedes encontrarnos en Twitter y Facebook.
.
Fuente: wpbeginner