Les sprites CSS pour réduire le nombre de requêtes envoyées au serveur Web

Pourquoi réduire le nombre de requêtes.

L'une des métriques qui reflètent les performances d'un site ou application Web est le nombre de requêtes que le client envoie au serveur. En effet, si un document demandent beaucoup de ressources (comme les images, fichiers CSS, fichiers de polices...) alors, au moment de son chargement, autant de requêtes que de ressources seront envoyées au serveur Web. Un grand nombre de requêtes peut provoquer des latences remarquables susceptibles de compromettre l'expérience de l'utilisateur, et par conséquent, la manière avec laquelle les moteurs de recherche (comme Google) perçoivent le contenu.

Les sprites CSS

La technique des sprites CSS consiste à regrouper plusieurs images dans un même fichier. Ce dernier est intégré en guise d'arrière-plan du container voulu. Ensuite on applique le style background-position pour afficher la partie souhaitée de l'image.

Les sprites CSS sont très utiles surtout pour les petites images, les miniatures ou les icons, et ça permet un gain de ressources remarquable, qui a des effets immédiats sur les performances du site Web.

Passons à la pratique