Optimizando mistrucos.net he detectado que navegando con Firefox la imagen de CSS Sprite el usuario se está bajando varias veces la imagen de CSS Sprite en Firefox (desconozco si es un problema de Firefox o problema de programación en CSS).
¿Qué es CSS Sprite?
Es una técnica que que descubrí hace unos años que permite agrupar imágenes de la web en una y así evitarse las otras peticiones http. Ejemplo de imagen en CSS Sprite
He encontrado el problema utilizando la herramienta Yslow de Firefox (también se puede mirar en Internet Explorer gracias a Fiddler). Este problema en concreto sólo pasa con Firefox.
Un 32% de usuarios que utiliza mistrucos.net utiliza Firefox. Esto quiere decir que un porcentaje alto de usuarios les está pasando este problema.
Este problema está provocando varias cosas:
- El usuario que navega en mistrucos.net con Firefox se está bajando la imagen más de siete veces , lo que quiere decir que visiona mistrucos.net más lentamente que otro que lo haga con Internet Explorer.
- El coste del ancho de banda de mistrucos.net sube mucho por culpa de este problema, ya que mistrucos.net está sirviendo imágenes absurdamente al 32% de usuarios.
El problema es por cómo está programado el CSS. Para cada clase que utilizo la imagen de CSS Sprite hago referencia a ella.
Ejemplo:
.logo
{
background:#fff url('/i/grouped.png') no-repeat -0px -0px;
height:38px;
width:300px;
}
.tab{background:transparent url('/i/grouped.png');background-position:-302px -1px;height:35px;float:left;padding:0 0 0 5px;overflow:hidden;}
Para resolverlo hemos de crear una clase madre de Sprite y que todas tengan su nombre:
.sprt, .logo,.tab,.end,.sel_end,.t_o, .t_o_end,.a_r, .imgrss
{
background:#fff url('/i/grouped.png') no-repeat 0px 0px;
}
.logo
{
height:38px;
width:300px;
}
.tab{background-position:-302px -1px;height:35px;float:left;padding:0 0 0 5px;overflow:hidden;}
Así es cómo quedan las peticiones después de programar correctamente el CSS de mistrucos.net:
