Portada Wordpress Async JavaScript WordPress – Elimina los Recursos que Bloqueen el Renderizado
Si eres de los que buscan que la velocidad de tu WordPress sea lo más rápida posible, ya habrás tomado algunas medidas para ello, como contratar un buen hosting WordPress con discos SSD, optimizar las imágenes al máximo con ayuda de algún plugin, usar la caché, comprimir el contenido, etc…
Aun así, después de todos tus esfuerzos para conseguir que el PageSpeed de Google te de la mejor puntuación posible, hay una «recomendación» que parece perseguir a todas las instalaciones de WordPress: «Elimina los Recursos que Bloqueen el Renderizado»
El propio sistema de Google te recomienda utilizar algún complemento de WordPress para solucionar este problema, así que vamos a ver si el plugin Async JavaScript puede ayudarnos a solucionar uno de esta recomendación de Google de una vez por todas.
Antes de anda, quizás te estés preguntando qué son esos recursos que bloquean el renderizado y porque le interesan tanto a Google.
WordPress y cualquier otro gestor de contenidos que puedas encontrar hoy en día, funciona con hojas de estilo CSS y JavaScript.
Nuestro navegador web puede cargar estos recursos antes que el propio HTML o hacerlo al mismo tiempo, siendo este más lento en cargar.
Además, en ocasiones estos recursos JavaScript y CSS no son necesarios para el correcto funcionamiento de la web, ya que sólo se usan en determinados casos, así que el analizador de Google nos avisa de esta situación.
Normalmente, el el propio theme que estemos usando el responsable de esto y en algunas ocasiones no podremos solucionarlo porque si que serán recursos necesarios para el correcto funcionamiento del sitio web.
Pero si podemos intentarlo o al menos hacer que los recursos «prescindibles» no molesten la carga del sitio web.
Para evitar esto se pueden utilizar dos atributos llamados «async» y «defer».
Estos dos atributos consiguen que el script cargue cuando toca, aunque con algunas diferencias .
Async descarga el script en segundo planos sin interferir en la carga HTML, cuando esté completamente descargado, y una vez descargado es cuando se ejecuta, de esta forma interfiere mucho menos en la carga del HTML mientras se descarga.
Defer actua de forma distinta. Se detienen la descarga del script hasta que el HTML se haya descargado del todo.
Si te sientes con ánimos, puedes añadir estos atributos en todo el código de del theme que estés utilizando, así como en los plugins o recurrir a un plugin como Async JavaScript para que haga todo el trabajo duro por ti.
El plugin Async JavaScript es gratuito y los puedes encontrar rápidamente en el repositorio de plugins de WordPress o descargarlo desde la web haciendo click aquí.
Está creado por los mismos desarrolladores del plugin Autoptimize, muy popular para optimizar WordPress, así que si lo usas te sonará el logotipo.
Una vez lo tengas instalado y activado, encontrarás las opciones de activación y configuración en el menú Ajustes > Async JavaScript
Si accedemos al menú, verás que dispones de cinco pestañas:
El Wizard es bastante lioso y necesita una clave API del servicio de GTmetrix para que funcione, por lo que no parece una opción muy interesante.
La pestaña Status nos mostrará la configuración actual, así como la posibilidad de realizar una prueba en GTmetrix, aunque también necesitamos de la API, así que estamos en el mismo caso en el Wizard.
La sección Help si que nos muestra cosas interesantes. Nos explica las diferentes combinaciones que podemos seleccionar y cómo actúa el plugin si seleccionamos async o defer.
También los navegadores web con los que funciona el plugin y las recomendaciones para usar también su otro plugin Autoptimize en combinación con Async JavaScript para conseguir una optimización mayor.
Así como una pequeña guía de configuración, funcional en la mayoría de los sitios web, para el uso conjunto de los dos plugins.
La pestaña Optimize More! sólo nos muestra otros plugins que podemos instalar en nuestro sitio web, así que puedes obviarla.
La pestaña Settings es desde donde vamos a poder configurar el plugin y todos los parámetros que nos interesa.
La configuración del plugin Async JavaScript puede ser muy sencilla o puedes configurarla de una forma más definida con exclusiones y diferentes configuraciones para según qué tipo de JavaScript añadido en la web.
La primera opción que tenemos es muy sencilla, activar o no Async JavaScript.
También tenemos la opción de activar el plugin para los usuarios que estén conectados en ese momento al sitio y para las páginas de carrito y finalizar la compra.
En el WordPress que hemos usado para probar este plugin tenemos instalado el plugin WooCommerce, es posible que si no lo tienes instalado en tu WordPress, esta última opción no aparezca.
Después tenemos la opción de Ajustes Rápidos, con estas opciones:
Al elegir cualquiera de estas opciones, cualquier otras configuración anterior del plugin será reemplazada.
Los de excluir jQuery es por que en algunos sitios es imprescindible para el correcto funcionamiento del sitio web, así que el plugin nos da la opción de excluirlo, tanto en el método async como defer.
¿Cómo sabemos cuál es la opción correcta para nuestro sitio?, es muy sencillo, prueba y error.
Por lo general, el método async debería funcionar mejor en los sitios más modernos, aunque defer es más compatible en navegadores más antiguos.
Lo de la exclusión de jQuery dependerá mucho de cómo esté desarrollado el sitio web, así que podemos elegir un opción, borrar la caché en el caso de usar algún plugin de caché y probar el funcionamiento del sitio web.
Cuando hablamos de «probar el sitio» es hacerlo a fondo, para asegurarse de que todo funciona correctamente, carritos de compra, sliders, plugins instalados, etc…
Por lo general, excluir jQuery dará menos problemas en la web, pero cada instalación de WordPress es un mundo y puede ser que en algunos casos una configuración determinada no funcione correctamente y otra si.
El resto de opciones son útiles para una configuración más compleja y selectiva.
Por ejemplo, podemos seleccionar el método de async o defer a determinados scripts, excluir alguno en particular, plugins o incluso themes enteros.
Pero para hacer esto tendrás que estar familiarizado con los JavaScript que usa tu sitio web o preguntarle a tu desarrollador web.
En definitiva, Async JavaScript es un plugin que funciona muy bien y hace lo que dice, dándonos la posibilidad de realizar configuraciones más complejas y selectivas.
Y algo importante, si después de activar y configurar el plugin haces otra prueba en el PageSpeed, es más que probable que algunas de las alertas de bloqueo de renderizado sigan activas.
Pero estas deberían de ser de contenido CSS, no JavaScript, ya que Async JavaScript, como su nombre indica, sólo se encarga del JavaScript, no del CSS, aunque si deberías notar una mejora en la puntuación.