25 November 2010

Rapidez De Tus Páginas Web: Cómo Optimizar El Tiempo De Carga De JavaScript Y Widgets - Parte 2

Aunque sea conocido que saber cómo acelerar tu sitio web debe ser una habilidad fundamental para cualquier webmaster en serio, el nuevo reto es cómo garantizar que un sitio no sea mal ejecutdao después de agregarle widgets, complementos y plugins. Por otra parte, como ya hemos abordado en la Parte 1 de esta guía, Google ha comenzado a utilizar la velocidad de rendimiento de tu sitio para determinar su clasificación en las SERPs. Qué puedes hacer para acelerar tu sitio de modo que estas tecnologías, aunque útiles para ampliar la participación, interacción y participación de los usuarios, no interfieran con el tiempo de carga de tu website?

rapidez_paginas_web_incrementar_velocidad_sitio_web.jpg
Crédito de la foto: Stanely Hong

En la segunda parte de esta guía, aprenderás cómo implementar soluciones que, después de muchas pruebas, ensayos y experimentos, parecen funcionar mejor para este tipo de situación. Por otra parte, las soluciones descritas en detalle en este artículo, que hemos desarrollado para acelerar tu sitio web aplazando la carga de JavaScripts y widgets, son las mismas que hemos adoptado e implementado en MasterNewMedia.org.

La guía, en tanto que dirigida a webmasters y técnicos, está escrito en un lenguaje sencillo y no técnico y puede ser fácilmente entendida tanto por los que necesitan coordinar estas tareas para optimizar el rendimiento del sitio web, como para aquellos que realmente necesitan ejecutarlas.

Aquí está toda la información que necesitas acerca de cómo acelerar el tiempo de carga de tu sitio web, aplazando la carga de widgets y elementos en JavaScript - Parte 2 (Parte 1):

Rapidez De Tus Páginas Web: Como Optimizar El Tiempo De Carga De JavaScript Y Widgets - Parte 2

La razón por la cual la velocidad de tu sitio web debe ser tomada en consideración es la de hacerlo más útil a los visitantes.

En vista de esto, ¿quién dijo que todos los elementos de tu sitio tienen que ser cargados a la vez?

Los usuarios, así como las arañas de Google quieren ver la página cargarse lo más rápido posible. Esto es bueno para la experiencia del usuario.

Haces clic en un enlace, la página carga rápido, todo parece estar bien. El material adicional que aparece en el sitio es - de hecho - adicional.

Se conocen los sitios en los que pasaste el ratón sobre las imágenes cuando las viste a partir del texto del artículo. Empiezas los vídeos de YouTube, tan pronto como los vas siguiendo al texto del artículo.

Puedes cargar el contenido del artículo, que es lo que el usuario está buscando primero y luego cargar más ítems que "le ponen el broche de oro" y mejorar la usabilidad y la experiencia del usuario.

No hay necesidad de cargar el widget de los comentarios en la parte superior de la página cuando el usuario tomará algún tiempo para leer el artículo y luego hacer comentarios al respecto.

Lo mismo ocurre con los botones. Pueden ser cargados al llegarse a ellos, no necesariamente de inmediato cuando se carga la página. Algunos de ellos se pueden cargar sólo con el gatillo del usuario a través de un enlace o un botón.

La teoría detrás de esto es simple.

Los widgets em JavaScript realizan funciones en JavaScript. Estas funciones se pueden activar de varias maneras, incluyendo la acción del usuario como un clic o un mouseover, pero también representan un retraso de tiempo simple.

Este truco retrasan la carga que normalmente se conoce como "carga aplazada de JavaScript".

Esto nos lleva a la siguiente cuestión importante - cómo Google considera este planteamiento a la carga aplazada de widgets.

¿Esto será visto como un problema? De ninguna manera..

Aquí está Matt Cutts de Google, abordando este tema:

Duración: 3' 12''

En resumen, Google ya estaba pensando en esta solución y su implementación.

Una parte clave de este video está alrededor de 1:25:

"...Así que no recomendamos que quiten sus widgets, sean de Facebook o anuncios ni nada de eso porque el servidor remoto está un poco más lento.

Hay muchas maneras de hacer las cosas de forma asincrónica.

Por ejemplo, podemos ver el tiempo que tarda en cargar la página, pero eso no significa que el JavaScript no puede seguir cargando después del proceso de carga.

