Cómo remediar el bloqueo de JavaScript y CSS en WordPress

¿Quieres eliminar JavaScript y CSS que bloquea la reproducción en WordPress? Si prueba su sitio web en Google PageSpeed ​​Statistics, probablemente verá una sugerencia para eliminar las Escrituras de bloqueo de reproducción y CSS. Sin embargo, no proporciona detalles sobre cómo hacer esto en su sitio web de WordPress. En este artículo, le mostraremos cómo remediar fácilmente a JavaScript y CSS que bloquea la reproducción en WordPress para mejorar su puntaje de Google PageSpeed.

¿Qué es JavaScript y CSS de bloqueo de renderizado? Bloquear JavaScript y CSS Randency 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 complementos que agregan archivos JavaScript y CSS al frente de su sitio web. Estos scripts pueden aumentar el tiempo de carga de su sitio y bloquear la página.

El navegador de un usuario deberá cargar estas Escrituras y CSS antes de cargar el resto del código 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. Estos scripts y hojas de estilo se llaman JavaScript y CSS que bloquean la representación. Los propietarios de los sitios web que intentan tocar el puntaje 100 100 PageSpeed ​​de Google deberán resolver este problema para obtener ese puntaje perfecto.
¿Qué es Google PageSpeed ​​Score? Google PageSpeed ​​Insights es una herramienta de prueba 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 de acuerdo con Google Director Lines 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 alcanzan en algún lugar entre 50 y 70. Sin embargo, algunos propietarios de sitios web se sienten obligados a llegar a los 100 (el punto más grande que puede grabar una página). ¿Realmente necesita el puntaje perfecto de Google PageSpeed ​​”100″? El propósito de Google PageSpeed ​​Statistics es brindarle orientación para mejorar la velocidad y el rendimiento de su sitio web. No se le pide que siga estas reglas estrictamente. Recuerde que la velocidad es solo uno de los muchos valores de SEO del sitio que ayuda a Google a configurar cómo clasificar su sitio. La razón por la cual la velocidad es tan importante es que mejora la experiencia del usuario en su sitio. Una mejor experiencia del usuario requiere mucho más que una velocidad simple. También debe proporcionar 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 WPBeginner, mantuvimos el énfasis en la velocidad, además de mejorar la experiencia del usuario. Recomendamos usar las reglas de Google PageSpeed ​​como sugerencias y si puede implementarlas fácilmente sin arruinar la experiencia del usuario, entonces es genial. De lo contrario, debe esforzarse por hacer todo lo que pueda y luego no preocuparse por el resto. Dicho esto, echemos un vistazo a lo que puede hacer para remediar a JavaScript y CSS que bloquea al jugador. Puede elegir el que funcione mejor para su sitio web. 1. Remedia los scripts de bloqueo de renderizado y CSS con WP Rocket para este método, utilizaremos el complemento WP Rocket. Es el mejor complemento de caché de WordPress en el mercado y le permite mejorar rápidamente el rendimiento de su sitio web, sin habilidades técnicas o configuración complicada. Primero, debe instalar y activar el complemento WP Rocket. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress.
WP Rocket funciona fuera de la caja y comenzará el caché con configuraciones óptimas para su sitio web. Puede obtener más información sobre esto en nuestra guía completa sobre cómo instalar y configurar el cohete WP correctamente en WordPR. Por defecto, no activando 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 complemento le permite activar opcionalmente estas configuraciones. Para hacer esto, debe acceder a la configuración »Página de cohete WP y luego cambiar a la pestaña” Optimización de archivos “. Desde aquí, desplácese a la sección del archivo CSS y marque las casillas junto a las opciones de descuento de CSS, combine los archivos CSS y optimice CSS.: WP Rocket intentará minimizar todos los archivos CSS, combinarlos y cargar solo para una parte visible de su sitio web. Esto podría afectar el aspecto de su sitio web, por lo que debe probar a fondo su sitio en múltiples dispositivos y tamaños de pantalla. Luego debe desplazarse a la sección de archivos JavaScript. Desde aquí, puede verificar todas las opciones para mejorar el máximo rendimiento.
Puede disminuir y combinar archivos JavaScript como lo hizo para CSS. También puede desactivar WordPress para cargar el archivo jQuery migrato. Es un script que WordPress carga para proporcionar compatibilidad para complementos y temas utilizando versiones antiguas de JQuey.
La mayoría de los sitios web no necesitan este archivo, pero aún desea consultar su sitio web para asegurarse de que la eliminación no afecte su tema o complementos. Luego, desplácese un poco a continuación y marque las casillas al lado de las opciones de “carga de JavaScript” retrasada “y” forma segura de jQuery “. Estas opciones retrasan la carga de JavaScripts no esenciales, y el modo JQuey seguro le permite cargar JQue para obtener temas que puede usarlo en línea. Puede dejar que esta opción se verifique si está seguro de que su tema no usa jQuey en línea en ninguna parte. Recuerde hacer clic en Guardar los cambios para almacenar su configuración.

Después de eso, le recomendamos que elimine el caché en el cohete WP antes de probar el sitio web con Google Page Speed ​​Insights nuevamente. En nuestro sitio de prueba, logramos obtener un puntaje del 100% en el escritorio, y el problema de bloquear al jugador se resolvió en puntajes móviles y de escritorio.


2. Remedia los scripts de bloqueo de renderizado y CSS con autoaptizado para este método, utilizaremos un complemento separado creado especialmente para mejorar la entrega de archivos CSS y JS de su sitio web. Si bien este complemento hace su trabajo, no tiene otras características fuertes que tiene WP Rocket.
Lo primero que debe hacer es instalar y activar el complemento de autocuración. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Después de la activación, debe visitar la página Configuración »Optimización automática para configurar la configuración del complemento. Primero, debe verificar la casilla junto a la opción “Optimizar el código JavaScript” en el bloque de opciones JavaScript. Asegúrese de que se descargue la opción “Agregación de archivos JS”. Luego, desplácese a la casilla de opciones CSS y marque la opción “Optimizar el código CSS”. Asegúrese de que se descargue la opción “Agregación de archivos CSS”.

Ahora puede hacer clic en “Guardar los cambios y vaciar el caché” para almacenar la configuración. Continúe y pruebe el sitio web con la instalación de velocidad de página. En nuestro sitio demostrativo, pudimos remediar el problema de bloquear la representación con estas configuraciones básicas.
Si todavía hay scripts para bloquear el reproductor, entonces debe volver a la página de configuración del complemento y examinar las opciones en las opciones de JavaScript y CSS. Por ejemplo, puede permitirse el complemento para incluir JS en línea y eliminar los scripts que se excluyen por defecto, como sello.js o jquey.js. Haga clic en “Guardar los cambios y vaciar el caché” para guardar los cambios y vaciar el caché del complemento. Después de haber terminado, continúe y revise su sitio web nuevamente con la herramienta de velocidad de página. ¿Como funciona?