sábado, 7 de marzo de 2009

Optimización de webs I: Css sprites, Reducción de Javascripts y Css Compression

Css Sprites es una técnica que consiste en combinar tantas imagenes de la página como sea posible en una de sola, y luego usar las propiedades de background-position de css para colocar cada imagen en su sitio.

Con esta técnica se consigue reducir el numero de peticiones, y además, con un poco de maña también se puede llegar a reducir el tamaño global de las imagenes.

A modo de ejemplo utilicé esta técnica, además de la compresión de javascript y compresión de css en una de mis páginas, meteo.onaliva.net con el siguiente resultado.
Antes:
Tipo
Cantidad
Peso
HTML/Text14.4K
JavaScripts 478.1K
Css25.9K
CSS Images312.0K
Images77.2K
Total
17
107.6K
Después:
Tipo
Cantidad
Peso
HTML/Text14.4K
JavaScripts 262.1K
Css16.2K
CSS Images35.4K
Images10.03K
Total
9
79.0K











Como se puede ver, el tamaño global de los ficheros de la página se ha reducido un 30% aproximadamente, y el número de peticiones se ha reducido a casi la mitad.

Inicialmente utilice esta web que te facilita el proceso de creacion de los sprites, pero no contento con el resultado, termine haciendo los sprites a mano, consiguiendo un mejor resultado.

En este ejemplo quizá el usuario no notaría una gran mejora en la experiencia navegando por la pagina, pero en webs donde puede haber hasta 50 imagenes para los menús, imagenes de fondo... etc, esta mejora seria muy notable.

Un ultimo apunte, para comprimir los javascript existen varios metodos (packer, jsmin, ... etc ) y hay una web donde podemos comparar compressores y el rendimiento dado por cada uno antes de decidirnos por uno.

En la web de meteo.onaliva.net utilice packer, que aunque no es del todo seguro ( pero comprobe que no daba problemas en varios browsers ), comprime mas.

En el proximo post hablare de Optimización de recursos de apache, hasta la proxima!

No hay comentarios: