en CSS, Performance

CSS Sprites. Mejora el rendimiento de tu web (I)

Con este artículo empezaremos una serie de posts que tratarán de diversas técnicas y consejos que podemos seguir para mejorar el rendimiento y los tiempos de carga de nuestra página web. Y es que el rendimiento de una aplicación web no sólo depende de la programación del lado del servidor, si no también del marcado, el uso que hagamos de hojas de estilo, de imágenes, de nuestra programación javascript… Todos ellos campos que afectan directamente al desarrollador web en su faceta de maquetador/diseñador.

Hoy empezaremos desarrollando una técnica CSS muy sencilla y efectiva: Los CSS Sprites.

La problemática.

Una de nuestras máximas prioridades a la hora de optimizar nuestra aplicación web debe ser reducir las peticiones que ésta hará al servidor una vez el HTML se haya cargado en el navegador del cliente. Cada archivo de hoja de estilos, cada archivo Javascript, cada imagen… cada elemento externo en definitiva, se solicita de forma separada y aumenta por tanto la transferencia y el tiempo de carga, esto resulta obvio. Lo que no resulta tan evidente es que ese aumento no es proporcional a la suma del tamaño de los archivos externos, es decir, la carga de 10 elementos de 5 KB no es igual de rápida que la de un elemento de 50 KB.

Además de sumar los tiempos de transferencia para cada archivo, deberemos sumar por un lado el tiempo que tarda en realizarse la propia conexión+petición+respuesta y el tamaño correspondiente a las cabeceras del archivo. Recordemos, en relación a las cabecera, que éstas se adjuntan a cada petición al servidor y que si, además, nuestra aplicación usa cookies, éstas también se adjuntarán a cabeceras para cada archivo. Podría darse el caso, por ejemplo en un archivo de imagen pequeño, en qué el tamaño de las cabeceras + cookies ¡superara al tamaño del propio archivo!

La solución.

Este sería un claro ejemplo de una técnica antigua retomada para solucionar un problema moderno. Y es que para encontrar el origen de los CSS Sprites debemos mirar atrás hacia los antiguos juegos en 2D ( o los actuales juegos para móviles ), que usaban los “sprites” para las animaciones de sus personajes u otros elementos del juego.

37249-34955.jpg

Como ves, los sprites no eran más que imágenes que contenían a su vez varias imágenes pequeñas, que en el caso de los videojuegos se utilizaban para recrear una animación. En nuestro caso, la solución a las múltiples peticiones para imágenes en nuestras hojas de estilo pasará por el uso de imágenes grandes que contengan a su vez varias imágenes más pequeñas. De esta forma, para mostrar diversos fondos o varios iconos, estaremos realizando una única petición al servidor, con el correspondiente ahorro en tiempo de carga y transferencia.

Implementación.


El “truco” en esta técnica está en el uso correcto del posicionamiento de backgrounds para mostrar sólo aquella parte de la imagen que nos interesa
. Pongamos como ejemplo un menú, en el que queremos mostrar un icono diferente por cada opción.

Nuestro HTML podría ser algo parecido a:


<ul>
<li class="option1">Opción 1</li>
<li class="option2">Opción 2</li>
<li class="option3">Opción 3</li>
</ul>

y para el CSS usaríamos


.option1, .option2, .option3 { padding-left:20px; }
.option1 { background:url(iconos.png) 0 0 no-repeat;
.option2 { background:url(iconos.png) 0 -30px no-repeat;
.option3 { background:url(iconos.png) 0 -60px no-repeat;

Como verás, hemos jugado con el posicionamiento vertical de la imagen para mostrar sólo aquella parte de la misma que nos interesa, la que contiene el icono en cuestión:

37249-34957.jpg               37249-34969.jpg

A partir de aquí podemos aplicar esta técnica de trabajo a muchos otros casos, ya no sólo iconos, sino fondos de imagen, pestañas, u otros elementos gráficos de interfaz.

Es fácil hacerse una idea del ahorro conexiones que podemos conseguir: una página con 20 iconos y 3 fondos de imagen diferentes para distintos contenedores pasaría de 23 peticiones de imágenes desde las CSS a sólo 2: una imagen conteniendo todos los iconos y otra conteniendo los fondos.

Más información.

Post Anterior
Post Siguiente