Por lo tanto, Google Analytics, por ejemplo, ofrece ahora un nuevo fragmento de código JavaScript que no afectará significativamente el tiempo de carga y también es bueno para la experiencia del usuario."

Ahora sabemos que Google respalda esta solución, vamos a la siguiente fase - la aplicación.

El problema es que ninguno de los widgets que existen - por lo menos en la actualidad - están hechos para que se aplace su carga.

Son obligados a funcionar de inmediato a medida que se carga la página.

Esto significa que tenemos que hacer algunos ajustes en el código de los widgets.

Carga Aplazada Vs. Carga Asincrónica

Para entender completamente las soluciones de carga aplazada frente a las soluciones asincrónicas, es importante entender cómo el problema comenzó, antes que nada.

Creo que todos han tenido la experiencia, en un momento u otro, de tener una imagen que se carga sólo en parte. Ves sólo una parte de la imagen y el resto simplemente no aparece (a menos que haga clic en "cargar la imagen").

El JavaScript no entiende por qué está configurado para obtener una confirmación por parte del servidor que indica que el script ha terminado de cargar antes de que el navegador siga cargando la página.

Esto es lo que transforma el JavaScript en un problema. Es como el protagonista del sitio. No deja que se carguen otros elementos hasta que esté completamente terminado.

El JavaScript asíncrono no espera una respuesta del servidor antes de permitir que la página se cargue.

La carga aplazada espera que se termine de cargar la página y después de X segundos (en función del número de segundos que especifiques) ejecuta el código JavaScript, para no interferir con la carga de la página.

Transformar cualquier widget o secuencia de comandos en asincrónico. Sólo tienes que poner:



async="true"

en tag del script.

Así que la secuencia de comandos comienza con:




<script type="text/javascript" async="true" ...

Sin embargo, el soporte del navegador para el valor asíncrono del JavaScript aún no habrá sido totalmente informado.

Otra manera más segura de hacer eso es cambiar el código como en lo siguiente:




<script id="somescript" type="text/javascript">

(function() {

var somescript = document.createElement('script');
somescript.type = 'text/javascript';

somescript.src = ('http://mysite.com/myscript.js');

var s = document.getElementById('somescript');

s.parentNode.insertBefore(somescript, s);

})();

</script>

Por otro lado, el JavaScript está ahí por una razón: hacer que el código JavaScript salga por completo del camino mientras se carga la página.

Los efectos como widgets de comentarios, botones, etc, pueden ser una buena solución ya que permiten cargar la página como si no hubiera archivos externos de JavaScript para cargar.

Así, mientras el visitante lea la página, los comentarios y los botones se cargan en silencio al final del artículo.

¿Qué Tipo de Mejora Puedes Esperar?

Hablando desde la experiencia de MasterNewMedia, hemos llevado a cabo algunas pruebas para ver qué widgets podían ajustarse la velocidad y cuánto se ganaba con ello.

Los resultados fueron incuestionables.

Hemos tomado una página y hecho tres versiones de la misma. La única diferencia fue cómo el widget de comentarios se cargaba.

Una versión se mantuvo intacta, tal cual era, con una carga "normal" de JavaScript.

La otra fue cambiada para la carga asincrónica.

Y la tercera se retrasó la carga en 10 segundos...

Usando el GTmetrix para medir la velocidad después de varias actualizaciones a la página, estos fueron los resultados en promedio:

Aplicando el mismo conjunto de soluciones para todos los elementos de la página de JavaScript, en algunos casos, hemos sido capaces de quitar hasta siete segundos tempo de la carga de la página, aunque, en promedio, esta cifra fue menor, especialmente durante las horas pico de tráfico.

Como se mencionó anteriormente, cuando la red está más congestionada con un gran número de visitantes, los servidores están ocupados y se tarda más en cargar todo en comparación con períodos de tiempo en los que hay menos gente en la red.

Sin embargo, los resultados fueron muy alentadores y la página resultó en realidad mucho mejor.

Haces clic en un enlace, la página se carga tan rápido, a medida que lees el artículo, que no te das cuenta de esos 10 segundos, durante la lectura que la barra de Apture ya está activada, la sección de comentarios también, junto con los botones.

Esto definitivamente mejora la experiencia del usuario.

Todo lo que hicimos fue aplicar la carga aplazada en cinco líneas y widgets y los analizadores de velocidad de la página mostraron que las peticiones externas pasaron de 131 a 81 con tres a siete segundos por página de mejora en la velocidad.

