Optimiser vitesse téléchargement: sprite CSS

[medium69]

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.

 

[Aaarrrgggh]

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.

 

[medium69]

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.

 

[bee_human]

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)

 

[medium69]

Idée validée

 

[bee_human]

Idée validée

Bon, et bien ça n'attire pas les foules non plus. Pourtant le concept a l'air intéressant. J'étais tombé sur cet article:
http://www.armelpingault.com/2009/10/15/sprites-css/ dans lequel j'ai découvert que google faisait usage des sprites.

 

[5_legs]

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 ?

 

[HawkEye]

Un peu ch* à mettre en place quand on est pas ultra-rigoureux, mais c'est une optimisation très sympa.

 

[bproductiv]

Attention c'est loin d'être toujours un avantage : http://www.smashingmagazine.com/2010/03/26/css-sprites-useful-techniqu ... -nuisance/

 

[medium69]

N'étant pas un ami de Shakespeare, pourrais-tu en détailler un peu le contenu ?

 

[bproductiv]

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.

 

[medium69]

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.