Sur une page web classique, chaque élément (image, icône, fichier de police de caractère ...) nécessite une nouvelle connexion au serveur pour télécharger l'élément en question. Ceci ralentit naturellement l'affichage de la page.
Il existe actuellement 3 techniques pour réduire le nombre de requêtes:

• Les sprites : consistent à grouper plusieurs petites images ou icônes en une seule;
• SPDY : ce protocole développé par Google permet de télécharger plusieurs éléments en parallèle, et en une seule connexion, mais il n'est actuellement supporté que par Chrome;
• Les data URIs.

Les data URIs sont comme leur nom l'indique des URIs, mais au lieu d'indiquer où télécharger les données, elles intègrent les données directement. Par exemple, pour une image, au lieu d'utiliser une URL classique:

<img src="mon_image.png">

On pourrait utiliser la data URI suivante:

<img src="data:image/png;base64,R0lGODlhEAAOALM...">

Cette technique possède cependant des inconvénients:

• Elle n'est pas supportée par Internet Explorer 7 et plus anciens (soit environ 8% des navigateurs actuellement utilisés);
• L'encodage Base64 est environ 40% plus gros que le fichier d'origine.

Heureusement, si la compression gzip est utilisée, l'encodage Base64 est alors environ 9% plus gros que le fichier d'origine.
La technique des data URIs peut également être utilisée dans les fichiers CSS. Vu leurs inconvénients, un bon compromis consiste justement à utiliser les data URIs pour encoder tous les petits fichiers, comme les icônes par exemple, utilisés dans une CSS.
J'ai créé un script (datauri.php) qui permet de faire la conversion automatiquement: Le script va lire le fichier style.css et remplacer les éléments plus petits que 10KB par une data URI, économisant ainsi chaque fois une connexion au serveur. Le résultat est sauvé dans style.out.css. Le paramètre -r (root) est nécessaire pour que le script puisse trouver le fichier si le fichier CSS utilise des URLs absolues.
Vous pouvez télécharger le script sur mon blog: Réduire le nombre de requêtes grâce aux data URIs
Les questions et commentaires sont naturellement les bienvenus!

Code et article intéressant.
Sur des sites Web à fort trafic, il serait instructif de comparer l'impact de cette technique et la mise en place d'un serveur statique dédié aux ressources (ou d'un CDN).

Effectivement... personnellement j'utilise cette technique et en plus d'un serveur Varnish...

Sur une page web classique, chaque élément (image, icône, fichier de police de caractère ...) nécessite une nouvelle connexion au serveur pour télécharger l'élément en question. Ceci ralentit naturellement l'affichage de la page.

Une bonne politiques de cache suffit et tes images seront charger qu'une fois,
la ta page va être très lourde donc t’accélères pas le site tu le ralenti ...

Effectivement... personnellement j'utilise cette technique et en plus d'un serveur Varnish...

Ah yes. Avec un ou plusieurs Varnish en frontal et notamment grâce à l'ESI, tu peux déjà encaisser 90% de la charge... Donc les ressources statiques ne constituent plus que la cerise sur le gâteau, si on peut dire...

Sur une page web classique, chaque élément (image, icône, fichier de police de caractère ...) nécessite une nouvelle connexion au serveur pour télécharger l'élément en question. Ceci ralentit naturellement l'affichage de la page.

Une bonne politiques de cache suffit et tes images seront charger qu'une fois,
la ta page va être très lourde donc t’accélères pas le site tu le ralenti ...

+1, le bypass du cache pour les ressources statiques n'est pas une bonne idée pour améliorer les performances (elle est basée sur la fausse bonne idée de minimiser le nombre de requêtes HTTP pour les éléments liés à la page, hors le coût de la connexion n'est pas si grand qu'on le croit puisque de nos jours tous les serveurs web gèrent le keepalive - et que des protocoles de négociation de contenu "rapides", tels que HTTP 2.0 ou SPDY, font leur apparition). Sans oublier l'inconvénient majeur de se retrouver avec des ressources illisibles et inéditables directement...

Par contre, ce post est un joli moyen de faire de la pub pas chère à son blog pour une boucle et un base64_encode().

Par contre, ce post est un joli moyen de faire de la pub pas chère à son blog pour une boucle et un base64_encode().

je rajouterai que valider son site accélère aussi l'affichage

http://validator.w3.org/check?uri=http% ... ne&group=0

Pour des sites a vraiment fort trafic, l'idée n'est pas de bypasser le cache mais plutôt de le cumuler aux autres techniques d'optimisation. Le varnish, l'ESI et une gestion de cache efficace sont une bonne solution pour encaisser de gros flux de visiteurs.

Quant au fait qu'il profite du forum pour se donner de la visibilité Web, quel problème quand le contenu a de l'intérêt ?

Quant au fait qu'il profite du forum pour se donner de la visibilité Web, quel problème quand le contenu a de l'intérêt ?

+1

Bonjour à tous!

Merci Thibaultd pour cette super technique.
Je vais l'essayer pour la création de mon site.