Optimiser vitesse téléchargement: sprite CSS

WRInaute passionné
En ce moment, on parle beaucoup de la vitesse de chargement des pages avec Google.

J'avais deux feuilles CSS, je n'en ai plus qu'une désormais...
J'ai aussi réduit la taille de mon fichiers JS.

C'est alors que j'ai voulu me mettre aux sprites CSS pour l'affichage de mes icônes. ça m'a pris une bonne journée pour organiser tout cela, mais au final, je suis bien content. J'ai gagné entre 10 et 20 requêtes et quelques Kio, voire plus suivant les pages.

Cela dit, c'est très long à mettre en place suivant le format de votre site.
Je vous donne ici, quelques liens qui m'ont servi dans ma besogne :

:arrow: http://fr.spritegen.website-performance.org/section/what-are-css-sprites
:arrow: http://fr.spritegen.website-performance.org/
:arrow: http://top-news.fr/demos/sprite/sprite.html

J'avais une autre page, mais je ne la retrouve plus.
 
WRInaute occasionnel
Re: Les sprites CSS...

Il y a des générateurs de sprites aussi qui peuvent faire gagner du temps, pour éviter de devoir calculer soi-même les coordonnées de placement des images de fonds.
 
WRInaute passionné
Re: Les sprites CSS...

c'est ce que fait le deuxième lien que j'ai indiqué.

Il te fabrique ton sprite, et te donne le code CSS avec les coordonnées.
 
WRInaute passionné
Re: Les sprites CSS...

C'est ce que je regardais également hier. Il faudrait changer le titre du fil par un truc du genre "Optimiser vitesse téléchargement: sprite CSS"

Sinon, personne va venir le voir ton sujet. 8)
 
WRInaute passionné
Très intéressant.

Merci à vous deux pour les liens.
En revanche je m'interroge sur le réel gain, certes en terme de requêtes cela semble être vérifié mais à moins d'avoir beaucoup d'images et beaucoup de visites ?
 
WRInaute accro
En gros, ca prend du temps à mettre en place et surtout beaucoup de temps lorsqu'il y a de la maintenance pour un gain pas vraiment effectif surtout depuis que les nouveaux browsers peuvent avoir jusqu'à 6 connexions simultanées au serveur.
Il faut l'utiliser à bon escient, l'article parle aussi du cache.
 
WRInaute passionné
Pour la mise en place, dans mon cas, ça m'a pris plus de 10 heures de travail, mais pour la maintenance, c'est plus que rapide.

Si je dois rajouter une icône, je n'ai qu'à changer mes CSS pour les coordonnées nouvelles.
 
Discussions similaires
Haut