Ya te veo diciendo: "Espera, menos 50 solicitudes externas? ¿Sólo con aplazando cinco líneas y los widgets?"

Sí.

Al subir los scripts y widgets nunca se obtiene sólo una. Todas los "includes o llamadas a otras secuencias de comandos y, a continuación los " includes" traen más "includes" a menudo.

En base a lo que vimos en nuestros experimentos, los guiones de algunos de los comentarios son una pesada carga sobre la carga de las páginas. Algunos de ellos tienen 20 o más llamadas entrantes.

Para el usuario, esto significa que la página va a tardar un poco en cargar, aunque el contenido de los widgets se muestra en la parte inferior del artículo.

Por otra parte, con la carga aplazada, puedes conseguir el efecto de cuando se llega a la página y se tiene una carga instantánea, y mientras que leas el contenido, el JavasScript estará trabajando en segundo plano en la preparación del contenido adicional.

Si ejecutado correctamente, los usuarios no notarán nada, excepto la grata experiencia de tener las páginas con una carga rápida.

Como dijo Matt en el vídeo de arriba, Google Analytics utiliza ahora la carga asincrónica y esto es una buena solución para satisfacer a la mayoría de los webmasters. Muchos otros servicios no tienen esta característica en sus widgets.

Estos scripts y widgets necesitan un código personalizado. La mayoría requiere muy poco, mientras que otros necesitan un poco más de trabajo.

Ejemplos de Aumento en la Velocidad de los Widgets

La barra de Apture

La barra de Apture es uno de los elementos fáciles de ajustar en la carga aplazada.

Antes:
<script id='aptureScript' type="text/javascript" src="http://www.apture.com/js/apture.js?siteToken=[your site token]" charset='utf-8'></script>
Después (con 10 segundos de retraso en la carga):
<script type="text/javascript">

var delay='10'; // Cuántos segundos antes de abrir la ventana

setTimeout('get_js()',delay*1000);

function get_js() {

NewScript.src="http://www.apture.com/js/apture.js?siteToken=[your site token]"

document.body.appendChild(NewScript);

}

</script>
Botón AddThis

Antes:


<script type="text/javascript">addthis_pub = '[your publisher ID]';</script>

<a target="_blank" href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-share.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>


Después:


<script type="text/javascript">addthis_pub = '[your publisher ID]';</script>

<a target="_blank" href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-share.gif" width="125" height="16" border="0" alt="" /></a>



<script type="text/javascript">

var delay='10'; // Cuántos segundos antes de abrir la ventana

setTimeout('get_js()',delay*1000);

function get_js() {

var NewScriptAT=document.createElement('script')

NewScriptAT.src=\"http://s7.addthis.com/js/[number specific to widget]/addthis_widget.js\"

document.body.appendChild(NewScriptAT);

}

</script>
Disqus

Cuando se trata del widget de comentarios de Disqus, la cosa se pone un poco más compleja.

Al momento de escribir este artículo, Disqus está desarrollando una nueva versión de plugin para o Movable Type, por lo que, a su debido tiempo, unnuevo plugin estará disponible para la carga de Disqus de forma asincrónica.

Sin embargo, debemos saber qué podemos hacer mientras se espera por el nuevo plugin.

Disqus (al menos para Movable Type) no es un pedazo de código que se pega en la página, es un plug-in tipo CGI de Movable Type, que va a generar el código JavaScript en cada página en construcción.

Tenemos dos opciones para acelerarlo.
1) Recorta el Plugin del Disqus Para Movable Type

En el archivo disqus.pl, simplemente borra esta línea:
<script type="text/javascript" src="@{[DISQUS_URL]}/forums/$forum_url/embed.js"></script>
y luego, justo antes de la
</body>
utiliza uno de los métodos descritos anteriormente para la carga asincrónica del archivo embed.js.

2) Usa el Código Universal de Disqus En Vez del Plugin de Movable Type

Debes saber una cosa sobre limpiar las instalaciones sin hack y los plugins. Son mucho más fáciles de mantener y actualizar, y muchas personas los prefieren.

En este caso, la opción de no-hacking es mejor por varias razones.

El plugin de Disqus incluye la introducción de la entrada de su código. Esto significa que todo el texto de la introducción de la entrada se incluirá dos veces en su página web.

La primera vez en una página HTML para tus visitantes, y la segunda vez en el DIV oculto generado por Disqus para que el código JavaScript pueda leer el contenido del DIV como una variable.

Si utilizas el código universal de Disqus en lugar del plugin, puedes eliminar este paso y acortar tus páginas web, y luego aumentar la velocidad haciendo clic en el widget de forma asincrónica o aplazado.

El código universal de los comentarios en Disqus es más o menos así:
<div id="disqus_thread"></div>

<script type="text/javascript">

/**

* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
*/

(function() {

var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;

dsq.src = 'http://[your_website_name].disqus.com/embed.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

})();

</script>

<noscript>Habilita el JavaScript para visualizar los <a target="_blank" href="http://disqus.com/?ref_noscript=tx1">comments powered by Disqus.</a></noscript>

<a target="_blank" href="http://disqus.com" class="dsq-brlink">comentarios en <span class="logo-disqus">Disqus</span></a>
En nuestros experimentos, lo hemos reemplazado con el código de la carga aplazada para que quede así:
<div id="disqus_thread"></div>

<script type="text/javascript">
var disqus_url = '<$mt:EntryPermalink$>';

var disqus_title = '<$mt:EntryTitle$>';

</script>

<noscript>Habilita el JavaScript para visualizar los <a target="_blank" href="http://disqus.com/?ref_noscript=tx1">comments powered by Disqus.</a></noscript>

<a target="_blank" href="http://disqus.com" class="dsq-brlink">comentarios en <span class="logo-disqus">Disqus</span></a>

<script type="text/javascript">

var delay='10';

setTimeout('get_js()',delay*1000);

function get_js() {

var NewScript=document.createElement('script')

NewScript.src="http://[tu_sitio_web].disqus.com/embed.js"

document.body.appendChild(NewScript);

</script>
En resumen, desde la perspectiva de la velocidad de carga, el código universal es mejor que el plugin para Movable Type, ya que elimina la duplicación del texto oculto en el DIV de Disqus.

Esto, a su vez, significa que aunque prefieras mantenerte con el código por defecto (carga asincrónica), en lugar del aplazado, todavía tienes el beneficio de una menor y por lo tanto más rápida carga.

Si será más rápido, realmente dependerá del tamaño de la entrada que se ha duplicado.
Widgets de Facebook

Las aplicaciones de Facebook (los comentarios) ya soportan la carga asincrónica.

Si registras una aplicación en http://developers.facebook.com/setup/ en la misma página donde obtienes el ID de la aplicación, etc. verás que la muestra ya contiene el código JavaScript de carga asincrónica.

Más detalles están disponibles en : http://developers.facebook.com/docs/reference/javascript/FB.init

Conclusión

El hecho de que Facebook, Disqus y muchos más ya hayan actualizado sus códigos con la carga asincrónica es una clara indicación de la dirección en que pronto todos los sitios importantes (o que ya están en el proceso del mismo) tendrán que tomar.

La carga asincrónica de JavaScript se está convirtiendo rápidamente en la norma y no la excepción, y pronto se incluirá en el código para copiar y pegar, por defecto, sin necesidad de modificaciones personalizadas.

Sin embargo, puedes utilizar el ejemplo anterior para establecer los widgets y scripts a tu gusto.

Si deseas ir más allá, puedes utilizar la carga aplazada, ya que aporta un ahorro de tiempo extra en comparación con la carga asincrónica.

Cuando se lo aplica a varios scripts y widgets, esto te ayuda a conseguir uno o dos segundos de código de la página y hace que tus páginas sean más rápidas y la sensación es la de mejorar la experiencia del usuario.

Fin de la Parte 2

Rapidez De Tus Páginas Web: Como Optimizar El Tiempo De Carga De JavaScript Y Widgets - Parte 1

Créditos de las fotos:
Rapidez De Tus Páginas Web: Como Optimizar El Tiempo De Carga De JavaScript Y Widgets - Parte 2 - Chris Lamphear
Carga Aplazada Vs. Carga Asincrónica - Aleksandr Ugorenkov
¿Qué Tipo de Mejora Puedes Esperar? - Anton Balazh
Ejemplos de Aumento en la Velocidad de los Widgets - Nagravision
Recorta el Plugin de Disqus Para Movable Type - winterling
Usa el Código Universal de Disqus En Vez del Plugin de Movable Type - Rudat

Drazen Dobrovodski -
Referencia: MasterNewMedia [ Seguir leyendo ]

Si te gustó la nota puedes recibir actualizaciones suscribiéndote via RSS o via email.

O compartirla: