Cargar los códigos de Facebook y Twitter de forma asíncrona

Cuando navegamos por internet queremos que las páginas carguen de forma rápida o al menos que el contenido que estamos buscando se vea mientras otros elementos de la web se siguen cargando en «segundo plano».

Esto es algo que se recomienda desde hace mucho tiempo para mejorar la experiencia de los usuarios y de hecho se han creado herramientas geniales como PageSpeed que permiten analizar rápidamente cualquier página para obtener sugerencias de optimización.

Una de las sugerencias que se pueden encontrar es la del uso de recursos asíncronos para evitar bloquear la carga de las páginas. Seguramente si tienes una web donde se utilizan los botones de Twitter y Facebook puedas ver un mensaje como el siguiente con el plugin de PageSpeed:

¿Qué significa y cómo solucionarlo?

El mensaje indica que los scripts de Facebook y Twitter se están cargando de forma sincronizada, es decir que cuando el navegador se encuentra con estos scripts los ejecuta y hasta que no termina con esta tarea la carga normal de la página no continúa.

Esto puede convertirse en un problema si los scripts son muy grandes o «se trancan», es por ello que una de las recomendaciones que se suelen dar es colocarlos en el Footer para que sean de los últimos elementos en cargarse.

Pero otra solución mejor es cargarlos de forma asíncrona para que se ejecuten al final de todo, es decir cuando todos los elementos de la web ya se hayan descargado. Sin importar su ubicación en el código fuente.

Los scripts de Google Analytics e incluso los de AdSense ya se cargan de forma asíncrona para mejorar la experiencia de los usuarios.

¿Cómo cargar Facebook y Twitter de forma asíncrona?

Es muy sencillo, sólo basta con agregar un async = true en los códigos que estas redes sociales nos ofrecen.

Este es el código normal de Facebook:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Y de esta forma se puede cargar Facebook de forma asíncrona, la única diferencia es el «js.async = true» en la línea 6:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Nota: si utilizas varios botones o widgets de Facebook, sólo es necesario cargar el script all.js una vez por cada página.

Y lo mismo para Twitter, este es el código original:

<script>
! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}
(document, 'script', 'twitter-wjs');
</script>

Y este es el código asíncrono con el «js.async = true» en la línea 8:

<script>
! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.async=true;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}
(document, 'script', 'twitter-wjs');
</script>

Les recomiendo probar el funcionamiento con el plugin de PageSpeed comparando el antes y el después.

Algo similar lo podemos ver con el script que se utiliza para el botón +1 de Google, en su versión asíncrona se puede ver que Google agrega un po.async = true que cumple la misma función:

<script type="text/javascript">
window.___gcfg = {lang: 'es'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Espero que el tip sirva y si necesitan ayuda para implementarlo pueden dejarme un comentario.