16 nov. 2013

Prefer asynchronous resources blogger

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 scripts o gadgets externos, y quieres mejorar la velocidad ya que es un punto importante para el seo de tu pagina y la comodidad del usuario.


Para ver si tienes algún script 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.

1 comentario:

2016 © Inovablog