Réduire le temps de chargement d'une page web avec des Sprite CSS

Je vais présenter dans ce tutorial une technique utilisée par les grands sites comme Google, Yahoo et Facebook pour gagner en performance : les "Sprites CSS".

En quoi cela consiste

Et bien c'est simple, cela consiste à regrouper plusieurs images en une seule et unique grande image, appellée "Master Image", et d'afficher les parties désirées en utilisant le positionnement css.

ces images ne vous rappellent rien ? ce ne sont rien d'autre que les images utilisées dans la page de recherche google, le tout en un seul et unique fichier.

Quel est l'interêt ?

Réduire le nombre de requêtes HTTP
imaginons qu'en moyenne, il y'a une 20aine d'images CSS qui sont affichée dans vos pages, vos visiteurs vont télécharger 20 fichiers différents ce qui fait 20 requêttes HTTP, si vous les agrégez en un seul fichier, ça ne fera plus qu'une seule requêtte, sachant que c'est 30 à 100ms qui sont épargnées à chaque fois qu'on agrége une image avec une autre. Si on a une 20aine d'images comme dans l'exemple précédant, c'est entre 0.6 et 2 secondes qu'on peut gagner, avec l'assurence que l’image résultante aura une taille totale inférieure à la somme des petits sprites, même si on laisse de gros espaces transparents entre eux.

Les techniques utilisées :

Aux tout débuts il fallait compter sur son logiciel de retouche d'images préféré et beaucoup de maths, mais avec le temps et qu'aprés que cette technique se soit répondue, de nombreux outils ont vu le jour comme spritegen.website-performance.org/ qui permettent de réaliser tout ça en 2 temps 3 mouvements, dans ce tutorial nous allons reprendre le set d'icône utilisé dans ce même site pour réaliser une "Master Image" à partir de ces icônes.

1. Regrouper les images dans un fichier ZIP (ne doit pas dépasser 0.5 Mo).
2. Se rendre sur le site spritegen.website-performance.org/
3. Séléctionner la langue avec laquelle vous êtes plus à l'aise.
4. Uploader le fichier
   
5. Séléctionnez "ignorer les images dupliquées"
6. Gardez "Largeur" et "Hauteur" à 100% et chochez "Maintenir les proportions de l'image"
7. Pour les options du sprite généré:
   • choisissez d'abord l'alignement des sprites : "Horizental" (les uns à côte des autres) ou bien "Vertical" (les uns en dessous des autres).
   • cochez "Entourer les colonnes pour résoudre le bug d'Opera".
   • Remplissez une couleur de fond ou laisser vide pour transparent (uniquement les gif's et png's)
   • Choisissez le format que vous voulez, pour ma part je préfére PNG
   • Pour le nombre de couleurs gardez "TRUE COLOR", nous vérrons une autre fois comment optimiser un fichier png en se basant sur la pallette de couleurs, ce fera l'objet d'un autre tutorial.
8. Pour les Options des CSS générés :
   • Mettez un Préfixe de CSS si besoin, dans notre cas ce sera ul.links li
   • Préfix de classe : le préfix qui s'ajoutera au nom du fichier pour générer la classe css
   • Suffixe de CSS : comme dans notre cas on utiliser ce sprite pour des liens on met "a".
9. Enfin, cliquez sur "Créer le Sprite et le CSS"
   Voila nous avons notre "Master image" avec tout le css dont nous avons besoin pour positionner nos images
   
10. Cliquez sur "Télécharger l'image Sprite" pour récupérer l'image.
    
11. Puis, rajoutez les lignes suivantes dans le fichier CSS

ul.links li.blog a{ background-position: 0 0; } 
ul.links li.comment a{ background-position: 0 -66px; } 
ul.links li.comment_add a{ background-position: 0 -132px; } 
ul.links li.comment_delete a{ background-position: 0 -198px; } 
ul.links li.comment_edit a{ background-position: 0 -264px; }

12. IMPORTANT : ne pas oublier de rajouter une règle de fond pour référencer notre image Sprite

ul.links li a {
   background: url(links.png) no-repeat top left;
}