Developpez.com

Télécharger gratuitement le magazine des développeurs, le bimestriel des développeurs avec une sélection des meilleurs tutoriels

Sur mobile
Les Data URI sont 6 fois plus lentes que les requêtes HTTP

Le , par rodolphebrd, Expert confirmé
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 :

Sera converti en Data URI :
Code : Sélectionner tout
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.

Lien vers l’article

Et vous ?

Comment intégrez-vous les images dans vos conceptions ?
Êtes-vous un utilisateur des Data URI ?
Cela changera-t-il votre manière de travailler ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :
Offres d'emploi IT
Développeur WEB PHP F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
RESPONSABLE WEB ANALYTICS F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
Développeur Web FULL-STACK
VACALIANS GROUP - Languedoc Roussillon - SETE (34)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -