Utilizar versiones asíncronas de JavaScript

Continuo con mi serie de tips y consejos para mejorar el rendimiento y por tanto el potencial SEO de un sitio WEB y ahora o mostraré un pequeño tip sobre alternativas al uso de llamadas sincronas de JS.

¿Cómo entender la carga asíncrona de JavaScript?

Cuando usas un fichero o un código javascript en el código HTML de tu web estás incluyendo unas instrucciones que se cargan en el navegador del visitante de forma síncrona, es decir, al mismo tiempo que el resto del código. Por tanto el navegador tiene que esperar a que ese código o fichero se cargue para continuar con la carga del resto de la página. Por tanto la solución a este problema es hacer una carga asíncrona, es decir, que no va a provocar un tiempo de espera para la carga del resto de la página.

En los casos que el código JS usado no es demasiado extenso tiene poca importancia salvo que se este cargando desde un servidor lento que tarda mucho en servirlo.

Una forma sencilla de saber si esto está pasando es cargar la página y observar si esta se queda mucho tiempo en blanco o si los elementos de están cargando poco a poco.

¿Cómo hacemos para mejorar la carga de JS que bloquea la visualización?

En la propia documentación de Google Page Insights podemos ver varias soluciones a este problema

1. Introducir directamente el código JS en los fichero HTML para así no tener que esperar a su carga desde un servidor externo o desde otro fichero. Solución muy apropiado cuando son pequeños fragmentos de código pero no tanto cuando son grander.
2. Aplazar la carga de JS con la instrucción async. De esta forma diremos que el navegador no tiene que esperar a que esa carga termine para continuar cargando la página
3. Si el recurso JS no es necesario antes de la carga de la parte superior de la página podemos incluirlo al final del código HTML.

Usar Versiones Asíncronas de las distintas APIs

Si estamos tratando de mejorar el rendimiento o WPO de un sitio web, normalmente tendremos que intentar usar las versiones asíncronas de las llamadas a distinas APIs y servicios como por ejemplo:

• Adsense
• Disqus
• Facebook
• Pinterest…

Listado de opciones asíncronas recomendas por Google para mejora la carga de sitios WEB

El propio Google nos da un listado con las llamadas asíncronas de las APIs más comunes. Podemos verlo en la siguiente figura.