Aliviar el peso de las redes sociales...

Actualizado en Noviembre 2012. Categoría: Blog

Usa el icono para acceder a las secciones del artículo.

Introducción

Las redes sociales tienen ventajas obvias en la promoción e interacción de sitios WEB pero también tienen su impacto en el rendimiento.

Todo contenido afecta a la experiencia de usuario y la entrada en escena de las redes sociales y sus widgets[1], que permiten integrar funciones de estas redes con el contenido de tu WEB, puede llegar a tener un impacto muy importante en la experiencia de usuario.

Es bastante común ver esta integración entre red social y los contenidos de la WEB (lo puedes ver en este BLOG), por ejemplo con botones para promocionar el contenido que te gusta de un sitio o para entablar debate de opinión alrededor del contenido de un site pero...

¿Cómo consigo que esas ventajas no acaben con la experiencia de usuario de mi WEB?

¿Es posible?

Bueno, en realidad sólo hay una forma de eliminar el lastre que producen en nuestras WEBs...¡quitarlos!...Por suerte, hay diferentes formas de minimizar el impacto sobre el rendimiento y seguir beneficiándonos de sus ventajas.

En esta entrada de BLOG nos centraremos en los botones de "me gusta" (en adelante widget) en sus diferentes variantes de Twitter, Facebook y Google+1, aunque las técnicas que se comentan son aplicables a otros botones del estilo.

Para entender las técnicas hay que empezar por cómo funcionan estos widgets. Resumiendo mucho, se puede decir que es contenido de la red social al que dejas un hueco para su ejecución, es decir, se muestra en tu WEB pero no lo generas ni lo alojas, es un préstamo.

Conociendo su naturaleza nos podemos aproximar a como reducir su impacto en el rendimiento de nuestra WEB. Un widget de este tipo no consume tu ancho de banda ni lastra tu hospedaje, pero sí afecta mucho a cómo llega la WEB a tus usuarios. Pongamos un ejemplo:

Un BLOG como podría ser este mismo, con 3 widgets de redes sociales por cada entrada, tendría 30 widgets con 10 entradas (un ejercicio de matemática avanzada). Cada widget hace una petición y presenta un contenido. No es raro que esos 30 widgets, por ejemplo, superen con creces el tamaño de nuestra WEB y que retrasen considerablemente la carga de la misma.

Entonces, ¿qué hago con ellos?, lo que se hace con todo lo malo, se pone donde menos moleste (entendiendo la maldad en términos de rendimiento). Esto en el mundo WEB se traduce en retrasar su ejecución para que tenga lugar cuando el resto del contenido esté cargado y mostrado, o como dirían los angloparlantes del otro lado del atlántico, poner detrás del critical path, como siempre los US Citizens crean un concepto de impacto gráfico evidente, lo crítico es que se muestre el contenido y después de ello se podrá comentar sobre él en las redes sociales.

Entremos en materia, si a partir de aquí alguien se pierde es culpa mía seguro:

Centrándonos en los widgets más comunes:

Boton de Twitteo, si quiero que aparezca en mis entradas de BLOG o en mis artículos debo introducir código que me proporciona Twitter (+ información aquí):

<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];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Botón de facebook, si quiero poder comentar mi contenido en facebook (+ información aquí):

Esto en plan general:

<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>

y esto por cada contenido:

<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>

O esto en cada contenido sin parte general:

<iframe src="//www.facebook.com/plugins/like.php?href&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Botón Google+1, si me interesa que mi contenido sea comentable en la red social de Google, debo introducir el siguiente contenido (+ información aquí):

Esto en el contenido a mover en la red social G+1:

<g:plusone size="medium" annotation="inline"></g:plusone>

Esto una vez en tu aplicativo:

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})(); </script>

Resumiendo, un lío de código que pegado tal cual genera un tráfico interesante y puede retrasar en exceso la ejecución de nuestra WEB.

Hay que admitir el esfuerzo que han hecho las redes sociales en aliviar un poco esa carga, el código que se utiliza ahora es mucho menos pesado y sobre todo la forma de ejecutarlo se ha mejorado bastante en relación a hace 6 meses. Por ejemplo, ahora todos los botones tienen la opción de lanzarse en modo asíncrono, o lo que es lo mismo, que no hagan esperar al resto del contenido.

La primera recomendación es usar estos botones en sus versiones recientes (las que se comentan aquí) y no las versiones anteriores que tenían más impacto en el rendimiento.

La segunda recomendación es casi una reflexión, poco se puede hacer con el tamaño de estos widgets (adelgazar un poco el código que los genera), es algo que controla la red social, pero se puede elegir dónde y cuándo cargarlos, ahí es donde está el mayor factor de mejora, en la percepción.

Consejos prácticos de qué hacer con ellos (sin borrarlos):

  1. Asociar su carga a un evento tardío del navegador, por ejemplo en el evento onLoad (cuando el navegador cree haber terminado con la carga de la WEB). Con esta opción los widgets se cargan todos pero lo hacen tras acabar el Critical Path y ya debería estar todo el contenido presente y visible (en páginas con poco javascript suele ser cierto). No se soluciona el problema de la carga, pero, al menos, el usuario no lo nota.
  2. Si la WEB tiene mucho javascript es posible que sea interesante asociar la carga de estos widgets a la finalización del resto del código, si por ejemplo, el código se estuviese lanzando detrás del onLoad. La técnica es la misma, la implementación algo diferente.
  3. Asociar su carga a un evento creado por el usuario, es decir, cuando pulse un botón, cuando pase por encima del contenido, etc. Esto no es siempre posible o no cuadra con el diseño del interfaz.
  4. Minimizar el número de ellos, por ejemplo, en las entradas del blog no mostrarlos en el resumen de entradas, solo en el detalle, en el típico "leer más", así solo habría uno a la vez y lastraría poco la WEB, es una técnica cobarde pero puede ser útil si el resto no son aplicables.

Si habéis llegado hasta aquí y os ha gustado....usad esos widgets que tanto nos hacen sufrir para que lo sepamos...y no, no hay premio pero haremos otras entradas con ejemplos concretos de como materializar esas técnicas en diferentes casos.