Regrouper les images pour un site e-commerce plus rapide

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…

11 commentaires

  1. 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 😉

  2. @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 !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.