Mejora el rendimiento de tu web utilizando jascript asíncrono

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores.

En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix.

GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de botella" que afecten a su rendimiento. Entre las pruebas que realiza para comprobar la velocidad de carga de una web se encuentra la conocida Google Pagespeed y Yahoo YSlow.

Veamos punto por punto, qué mejoras debes implementar en tu web para conseguir un buen rendimiento por medio de la llamada a funciones javascript en modo asíncrono.

¿Qué es la utilización de javascript asíncrono en una web?

A la hora de dibujar una página en un sitio web, lo ideal es contar con recursos que se carguen asíncronamente. Es decir, recursos que permiten que toda la página completa se "dibuje" en el navegador sin necesidad de que éste "espere" a que termine de ejecutarse un determinado script.

De esta manera se consigue dibujar mucho más rápido la página web y se transmite una mayor "fluidez" al usuario, que cuenta con una experiencia mucho más amigable en la utilización de nuestros contenidos.

Optimiza el rendimiento de tu web paso a paso con GTMetrix: Google Pagespeed y YSlow:

Este artículo es parte de una guía que te ayudará a optimizar al completo el rendimiento neto de tu web, mejorando así su ejecución en cualquier dispositivo (móviles, tabletas, ordenadores) y permitiéndote una mejora en tu posicionamiento en buscadores.

La guía consta de los siguientes capítulos:

• Analiza el rendimiento integral de tu web con GTMetrix.

• Mejora el rendimiento de tu web aplazando la ejecución de javascript

• Mejora el rendimiento de tu web optimizando sus imágenes

• Mejora el rendimiento de tu web optimizando sus hojas de estilo.

• Mejora el rendimiento de tu web utilizando jascript asíncrono

Puedes ejecutar cada entrega por separado, es recomendable seguir el orden planteado para una mejor comprensión.

Comprueba el rendimiento de tu web con GTMetrix

Lo primero es realizar el análisis de rendimiento de GTMetrix para poder visualizar si tenemos algún aviso que nos indique la necesidad de optimizar las hojas de estilo en nuestra web.

Así pues, ejecuta primero esta guía que te explica cómo analizar el rendimiento de tu web con GTMetrix.

Si en el resultado del análisis de tu página te aparecen los siguientes avisos: "Prefer asynchronous resources", lo mejor es que ejecutes los siguientes pasos que explico a continuación para mejorar el rendimiento de tu web.

Cómo localizar los recursos javascript no asíncronos

Gracias a GTMetrix, en el análisis de Google Pagespeed, podréis ver los avisos de los recursos Javascript que requieren optimización y qué clase de actuación requieren al respecto para mejorarlos.

De esta manera, puedes ver dentro del código de tus páginas, qué hojas de estilo están afectando al rendimiento de la misma. A continuación te explico cómo solucionar cada problema.

Conceptos previos muy importantes:

Si estás familiarizado con la utilización de javascript, entenderás que son pequeños "guiones" o scripts de ejecución programados que realizan una serie de instrucciones en la página web para activar recursos, dibujar componentes o actuar en general sobre la presentación y la interacción con el usuario directamente desde una página web.

Antiguamente, al Javascript se le llamaba de la siguiente manera (lo verás en muchas páginas web todavía):

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 

Esta clase de llamadas al javascript referenciándolo directamente en la página web como un archivo externo almacenado dentro de un ".js" ralentiza considerablemente la ejecución del código y el posterior dibujado de la página web en el navegador.

En primer lugar, el navegador tiene que llamar a la URL o dirección donde se encuentra el archivo .js que contiene el javascript. Esta operación debe realizar una búsqueda del archivo en la web, conectándose a la dirección donde se encuentra el archivo ("dns lookup") y  perdiendo mucho tiempo no sólo en localizarlo sino además en descargarlo al navegador del cliente. 

En segundo lugar, una vez descargado el archivo .js, éste debe interpretarse y ejecutarse. Durante todo el tiempo que se busca, se descarga y se interpreta, como se hace "síncronamente", el navegador "espera" a que el recurso se procese por completo para continuar cargando el resto de la página. Con lo que, la sensación para el usuario es que todo está "parado" hasta que dicho javascript se procesa.

Con el tiempo, los navegadores se perfeccionaron con el uso de la "memoria caché" y la ejecución forzadamente asíncrona de esta clase de declaraciones de uso de javascript pero continúa suponiendo un problema esta manera de llamarlo.

Es por ello que lo ideal es realizar una llamada asíncrona que no haga que toda la ejecución quede pendiente hasta que dicho javascript se procese.  

En términos generales:

• Evita las llamadas de javascript síncrono siempre. No declares el javascript de esta manera en el <head>. Debes dejar la cabecera del documento HTML lo más libre posible de javascript y en caso de no tener más remedio que ejecutarlo (por tener un .js que te obligue a hacerlo en sus recomendaciones) SIEMPRE debes utilizar la versión ASÍNCRONA del mismo.

