Como mejorar el pagespeed de WordPress mediante peticiones asíncronas.

pagespeed de wordpress con async
pagespeed de wordpress con async

Una de las razones para cargar el contenido de nuestra página mediante peticiones asíncronas es el rendimiento. Cuando se entra en una página, el código se carga de arriba a abajo. Por ese motivo, si tienes muchos scripts y a su vez se encuentran en la cabecera del código HTML <head>, el contenido del sitio web tardará mucho tiempo en cargarse y eso afectará a tu pagespeed.

¿Qué significa async y defer en Javascript?

Generalmente usamos muchos scripts de origen externo (que contengan el atributo src) sin tener en cuenta las consecuencias en el pagespeed. Es muy común instalar muchos plugins y librerías sin controlar como se ejecutan en nuestra web. Eso mismo nos puede afectar gravemente tanto en el posicionamiento web como en la obtención de nuevos usuarios.

De este modo, existen 2 atributos que puedes añadir en tus etiquetas <script> para evitar el bloqueo durante las peticiones HTTP y mejorar el pagespeed. Estos atributos son async y defer, nos ofrecen flexibilidad a la hora de elegir como renderizar nuestro contenido con una pequeña diferencia.

Diferencias entre async y defer

Como ya hemos comentado, vamos a necesitar utilizar uno de estos atributos para intentar cargar nuestra página web lo antes posible. Para eso debemos conocer al detalle como funciona cada una de estas propiedades.

diferencias javascript async defer

Entonces, ¿Cuál es mejor?

Ahora que ya sabemos la diferencia entre estos atributos, podemos resumir y analizar en que situación nos conviene usar uno u otro.

Antes de nada hay que destacar que ambos atributos solo funcionará en scripts de origen externos, es decir, aquellos que contengan el atributo src.

A continuación os mostramos las ventajas y desventajas de cada uno.

Async

En el caso de usar el atributo async, sería ideal que el script no fuera dependiente de otros scripts. En el caso de que lo fuera, nos arriesgamos a que se produzcan errores durante su ejecución.

Además, este atributo ignora por completo el orden de aparición de los scripts, ya que los ejecuta según se descargan. En el caso de que el orden de ejecución sea importante, no se debería elegir esta opción.

Defer

Esta opción suele ser la mejor en general, ya que no bloquea el renderizado del HTML. Esto reduce el tiempo de respuesta de la página, por lo tanto, mejora la experiencia del usuario.

Al contrario que con el async, esta sería la mejor elección en caso de tener dependencias entre scripts y cuando el orden de ejecución es importante.

Herramientas para analizar mi página web

Exiten varias herramientas gratuitas online que te permiten saber si tu página está optimizada. Analizan el pagespeed de tu página, la compresión de imágenes y el control de cache entre otras muchas opciones.

GT Metrix

Una de las que más nos gusta es GTMetrix. Además de indicar los tiempos de respuesta, también señala que ficheros están ralentizando tu web.

test velocidad web async javascript
Como mejorar la velocidad de nuestra página web gracias al análisis web gratuito de GTMetrix.

Web dev

Otra plataforma que nos parece muy útil es web.dev de Google. Nos facilita consejos prácticos para mejorar en rendimiento, accesibilidad, buenas prácticas y SEO. En los resultados nos avisa de si nuestra página es legible y accesible, si tenemos en vigor nuestro certificado SSL o si nos faltan textos alternativos en las imágenes.

optimizar imagenes y accesibilidad para web
Análisis web seo y velocidad de carga del sitio web – web.dev

Google PageSpeed Insights

Por último tenemos Google PageSpeed Insights. Esta plataforma evalúa el rendimiento de nuestra página tanto para escritorio como para móviles, además de proponer mejoras como en las herramientas anteriores.

test velocidad web google page speed insight
Resultado del análisis web de Google PageSpeed Insights.

Como podemos optimizar nuestro WordPress

Ahora que hemos visto qué es y como funcionan los atributos async/defer, nos falta mejorar el rendimiento de nuestra web. La forma más fácil y rápida es mediante el uso de plugins de WordPress. Dos plugins que recomendaría para mejorar el rendimiento de tu web serían Autoptimize y Async JavaScript.


El plugin de Async Javascript te ofrece un control total para elegir entre async o defer. Tiene una interfaz muy sencilla y se necesitan muy pocos pasos para empezar a usarlo.

Además tiene un apartado que realiza el análisis de tu web mediante GTMetrix. Este análisis devuelve varios resultados y muestra cuál es la mejor opción para tu sitio web.


Autoptimize es un plugin que nos permite diferir la carga de scripts, estilos e imágenes. Además de minificar, unificar y cachear ficheros. Es un plugin que está más orientado a cubrir todas las necesidades de cada sitio web.

Aun así es recomendable complementarlo con otros plugin de optimización de cache en buscadores, como por ejemplo W3 Total cache.

Si te ha gustado, compártelo en las redes sociales!