Logo Des Geeks et des lettres

sitemap

Pour les lecteurs qui m'ont demandé

la liste de tous les articles :

Ici le plan du site

Vous cherchez à surfer sur internet de manière anonyme ? Sur Des Geeks et des lettres nous vous conseillons le VPN Hide My Ass (voir ici notre test)

CSS Sprites : une technique pour accélérer le chargement des pages Web

C’est quoi ?

Le terme “CSS Sprites” signifie le fait de combiner plusieurs images en une seule et des les récupérer individuellement avec le langage CSS.

Cela veut dire en clair qu’au lieu que le navigateur ait à télécharger quatre images de coin par exemple, vous créez une image qui contient les quatre comme ça le navigateur n’aura qu’une seule image à télécharger.
Ensuite il nous suffit de récupérer individuellement chacune des images en utilisant la propriété “background-position” des feuilles de style CSS.

Pourquoi faire ?

L’utilisation d’images sur les pages d’un site web est à priori un plus, les icônes et boutons font jolis et une belle image de fond fait toujours bonne impression. Cependant il faut savoir que le navigateur fait une requête HTTP pour chacune des images à récupérer.

C’est ce nombre important de requêtes HTTP par page qui est en partie responsable des lenteurs rencontrées sur le chargement d’un site web, en les réduisant nous soulageons notamment les utilisateurs ayant une faible connexion à Internet.

Les navigateurs actuels permettent entre 2 et 4 requêtes HTTP en parallèle vers le même serveur, si la page contient de multiples images elles seront alors téléchargées séquentiellement ce qui ralentit le chargement de la page.

Construire une grille d’images où l’on stockerait tous les boutons, les éléments de navigation, les différents états (initiaux et survolés) associés aux liens, etc. dans un seul fichier image est une des meilleurs solutions pour réduire considérablement ce nombre de requêtes HTTP et donc les problèmes de lenteurs au chargement de vos pages imagées.

Comment faire ?

  • Soit nous faisons tout à la main en créant nous même notre grille d’images avec un éditeur d’images et en calculant la position de chaque image dans la grille mais cela est très fastidieux :

  • Soit nous utilisons des outils gratuits en ligne qui nous permettent de faire ce travail : nous donnons les images et le site nous donne la grille d’images finale ainsi que le fichier CSS contenant les positions de chaque image ; à ce sujet voici quelques liens qui pourront vous aider :

  1. CSS Sprites Generator : http://csssprites.com/
  2. Sprite Me : http://spriteme.org/
  3. SmartSprites : http://csssprites.org
  • Dans tous les cas voici le genre de résultat attendu qui devra être injecté  dans votre page web :

Un exemple de fichier css avant

Le fichier css après

Attention

C’est une bonne pratique, quoi qu’il en coûte en terme de temps, mais il est vrai que sur des sites avec peu de trafic cela ne vaut peut-être pas le coup.

Par contre le sites qui ont un trafic important et dont les pages sont affichées des milliers de fois, cela devient très intéressant en terme de gain de temps en chargement, les plus grands sites en terme d’influence utiliserait à peu près tous cette technique (Yahoo, Google, Digg, CNN, Amazon, Apple, etc.).

Liens utiles

http://www.phpied.com/css-sprites-generation-tool/
http://www.alistapart.com/articles/sprites
http://css-tricks.com/css-sprites/

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

{ 4 commentaires… J’ajoute le mien }

  • Greg 10 décembre 2009, 20 08

    D’ici à ce que ce blog ait besoin de cette technique… (:D)

    Discutez
  • PouPou 10 décembre 2009, 22 10

    Merci pour ce petit truc que je ne connaissais pas et qui est plutôt pas mal :)

    Discutez
  • Mimie 5 août 2010, 13 01

    Article intéressant sur developpez.com expliquant en détail et simplement le fonctionnement : Création facile et utile de Sprites CSS.

    Discutez
  • Greg 26 mars 2013, 0 12

    En effet, je redécouvre ce que tu dis, ça a l’air tentant.

    Discutez

Vos participations


six − = 2

Article suivant:

Article précédent:

Coup de pouce

Recherche

Derniers Commentaires

  • Greg { Oui , un VPN simule en effet votre présence dans le pays de votre choix. } – 23 juil, 22:46
  • hassna { Bonjour; D'abord, je voudrais bien vous remercier pour cet excellent travail: facile à comprendre, clair... } – 23 juil, 4:03
  • Greg { Alors, Rom ? Ca a donné quoi ton essai ? } – 22 juil, 19:02
  • Greg { +1 pour le côté qualitatif du public Facebook. } – 22 juil, 19:02
  • Greg { Merci pour le retour, c'est vrai que pour la prochaine fois j'y penserai. } – 22 juil, 18:59
  • Murielle { Vous avez raison, Facebook influe sur le référencement naturel, d'autant plus que les algorithmes des... } – 16 juil, 15:16
  • Kromm { Bonjour, Comparatif tres interessant. Mais avec un peu plus de precision sur le stuff, pour... } – 15 juil, 16:13
  • Rom { j'essaye ça ce soir ! c'est magnifique !! le rêve, un trio : phalange, grele... } – 08 juil, 14:27
  • Greg { Pour cela, tu dois activer l'interface personnalisable, et tu auras accès à toutes les compétences... } – 08 juil, 12:36