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.
Antes:
Tipo
| Cantidad
| Peso
|
| HTML/Text | 1 | 4.4K |
| JavaScripts | 4 | 78.1K |
| Css | 2 | 5.9K |
| CSS Images | 3 | 12.0K |
| Images | 7 | 7.2K |
Total
| 17
| 107.6K
|
Después:
Tipo
| Cantidad
| Peso
|
| HTML/Text | 1 | 4.4K |
| JavaScripts | 2 | 62.1K |
| Css | 1 | 6.2K |
| CSS Images | 3 | 5.4K |
| Images | 1 | 0.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!