Introduction
Tout est parti d’un article de Christian Fauré : Le cloud computing est nécessairement du green computing en réaction à un article du NY Times à propos de la consommation d’énergie produit par les sites Internet. Je ne m’attarderai pas là dessus, je vais surtout parler d’un système utilisé par des sites comme Google et Facebook pour, à mon avis et d’une manière générale, gagner en performance.
Cette technique s’appelle l’Images Sprites ou le CSS Sprites, au choix. Cette technique consiste à réduire le nombre d’images d’un site en incorporant celles-ci au sein d’une seule image. On utilise ensuite la feuille de style CSS pour afficher ce que l’on souhaite en fonction de la class de l’élément HTML.
Démonstration
Imaginons que je souhaite afficher à un endroit un picto correspondant à un lien “Ajouter” sur mon site, et à un autre endroit un picto correspondant à un lien “Supprimer“. La première chose à faire est d’ouvrir votre éditeur d’images préféré et de réunir vos images en une seule, ce qui donne :
Dans mon exemple chaque picto fait 16 pixels par 16 pixels. Pour afficher la deuxième image, je devrai donc décaler mon offset de 16 pixels. Ce qui donne comme code CSS ceci :
a.ajouter, a.ajouter:hover{
background:#fff url(path/to/icons.png) 0px 0px no-repeat;
display:block;
height:16px;
width:16px;
text-indent:-9999px;
overflow:hidden;
}
a.supprimer, a.supprimer:hover{
background:#fff url(path/to/icons.png) -16px 0px no-repeat;
display:block;
height:16px;
width:16px;
text-indent:-9999px;
overflow:hidden;
}
Je force la hauteur et la largeur à 16 pixels, et je décale de 16 pixels le background pour l’image delete. L’attribut overflow:hidden permet de ne pas avoir un mauvais affichage du surlignage et text-indent permet de déplacer le texte du lien hors de l’écran. Il faut ensuite dans votre code html, spécifier la class des éléments HTML auxquels vous voulez voir attribuer chaque picto :
<a class="ajouter" href="#ajouter">Ajouter</a>
<a class="supprimer" href="#supprimer">Supprimer</a>
Voilà le résultat (j’ai mis display:inline-table pour mon exemple) :
Ajouter | Supprimer
Heureusement pour vous, il existe un outil en ligne qui vous permet de ne pas avoir à produire tout ça à la main : CSS Sprite Generator. Pour l’utiliser, vous devez zipper toutes vos images et les lui fournir. Une fois que vous avez remplit correctement les informations d’offset, tailles et autres options CSS pour vos images, l’application web se chargera de produire votre image finale ainsi que la CSS qui correspond.
Explication
Unique image de la page de résultats d'une recherche.
Alors pourquoi faire ça ? Et bien, pour gagner en rapidité ! Lorsque vous affichez une page web, un nombre plus ou moins important de requêtes HTTP (demandes au serveur) sont effectuées afin de récupérer tout ce qui est nécessaire à l’affichage de la page. Une image représente une requête HTTP. Plus il y a de requêtes, plus le chargement de la page s’alourdit. Pour savoir comment réduire le nombre de requêtes HTTP, je vous conseille de lire (en anglais) cet article de Tenni Theurer publié sur le blog Yahoo! User Interface : “Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests”. Voici un extrait :
Table 1 shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the users browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.
Et quand on voit que Google ou Facebook, pour ne prendre que les deux sites probablement les plus visités sur Internet, utilisent cette technique, on se doute que cela leur permet d’économiser de précieux kilo octets de transfert (que ça soit en taille de requête, mais aussi en temps de latence ou en nombres de requêtes comme cité dans le paragraphe au-dessus). Et si vous souhaitez tester votre site et voir ce que vous pouvez optimiser, je vous conseille ce site, parmi d’autres : Web Page Analyzer.
