Pour ou contre les data URIs : quelques chiffres
Posté le Saturday 30 June 2012 | Catégories : (x)HTML, CSS, HTML5, Optimisation
L'utilisation des data URIs pour réduire le nombre de requêtes nécessaires à l'affichage d'une page web semble actuellement très controversée. Voici donc quelques tests pour y voir plus clair.
Le premier test comporte une simple page web, une feuille de style CSS et une petite icône. Comme on peut le voir sur le screenshot ci-dessus, le téléchargement de la page nécessite 192ms. L'icône seule nécessite 23ms. Elle est pourtant très petite (moins d'1KB) et son téléchargement est donc très rapide, mais simplement l'envoi de la requête nécessite 22ms, malgré l'option keep-alive.
En utilisant un data URI, la feuille de style est naturellement un peu plus lourde, mais on économise une requête. Au final, la page s'affiche donc un peu plus rapidement: en 169ms.
Cas extrême
Le deuxième cas est réellement extrême: la page web et la feuille de style comportent 200 icônes, issues du set famfamfam.
Sans data URIs, l'affichage nécessite 2,06s. Il est également intéressant de remarquer que Chrome lance le téléchargement de toutes les icônes en parallèle, ce qui n'est pas le cas des navigateurs plus anciens. Par contre, le serveur devant traiter 200 requêtes instantanément, les dernières icônes mettent un peu de temps pour arriver...
Avec les data URIs, le CSS est de nouveau plus gros : 193KB non compressé. Cependant, le temps nécessaire pour afficher la page est malgré tout plus court : 806ms, dont 130ms pour télécharger la feuille de style. Le reste est utilisé pour décoder les icônes.
Un cas plus réaliste...
Cette fois-ci, la page et la feuille de style comportent 20 icônes. Ce n'est pas forcément la réalité, mais ça s'en approche probablement un peu...
Sans data URIs, l'affichage nécessite 375ms.
Avec data URIs, l'affichage nécessite 199ms.
Conditions du test
Pour les différents tests:
- Les fichiers se trouvaient sur un serveur distant (donc pas en local);
- Le serveur et le navigateur utilisaient la compression gzip et keep-alive;
- La connexion internet était une classique ADSL 5Mbit;
- Pour chaque test, le cache du navigateur était vide (donc comme un visiteur qui arrive pour la première fois sur votre site).
Conclusion
Les data URIs ne sont pas la seule solution pour réduire le nombre de requêtes et accélérer l'affichage d'un site web. D'autres possibilités existent, comme les sprites, les Content Delivery Networks (CDN), le protocole SPDY (pour Chrome), une utilisation intelligente du cache navigateur etc.
Les data URIs ne sont pas non plus supportées par Internet Explorer 6 et 7.
De plus, si la feuille de style comporte beaucoup d'icônes, mais que la page n'en affiche que quelques unes, cette technique aura pour effet de ralentir l'affichage!
Cependant, dans certains cas, cette technique semble bien être une méthode intéressante pour accélérer un site!
