Async JavaScript WordPress – Elimina los Recursos que Bloqueen el Renderizado

Categorias: 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»

eliminar recursos bloqueen rederizado - PageSpeed Google

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.


Tenemos diferentes tipos de hosting, selecciona uno:


Qué son los Recursos que Bloquean el Renderizado

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.

Plugin Async JavaScript – Evitar que los Recursos Bloqueen el Contenido

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.

logo async javascript - Plugin WordPress

Una vez lo tengas instalado y activado, encontrarás las opciones de activación y configuración en el menú Ajustes > Async JavaScript

menu async js - WordPress

Si accedemos al menú, verás que dispones de cinco pestañas:

  • – Wizard
  • – Settings
  • – Status
  • – Help
  • – Optimize More!

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.

async js ayuda - WordPress

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.

Configuración del Plugin Async JavaScript

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.

async javascript activar - WordPress

Después tenemos la opción de Ajustes Rápidos, con estas opciones:

  • – Aplicar Async
  • – Aplicar Defer
  • – Aplicar Async (jQuery Excluido)
  • – Aplicar Defer (jQuery Excluido)

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.

async js ajustes rapidos - WordPress

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.

Hosting para WordPress con IP Española

  • Hosting especializado en WordPress con discos SSDWordPress 1desde4´38€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 2desde5´54€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 3desde8´34€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 1desde4´38€/mes
  • Hosting especializado en WordPress con discos SSDWordPress 2desde5´54€/mes
  • Hosting especializado en WordPress con discos SSDWordPress 3desde8´34€/mes
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu WordPress
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WordPress
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Wordpress
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Wordpress
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!