ALOJAMIENTO&HOSTING » Optimizando peticiones HTTP con CSS



Optimizando peticiones HTTP con CSS

// Septiembre 30th, 2007

Me he dado sin querer de bruces con una ingeniosa técnica que nos puede ayudar a no sobrecargar nuestro servidor. Se trata de utilizar los css para evitar hacer execesivas peticiones http. La he encontrado en Sigt.

La idea primordial consiste en juntar varias imágenes para que en lugar de una porción por imagen sólo se haga una por el mayor número de imágenes juntas. Él nos pone un ejemplo muy ilustrativo con iconos. Utiliza una sóla imagen con varios iconos (estas imágenes por separado harían muchas peticiones aunque enviarían poquísimos datos). Él lo ha hecho así:

Si antes llamaba a una imagen de esta manera:
XHTML:

Código de la fecha

CSS:
.fecha {
background: url(img/fecha.gif) no-repeat left center;
}
Ahora lo haremos igual pero el CSS será:
.fecha {
background: url(img/icon-set.gif) 0 -16px no-repeat;
height: 16px; width: 16px;
}

Como ves la idea es indicar con los valores negativos del css qué parte de la imagen se muestra. Espero que os sea útil.


Tagged Optimización

Leave a Comment