El problema: CSS Sprites mal implementado

El problema con el plugin se da principalmente cuando habilitamos la opción de usar CSS sprites. Los CSS Sprites se utilizan para insertar imágenes en las páginas pero utilizando CSS en vez de las etiquetas <img/> de HTML. El objetivo de hacerlo de esta forma es reducir el número de peticiones HTTP que realiza nuestro navegador al servidor para descargar cada una de las imágenes. Así que combinamos todas las imágenes en una sóla, y por medio de CSS indicamos que parte de ese mapa que hemos creado corresponde a cada imagen.

Además del tiempo de descarga, cada petición HTTP conlleva una resolución DNS, conexión con el servidor y una cola de espera. A medida que aumentemos el número de imágenes y de peticiones al servidor, estos tiempos se irán sumando. Por lo tanto provocarán una demora en la carga de la página. Con los CSS Sprites, descargaremos únicamente un archivo de imagen (el mapa). Esta imagen suele ser algo mayor que la suma de las imágenes que hemos combinado, pero la ventaja es que sólo se realizará una única petición HTTP.

La solución

No he mirado mucho el código del plugin para ver dónde está el problema, pero la solución es clara. Activa la opción de Disable sprite usage for images en la configuración del plugin. Así hacemos que use el método tradicional de usar una imagen por cada servicio web que tengamos habilitado para compartir.

Ten en cuenta que aunque no uses los CSS sprites, el plugin también generará algo de tráfico extra a tus visitantes, por lo que el tiempo de descarga de la página será algo mayor de lo normal. Pero será muchísimo menor que si mantienes habilitados los CSS sprites.

Rendimiento del plugin Sociable

Para comprobar realmente el retardo en la carga de una página que provoca el plugin, os dejo las mediciones que he hecho usando la última entrada publicada del blog para las mediciones.

El tamaño de todos los elementos de la página ha pasado de 191KB a 800KB, es decir, 600KB extras de imágenes descargadas con los CSS sprites habilitados. Con el plugin activado pero deshabilitando los CSS sprites, apenas suponen 5KB de imágenes más.

La página de prueba sin plugin cargaba en menos de 5 segundos. Habilitando el plugin Sociable, el tiempo de carga supera los 6 segundos. Pero con el plugin activado y los CSS sprites habilitados, el tiempo de carga se dispara por encima de 9 segundos. En mi caso, eso supone que tener Sociable activado con CSS sprites duplica el tiempo de carga de una página de mi blog. Con el plugin activado pero sin CSS sprites, el tiempo de carga aumenta en un 30%, pasando de 4,64 segundos a 6,1.

Respecto al número de peticiones HTTP de imágenes, la página sin el plugin realiza 13 peticiones. Activando Sociable pasamos a 25 peticiones, y si habilitamos el uso de los CSS sprites llega hasta 37 peticiones de imágenes.

¿Tú también tienes este plugin instalado en tu blog? ¿Te pasa lo mismo? Me gustaría alguna confirmación para descartar problemas de mi instalación.