• Si utilizas el código asíncrono te aseguras de que el dibujado de la página corra en paralelo a la descarga e interpretación del javascript. El problema es que al ser asíncrono, no podrás nunca llegar a saber con total exactitud cuándo se va a ejecutar y si tienes algún javascript que dependa del que cragaste asíncronamente, puede no funcionar por no encontrarse disponible en el momento de ejecución el javascript cargado en modo asíncrono.

• Las llamadas asíncronas se pueden "diferir" si se controla su carga gestionando el evento window.onload o similares, en el momento en que se vaya a ejecutar algún javascript dependiente, pero en estos casos es mejor utilizar javascript en modo diferido.

Situaciones particulares:

• Todo el código .js que pertenezca a un plugin de cualquier clase (por ejemplo redes sociales) debe ser ejecutado siempre en modo asíncrono. Especialmente cuando es un script cuyas especificaciones del fabricante recomienden instalarlo en el <head> o al principio del <body>.
• La combinación de la utlización de javascripts asíncronos sin dependencias posteriores en el <head> y javascript diferido al final del documento HTML, antes del </BODY> es una combinación que en general ofrece las mejores perspectivas de rendimiento.

Como optimizar la utilización de javascript con llamadas asíncronas: 

Los siguientes pasos que a continuación se enumeran son obligatorios dada su importancia para mejorar el rendimiento neto de una página web.

En el ejemplo anterior, hemos mostrado cómo se hace una llamada síncrona y "lenta" al javascript que ejecuta Google para sus +1 en Google+ (muy presente en muchísimos sitios web y blogs):

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 

Google, al igual que todas las compañías que proporcionan código javascript para sus componentes (como facebook con su "like"  o Twitter con su "tweet"), ofrecen código con ejecución asíncrona de todos sus componentes.

Por ejemplo, Google ofrece la posibilidad de utilizar javascript asíncrono para su +1 y se realiza con el siguiente código que te muestro:

<!-- Inserta esta etiqueta en la sección "head" o justo antes de la etiqueta "body" de cierre. -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'es'}
</script>

<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>

Asi pues, basta con sustituir la llamada que realizabas expuesta anteriormente con esta otra forma que te ofrece Google.

Lo mismo sucede con las llamadas al código de Facebook, de Twitter u otros muchos ejemplos.

Como optimizar la llamada a jQuery de manera asíncrona: 

Llamada asíncrona de jQuery con código inline:

Esta es otra manera de optimizar las llamadas javascript a unos niveles de rendimiento importantes. La idea es lanzar en asíncrono la carga de jQuery y realizar las llamadas posteriores a las funciones dependientes una vez el documento HTML está listo. Esta forma de realizar llamadas te permite ejecutar en modo asíncrono una librería Javascript completa para después una vez se ha dibujado la página y sin perder tiempo en descargas de .js, se ejecuten funciones inline dependientes de la asíncrona.

<html><head>
</head>    <body>        <!-- TODO TU CÓDIGO DEL BODY hasta antes del </BODY> --><script type='text/javascript'>  <!-- EJEMPLO DE CARGA ASÍNCRONA A JQUERY -->(function(){  var bsa = document.createElement('script');     bsa.type = 'text/javascript';     bsa.async = true;     bsa.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js';  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);})();</script>      <script>window.onload = function(){ <!-- CUANDO LA VENTANA ESTÁ CARGADA -->
<!-- LLAMADAS A jQuery CON LA LIBRERÍA YA CARGADA Y LISTA -->jQuery(document).ready(function(e){e(".PRUEBA-1432447472-id").hide();e("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();e(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();e("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function(){e("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");e(this).addClass("tabs-widget-current");e(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();var f=e(this).attr("href");e(f).fadeIn();return false})});jQuery(document).ready(function(e){var f=function(){setTimeout(function(){e("ul.prueba-list li:first").animate({marginTop:"-50px"},800,function(){e(this).detach().appendTo("ul.ticker-list").removeAttr("style")});f()},5000)};f()});
}</script>
    </body></html> 

En este ejemplo hemos llamado asíncronamente a la librería jQuery para después ejecutar una función javascript dependiente de la misma de manera "inline". 

Si quieres profundizar en cómo utilizar el javascript en tu web, no dudes en realizar este tutorial que te ayudará paso a paso a ejecutarlo de la manera más óptima y haciendo que te de su mejor rendimiento: Cómo mejorar el rendimiento de tu sitio web con las hojas de estilo y el javascript.

Para usuarios de Blogger, no dudes en seguir la guía de rendimiento para bloggers, te ofrece paso a paso cómo mejorar el rendimiento de este particular sistema de publicación de Blogs de Google.

Cualquier duda me tienes en los comentarios para lo que necesites.