Tutorial: Carga asíncrona: Mejora la velocidad de carga de páginas web

  • Autor Autor SoloNegocios
  • Fecha de inicio Fecha de inicio
S

SoloNegocios

Xi
SEO
1. Botón +1: Texto sacado del Blog de Google para Webmasters donde cuentan que mejoraron la velocidad del Botón +1 usando el fragmento Asincrono

Además de estas mejoras, hay nuevo fragmento asíncrono que permite que la experiencia de +1 sea todavía más ágil. El fragmento asíncrono permite que la página se siga cargando mientras el navegador descarga el JavaScript relacionado con el botón +1. Al cargar estos elementos en paralelo, garantizamos que la solicitud HTTP destinada a obtener el JavaScript del botón +1 no aumente el tiempo de carga de tu página. Quienes ya hayan implementado el botón sólo necesitarán actualizar el código para el nuevo fragmento asíncrono, tras lo cual notarán una mejora general del tiempo de carga de la página.

Si quieren leer el articulo completo lo pueden hacer aquí: El botón +1: ahora, más rápido - El Blog para Webmasters de Google

2. Google Analytics: Google también carga Asincronamente el código de Analytics

¿Qué es el código de seguimiento asincrónico de Google Analytics?

El código de seguimiento asincrónico de Google Analytics es un fragmento de código mejorado de JavaScript que carga el código de seguimiento ga.js en segundo plano mientras las demás secuencias de comandos y contenido siguen cargándose en las páginas del sitio web. Es muy probable que se aprecien las siguientes ventajas con el fragmento de código asincrónico:

mayor velocidad del tiempo general de carga de las páginas, recopilación mejorada de las visitas cortas a las páginas con gran volumen de rich media o de secuencias de comandos, recopilación, y retención, de los clics de usuario que se producen antes de que se cargue el código de seguimiento.

Fuente: ¿Qué es el código de seguimiento asincrónico de Google Analytics? - Ayuda de Analytics

3. Google Chrome: El navegador es rápido porque el carga Asincronamente todos los JS cosa que no hacen los otros navegadores, no encuentro la fuente original pero les dejo otra donde lo mencionan

Fuente: Chrome, un navegador asíncrono

Si Google lo usa en sus JS porque nosotros no?

Lo que deben hacer es ir al archivo Functions.php y pegar este código:

PHP:
function JS_Asyncrono($url_js)
{
 ?>
  <script type="text/javascript">
   (function()
   {
    var s = document.createElement('script');
    var c = document.getElementsByTagName('script')[0];
    s.type = 'text/javascript';
    s.async = true;
    s.src = '<?php echo $url_js ?>';
    c.parentNode.insertBefore(s, c);
   }
   )();
  </script >
 <?php
}

Ahora cuando necesiten un JS en sus Themes solo deben llamarlo de esta forma:

Botón Me Gusta de Facebook Asincrono: <?php JS_Asyncrono('//connect.facebook.net/es_ES/all.js#xfbml=1'); ?>
Botón Retwittear de Twitter Asincrono: <?php JS_Asyncrono('http://platform.twitter.com/widgets.js'); ?>

No es necesario usar la función:

1. En el JS de Analytics o el del botón +1 ya que Google cambio el código para que cargaran Asincronamente.
2. Tampoco lo recomiendo para colocarlo en el JS de Adsense porque Adsense dice que no debemos modificar sus códigos.
3. Al usarlo en el Jquery.js no me funciono este JS, no se porque si quieren prueben para ver como les sale.

Ademas este código les mejora el puntaje en la parte "Prefer asynchronous resources" del Google PageSpeed, también según Google al usar el código Asincrono es recomendable colocar los JS en el Head ya que tu pagina seguirá cargando al mismo tiempo que lo hacen los JS en segundo plano con esto bajas el porcentaje de rebote ya que muchos se aburren de esperar que cargue y no se vea la pagina.
 
Y este también tiene Black Hat SEO?!!

Es broma 😛 gracias, lo implementaré en mis plantillas 🙂
 
Este me parece un muy buen aporte ya que es algo complicado pensar en como implementarlo, lo voy a probar en uno de los sitios y aviso como me fue, gracias.
 
Es fácil implementarlo si sabes un poco de php y javascript.

Yo si he notado que esos botones sociales hacen algo mas lento la carga de tu pagina.

Buen aporte.
 
Buen aporte SoloNegocios (va para los favoritos).
Pero una duda con respecto al tema. ¿Se puede utilizar esto con el código que Facebook da para el fan box?
Digo, porque no se si funciona con iframe.
 
Última edición:
Buen aporte SoloNegocios (va para los favoritos).
Pero una duda con respecto al tema. ¿Se puede utilizar esto con el código que Facebook da para el fan box?
Digo, porque no se si funciona con iframe.

Solo funciona con los JS te tocaría usar el JS de Facebook en lugar del iFrame
 
En donde se coloca<?php JS_Asyncrono('//connect.facebook.net/es_ES/all.js#xfbml=1'); ?> y <?php JS_Asyncrono('http://platform.twitter.com/widgets.js'); ?>

Y de que forma tengo que implementarlo. No me esta funcionando. Coloqué el código de fuctions, pero luego cuando quiero llamar los botones no me funciona y me da error... [MENTION=59]SoloNegocios[/MENTION]
 
¿ El código esta actualizado ?
 
Este codigo esta Actualizado???

Saludos!
 
sigue actualizado este codigo?
 
tan bien se ha hablado mucho últimamente con respecto al de google analytics
 
Puff me gustaria saber si es actualizado
 
Y a mi, justo lo estuve buscando hace una semana...
 
¿Alguien ha conseguido hacer funcionar los js de facebook y twitter de forma asíncrona?

¿Cómo se hace?

Gracias
 
hola tratando de revisar "la Fuente: ¿Qué es el código de seguimiento asincrónico de Google Analytics? - Ayuda de Analytics" ya no esta a ver si la pueden subir
 
se puede hacer con codigos como el de impresionesweb, smotion, kontextua; alguien lo a logrado?
 
Atrás
Arriba