Chalalo Land

Optimizando tu Website con CSS Sprites, caso práctico

Una de las Reglas de Oro en el temas de performance, tiene que ver con tratar de disminuir la cantidad de HTTP Request de nuestro sitio web. Para ser más claro, cada vez que se carga una imagen, un archivo Js, un archivo flash, un css, etc, existe una petición al servidor, y como en toda petición hay un proceso de conexión, solicitud y recepción que tiene un costo asociado, sumado a que existen cabeceras por cada petición, no es lo mismo tener que descargar 1 archivo de 100Kb que 10 de 10Kb , ya que este último caso, va a tomar más de 100Kb para su descarga ( y sumémosle el tiempo asociado).

Es aquí en donde nos sirven los CCS Sprites, la idea es similar a la Tabla Ouija, en donde tenemos una “tabla” con todos los símbolos que necesitamos y apuntamos a uno en particular (bueno, en la Ouija son los demoniacos espíritus)

El Caso Práctico

Vamos a tener una barra de menú en nuestra página web, que tiene los siguientes elementos:

El peso total de estas imágenes es  de 128 KB, por otra parte se puede ver una imagen que se llama Todo.png, esta imagen contiene un solo “lienzo” con todas las imágenes individuales que he mostrado. El hecho de que pese menos, sin ser especialista en imágenes, creo que es por la info asociada a la imagen propiamente tal. (Si no estoy en lo correcto, me ayudan) . Sin embargo esto no nos va a detener en nuestro análisis, ya que esto lo consideraremos al momento de obtener los resultados.

Para analizar los cargas y los resultados vamos a utilizar FireBug de FireFox.

Página “Normal” Sin CSS Sprite

Al ejecutar la página, con imágenes independientes vemos que su comportamiento en tema de carga es la siguiente:

Existen 8 HTTP Request, y cada imagen tiene su procesamiento en términos de peticiones. El tamaño final es 125 Kb descargados y la duración es 4.08Seg. Según Firebug, fíjate en la petición del Icono7 siguiente:

Con esto podemos ver que la mayor parte del tiempo, en cada petición de imágenes es más el tiempo de conexión de la recepción de la imagen propiamente tal!

Página con CSS Sprite

Vamos a escribir el estilo que nos va a servir para crear nuestro ejemplo, el siguiente, a grosso modo puedes ver que se visualizan sectores de la imagen, de un ancho de 128px de tal manera de completar el menú completo. Cada uno de estos estilos se los asignaremos a etiquetas span.

<style>
#menu span {
  width:128px;
  height:110px;
  display:inline;
  float:left;
  background-image:url(ejemplo/todo.png);
}
.icono1 { background-position:0 0;}
.icono2 { background-position:-128px 0;}
.icono3 { background-position:-256px 0;}
.icono4 { background-position:-384px 0;}
.icono5 { background-position:-512px 0;}
.icono6 { background-position:-640px 0;}
.icono7 { background-position:-768px 0;}
</style>

En el siguiente código vemos las etiquetas Span y el contenedor DIV que vamos a utilizar.

<div id="menu" style="width:910px; height: 110px;">
  <a href="BLOCKED SCRIPTalert('icono1')" title="icono1">
      <span class="icono1"></span>
  </a>
  <a href="BLOCKED SCRIPTalert('icono2')" title="icono2">
     <span class="icono2"></span>
  </a>
  <a href="BLOCKED SCRIPTalert('icono3')" title="icono3">
    <span class="icono3"></span>
  </a>
  <a href="BLOCKED SCRIPTalert('icono4')" title="icono4">
    <span class="icono4"></span>
  </a>
  <a href="BLOCKED SCRIPTalert('icono5')" title="icono5">
    <span class="icono5"></span>
  </a>
  <a href="BLOCKED SCRIPTalert('icono6')" title="icono6">
    <span class="icono6"></span>
  </a>
  <a href="BLOCKED SCRIPTalert('icono7')" title="icono7">
    <span class="icono7"></span>
  </a>
</div>

Ahora veamos el resultado en FireBug con FireFox.:

Solo dos pedidos, el HTML propiamente tal y luego la imagen, también al igual que en el caso anterior, hay un tiempo de Conexión alto en comparación al de recepción, pero esto se hace solo una vez, el resultado es claro, 109Kb de descarga con un tiempo de 2.12s.

Es decir, un 48% de reducción en el tiempo, claramente no es relevante que sean 16 kb menos, (ya que según ese razonamiento, la de regla de tres simple, el CSS Sprite debería demorar 3.5 seg)

Obviamente se nos viene a la cabeza los image maps, aunque no son aplicables en todas las ocasiones como los CSS Sprites , por ejemplo cuando las imágenes no están físicamente organizadas en la página una al lado de otra, o puedes estar en el header y otra en el footer de la página.

Entonces , para concluir, esta además de otras técnicas que ire posteando en el futuro, son consideradas reglas de oro en la optimización de sitios web, estas reglas no las escribí yo!, si no que las aprendí y quiero compartirlas. De donde las aprendí? Del Libro “High Performance Web Sites”  del maestro Steve Souders, lectura obligada para un Ninja Web.

Espero que te haya servido!
Nos vemos!