Cómo eliminar JavaScript y CSS que bloquea la representación de WordPress

Si alguna vez ha probado el rendimiento de su sitio en Google PageSpeed ​​Insights, es probable que esté bastante familiarizado con eliminar o eliminar JavaScript y CSS que bloquea la representación. Pero si no lo eres, es perfecto. En esta publicación, exploraremos en profundidad cómo eliminar los recursos que bloquean la representación. La velocidad de carga del sitio es un gran factor de influencia en SEO; Cuanto más rápido se cargue su sitio, es probable que se clasifique arriba en las páginas de búsqueda. Aunque es muy importante usar un buen host web, una de las formas de hacer que su sitio se cargue más rápido es eliminar los recursos que bloquean la representación, como JavaScript y CSS.
Simplemente dicho, JavaScript y CSS que bloquean la representación son scripts y hojas de estilo que el navegador debe cargar completamente antes de que una página web se vuelva visible para un visitante. Y sabe que los usuarios web y los motores de búsqueda no son particularmente pacientes. Por lo tanto, es importante solucionar este problema. En esta publicación, aprenderá a remediar a JavaScript que bloquea la representación en WordPress. Incluso si recién está comenzando con WordPress, encontrará este tutorial bastante fácil de seguir.
En este articulo:
¿Cuál es el bloqueo de JavaScript y CSS?
Prueba de Insights de Google PageSpeed
Métodos para eliminar los recursos de JavaScript que bloquean la representación
Conclusión
¿Qué son JavaScript y CSS que bloquean la representación? Cuando un visitante llega a su sitio web, su navegador primero tendrá que cargar los archivos JavaScript y CSS compatibles antes de cargar HTML. Por lo general, esto debería ser: una página web sin una hoja de estilo o script se verá feo e inutilizable es que si estos archivos no están completamente cargados, la página web no se representará en el navegador. De ahí el nombre JavaScript que bloquea el rendimiento. Aunque es importante que un navegador cargue el estilo y el script de una página web antes de reproducirlo, este retraso adicional se puede evitar sin afectar la apariencia de una página web. Además, esto minimizará el tiempo de carga. El truco es posponer la carga de los scripts y la hoja de estilo que no afecta la sección de una página web que un visitante ve inmediatamente después del aterrizaje. En otras palabras, evitar que el navegador cargue cualquier archivo que no afecte la sección superior de una página web que un usuario verá antes de que se agote, resolverá este problema. Esta sección de una página web se llama contenido por encima del pliegue (ATF).
Antes de profundizar este artículo, es importante familiarizarlo con el instrumento Google PageSpeed. La prueba de Google PageSpeed ​​Insights antes de tomar medidas para eliminar JavaScript y CSS que bloquea la representación, es mejor ejecutar una prueba primero. Y no hay mejor herramienta para probar el rendimiento de un sitio web que Google PageSpeed ​​Insights. Así que ve allí y hagamos algunas pruebas.
Ingrese el enlace a su sitio en la sección URL. Después de eso, haga clic en el botón Análisis. Después de haber terminado de ejecutar la prueba, la puntuación de rendimiento de su sitio se mostrará en la pantalla. Los mejores rendimientos son aquellos con puntajes entre 90-100. Llamada dura? Apuesto a que lo es, pero se puede lograr. Si el rendimiento de su sitio es corto, Google proporcionará algunas sugerencias para mejorarlo. Lo más probable es que una de estas sugerencias sea la eliminación de los recursos que bloquean la obra.

Deje esta pestaña abierta porque la volveremos a ver más tarde. ¿Métodos para eliminar JavaScript y CSS que bloquean la representación ya adivina que hay complementos que pueden resolver este problema sin tener que escribir una sola línea de código? Bueno, si eres, tienes razón.
Una advertencia: como Google advierte correctamente en los resultados de la prueba, si elimina JavaScript y CSS que bloquea la representación, el tema puede destruirlo. Es aconsejable hacer una copia de seguridad de su sitio de WordPress antes de continuar. También puede solicitar nuestro servicio de optimización de velocidad simplemente y trataremos todos los problemas identificados en su sitio. Hay algunos complementos de WordPress que pueden administrar el bloqueo de JavaScript. Sin embargo, analizaremos dos grandes nombres, a saber: W3 Total Cache y autoptimizaremos. Cache Total W3 W3 Total Cache es un excelente complemento de mejora del rendimiento de WordPress. Además de administrar problemas de almacenamiento de caché, también es una excelente herramienta para remediar los problemas de carga causados ​​por hojas de estilo y guiones.

Entonces, lo primero que querrá hacer es instalar y activar el complemento. Después de la instalación y la activación, explore el rendimiento >> Configuración general, desplácese hacia abajo hasta la sección de minimización. Aquí, active la minificar y luego establezca el modo miny en el manual.
Luego haga clic en Guardar todas las configuraciones. Con la opción de minimización activada, lo siguiente que debe hacer para eliminar JavaScript y CSS que bloquea la representación es obtener enlaces a las hojas de estilo y los scripts que retrasan la representación completa de sus páginas web. Aquí el instrumento Google PageSpeed ​​Insights se vuelve útil nuevamente. Así que vuelve a la pestaña que deja antes.
Una vez que llegue allí, haga clic en la pestaña Elimine los recursos que bloquean la representación.

Los enlaces se mostrarán en las Escrituras y los archivos CSS que se reducirán.


Como puede ver, los enlaces a los archivos se han truncado. Para obtener una URL completa, coloque el cursor sobre cualquier enlace, haga clic en el derecho y copie la dirección del enlace. Primero reduciremos los archivos JS, por lo que copia cualquiera de los enlaces .js. Con el enlace copiado, vaya nuevamente al tablero de WordPress. Esta vez, explore el rendimiento >> Minimización
Desplácese hacia abajo hasta que encuentre la sección JS. En la sección Configuración para la minimización de JS, verá el área de la etiqueta . Establezca el tipo de incorporación en no bloqueo utilizando “async”.

Luego, dirija su atención a la subsección de administración de archivos JS. Haga clic en el botón Agregar un script.

Pegue el enlace a los recursos JS que ha copiado previamente en el campo suministrado.

Repita el proceso en todas partes hasta que mantenga todas las direcciones de URL en los recursos de JavaScript. Después de agregar scripts JS mientras está en la misma página, desplácese hacia abajo a la sección CSS. Con la configuración de descuento CSS activada, haga clic en el botón Agregar un estilo de aluminio. Fácil lo mismo que ha hecho en la sección JS. Solo asegúrese de copiar los enlaces al estilo CSS de Google PageSpeed ​​Insights y no enlaces a los recursos JS.

Después de haber terminado de copiar y pegar, haga clic en la configuración Guardar y limpiar el botón limpio.

Ahora regrese a Google PageSpeed ​​Insights y vuelva a analizar su sitio. Debería ver una mejora considerable. Veamos ahora el segundo complemento que puede ayudarnos a eliminar JavaScript y CSS que bloquea la representación. Optimice automáticamente como era de esperar, lo primero que tendrá que hacer es instalar y activar el complemento. Después de la instalación y la activación, directamente desde el tablero, explore la configuración >> autoadeño.

Luego verifique la opción Optimizar el código JavaScript. Luego desplácese hacia abajo y haga lo mismo para CSS. Finalmente, desplácese hacia abajo y haga clic en Guardar los cambios y vaciar el caché.

Vuelva a hacer una prueba en la prueba de velocidad de Google para ver cómo funciona su sitio definitivamente será una mejora. Conclusión Si realmente se toma en serio la mejora del rendimiento de su sitio, solo tiene que hacer esfuerzos para que su sitio se cargue más rápido. En esta publicación, le mostré que elimina los recursos que bloquean el Rendering-JavaScript y el CSS. Además, pasamos a mostrarle los dos complementos que puede usar para remediar este problema: caché total W3 y autoaptificado. La velocidad de carga es uno de los muchos factores que influyen en el SEO de un sitio web. Como tal, centrarse exclusivamente en ello, mientras que descuidar otros factores puede no darle los resultados que desea. En esta guía de SEO, discutimos los pasos además de mejorar la velocidad de carga, que puede seguir para mejorar la clasificación de su sitio. Te recomendamos que lo supere. Más recursos: eliminar las cadenas de consulta de los recursos estáticos – 2 métodos
Guía de construcción de enlaces de raza: manualmente y con la herramienta Ahref

Cómo crear un tema para niños en WordPress