Web 2.0 Tips

Uno de factores importantes para la rápida carga de un sitio web, desde que el cliente o browser se conecta al servidor hasta que se renderiza la página web es la cantidad de peticiones (o requests) hechas al servidor, y es que hay que tener en cuenta que una vez cargado el documento principal (el que contiene el html en si), se deben descargar las imágenes, las  hojas de estilo y demás archivos complementarios, todos necesarios para que el resultado final sea mostrado tal cual se diseñó.

El tema es simple, cada elemento complementario pedido al servidor tiene un tiempo de conexión, un tiempo de latencia y un traspaso de meta-información que componen la cabecera de estas peticiones, aparte tenemos que tener en cuenta que por regla los browsers o navegadores web solo harán 3 peticiones simultaneas por dominio y hasta 9 por IP, así que si reducimos estas conexiones vamos a tener una carga mas rápida. Una de las formas de reducir el número de peticiones es usando los llamados CCS Sprites.

La ténica de CSS Sprites es simple pero practica, solo hay que agarrar esas pequeñas imágenes que seguro usamos para hacer esquinas en los elementos de nuestra página, ponerle un ícono a las categorías de un listado y etc. Estas imágenes suelen ser muchas pero pesar muy poco, si tenemos por ejemplo 10 imágenes de 4KB cada una, estamos generando 10 conexiones al servidor para bajar algo relativamente liviano, es mas fiable tener una imágen de 40KB que 10 de 4KB, si juntáramos esas 10 imágenes en un gran mapa de imágenes logramos esto, de eso se trata la técnica, pero ¿por qué CSS Sprites?, y acá es cuando el CSS entra en juego, ya que este cumplirá el papel mas importante, que será a la hora de mostrar esas imágenes.

Antes que nada hay que cambiar, si la tenemos, la costumbre de usar los tags img dentro de listados o items con íconos, por ejemplo:

<ul>
   <li><img src="images/home.gif" />Home</li>
   <li><img src="images/diskette.gif" />Descargas</li>
   <li><img src="images/lupa.gif" />Busquedas</li>
</ul>

Esto está mal, hace el código mas pesado y menos legible, a la vez perdemos control sobre la visualización mediante hojas de estilo, lo que nos dificultará hacer cambios mas adelante, en este caso la mejor practica es:

<ul id="menu">
   <li class="home">Home</li>
   <li class="descargas">Descargas</li>
   <li class="busquedas">Busquedas</li>
</ul>

Y desde CSS:

#menu li {padding-left: 20px}
     #menu.home {background-image: url(/images/home.gif);}
     #menu.descargas {background-image: url(/images/diskette.gif);}
     #menu.busquedas {background-image: url(/images/lupa.gif);}

Ahora, esto esta bién pero seguimos usando muchas imágenes, que es lo que queremos evitar, así que una vez que unamos todas esas imágenes en una sola, solo deberemos especificar en que parte de la imágen se encuentra la imágen que queremos poner al lado de la palabra en este menú.

En este caso les muestro un mapa de imagenes real que usamos en la empresa donde trabajo:

Aca se pueden observar como todos los iconos usados en una web, desde los iconos del menú, hasta iconos de botones de ordenamiento o hasta los del control de un slider, ahora para que los elementos li (por ejemplo) tomen a una de estas imagenes de fondo, debemos especificarle el archivo de mapa como archivo de fondo y obviamente la posición dentro de este mapa, un ejemplo para el html anterior sería:

#menu li {padding-left: 20px}
     #menu.home {background: transparent url(/images/mapa.gif) left 0px no-repeat;}
     #menu.descargas {background: transparent url(/images/mapa.gif) left -21 no-repeat;}
     #menu.busquedas {background: transparent url(/images/mapa.gif) left -42 no-repeat;}

En este caso, definimos el background un poco mas completo, espesificando el color de fondo (en nuestro caso transparente), el archivo de imágen, y la posición desde donde arrancar ese fondo, y al final como es lógico, no-repeat ya que no nos interesa que se repita a lo mosaico el fondo dentro del elemento.

Una forma mas corta, y clara también podría ser definir las opciones del fondo a todos los elementos li dentro del menú. y luego solo modificar lo que los hace únicos, la pocición del fondo:

#menu li {padding-left: 20px; background: transparent url(/images/mapa.gif) no-repeat;}
     #menu.home {background-position: left 0px;}
     #menu.descargas {background-position: left -21;}
     #menu.busquedas {background-position: left -42;}

Muchas páginas actualmente usan esta técnica, que no es muy difícil de aplicar, y mucho menos de implementar si hacemos algún proyecto de cero, y nos ahorra mucho tiempo del lado del cliente, siempre y dependiendo obviamente del como está realizado el sitio.

No hay tips relacionados.