Avoir un site qui répond rapidement, c’est fondamental.
Le problème, c’est que faire un site qui réponde rapidement, c’est pas si simple que ça.
Beaucoup de facteurs entrent en compte :
- La qualité du système serveur, logiciel et matériel
- L’architecture des serveurs
- La bande passante, achetée chez l’hébergeur
- La bande passante, chez le client
- Les caches, qui interviennent à différents niveau (de la base de données au cache réseau type Akamai)
- La structure et le contenu de la page web
Quand le navigateur doit afficher une page, il doit en fait faire plusieurs requêtes pour aller chercher les différents éléments de la page.
Si la page est composé de 30 images, le navigateur va faire 30 requêtes, une par image.
D’ou la solution, de regrouper les images, pour diminuer très fortement le nombre d’images à charger.
Ensuite, c’est au niveau du CSS qu’on défini la zone de la grande image qu’on veut afficher.
Typiquement, on utilise cette méthode pour les images du ‘template’ (bordures, boutons, …).
Autre avantage très important pour cette méthode : elle permet de gérer les différents états d’un bouton très proprement, puisque ces différents états sont pré-chargés à l’affichage de la page. Quand le bouton doit changer d’état (clic souris par exemple), l’affichage de la nouvelle image est instantanné, parce qu’il n’y a pas de requête pour aller chercher une nouvelle image.
Qui utilise ce type de technique ? Amazon par exemple…
Oui il existe même un générateur de sprites (c’est comme ca que cette technique s’appelle) en ligne : http://spritegen.website-performance.org/
Il existe aussi un livre chez O’Reilly sur ce genre de techniques pour optimiser les performance de son site web: http://tr.im/qIXs .
Ce livre brosse toutes les techniques d’optimisation, et certaines sont extrêmement simple.
@Alban> Merci pour ces éléments complémentaire !
C’est un des sujets traités, entre autres, par Paris Web 2008 l’année dernière au mois d’octobre sur la partie optimisation des sites web en général…http://www.paris-web.fr/2008/
Les premiers que j’ai vu utiliser cette technique c’est Google, au niveau des pages de résultats. Voici l’image utilisée : http://www.google.com/images/nav_logo6.png
Le sprite est définitivement la solution propre pour optimiser le temps de chargement d’une page.
Il y a de l’information à foison sur ce sujet
– http://www.alistapart.com/articles/sprites
– http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
La nouvelle version du site de EA est exemplaire à ce niveau. (http://www.ea.com/)
Exemple:
http://ll-319.ea.com/static/u/f/eaonline/eaw/portal/css/assets/sprites/gus_elements.png
Merci pour cette piqûre de rappel 😉
Eh bien, moi, je ne la connaissais pas cette technique. Merci François
@All> Merci à tous pour ces infos complémentaires
@Capitaine> You’re welcome ;). Le web est un espace tellement grand, qu’on en apprend tous les jours !
Egalement Dailymotion, Youtube…
Prestashop le fait aussi. En tout cas pour ce qui est des boutons.
tres instructif
merci pour vos posts !