Revista Comunicación

Prefer asynchronous resources blogger

Publicado el 15 mayo 2014 por Loquendo Manzano
Si eres desarrollador web o simplemente tienes un blog, y lo analizaste en un servidor para determinar su velocidad, te abras topado con la opción "Prefer asynchronous resources" cuando tengas algún <script>, externo, a este podremos aplicarle la opción de carga asíncrona,

¿Que es la carga asíncrona? 


Para explicar Prefer asynchronous resources o carga asíncrona, imaginemos que en nuestro blog tenemos el gadget de la caja de seguidores facebook, los seguidores de twitter y google+, cuando un usuario entra en nuestro blog, empezara a cargarlo, entonces si no tenemos una carga asíncrona, se cargara el gadget de facebook, luego el de google+ y twitter...ect, se irán cargando una a una, en cambio si aplicamos recursos asincrominos, el gadget tanto de facebook, twitter, y google+ se cargaran al mismo tiempo, sin esperar al que el otro termine, esto es algo que beneficia la velocidad de un blog, especialmente si dependes o usas muchos script o gadget externos, y la velocidad es un punto importante para el seo y la comodidad del usuario.
Para ver si tienes algún scrit o gadget que requiera aplicar este truco revisa primero en el servicio GTmetrix
Si te aparecieron algunos lo mas probable es que sean de facebook twitter y google+
ahora te voy a mostrar como utilizar cargas asíncronas:
este es el código del botón de me gusta 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_ES/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

así como esta, no esta para realizar una carga asíncrona, para que este en carga asíncrona debemos agregar este código antes de la linea donde se contiene la url externa:
js.async=true;

entonces nos quedaría así:
<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_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

y lo mismo seria para el botón de twitter y muchos otros, el código se agrega antes de la linea del enlace
ejemplo:
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es">Twittear</a>
<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>

como pueden ver el código para carga asincronima va antes del enlace del scritp.
y así la velocidad del blog puede mejorar considerablemente.
recuerda que esto solo se usan en script externos.

Volver a la Portada de Logo Paperblog