Sur mobile, les Data URI sont 6 fois plus lentes que les requ�tes HTTP
Sur mobile, les Data URI sont 6 fois plus lentes que les requ�tes HTTP
En tant que d�veloppeur web vous �tes cens�s conna�tre une r�gle d�or en terme de performances en web design : g�n�rer un minimum de requ�tes HTTP surtout sur plateforme mobile o� les temps de latence �lev�s repr�sentent la norme.
Vous devez savoir que les Data URI (Uniform Resource Identifier) sont consid�r�s comme des bonnes pratiques dans le domaine des performances web en r�duisant ces requ�tes.
Les Data URI permettent d�embarquer les images directement dans le code HTML ou dans la feuille de style en les encodant en une cha�ne de caract�res.
Utilis�es pour des images de petite taille, les Data URI permettent aussi d'encoder du texte, des fichiers audio et vid�o, etc.
Elles se pr�sentent sous ce format : data:[<type -MIME>][;charset=<encodage>][;base64],<donn�es>.
Il vous faudra passer par un convertisseur en ligne qui transformera votre image en cha�ne de caract�res.
Ainsi le logo de Developpez.com ci-dessous :
http://www.developpez.net/forums/pic...pictureid=1478
Sera converti en Data URI :
Code:
data:image/jpeg;base64,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
Vous pouvez donc imaginer la surprise de Peter McLachlan lorsqu�il a d�couvert, en mesurant les performances de centaines de milliers de pages sur mobile, que le chargement d�images via Data URI �tait en moyenne 6 fois plus lent qu�en utilisant le chargement d�une ressource externe.
Dans son article Peter McLachlan :
- commente l�usage des images via Data URI et les images n�cessitant des requ�te HTTP ;
- analyse les r�sultats de ses exp�riences ;
- sugg�re les futures bonnes pratiques concernant l�utilisation des Data URI dans le cadre de l�optimisation lors de la cr�ation de sites en version mobile.
L�gende du graphique :
- affichage d�images sur navigateurs mobile : requ�te HTTP contre Data URI ;
- 5 essais, image de 17,6kb, le temps le plus faible �tant le meilleur ;
- couleur verte : affichage par requ�te HTTP ;
- couleur bleue : affichage par Data URI ;
- axe des ordonn�es : temps moyen en ms.
Sans bannir l�utilisation de Data URI l�auteur conseille d�une part de les employer avec pr�caution et de privil�gier le concept des sprites.
:fleche: Lien vers l�article
Et vous ?
:fleche: Comment int�grez-vous les images dans vos conceptions ?
:fleche: �tes-vous un utilisateur des Data URI ?
:fleche: Cela changera-t-il votre mani�re de travailler ?
