GRATUIT

Vos offres d'emploi informatique

Développeurs, chefs de projets, ingénieurs, informaticiens
Postez gratuitement vos offres d'emploi ici visibles par 4 000 000 de visiteurs uniques par mois

emploi.developpez.com

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
Responsable protection des données H/F
Safran - Ile de France - Magny-les-Hameaux (78114)
Ingénieur développement fpga (traitement vidéo) H/F
Safran - Ile de France - 100 rue de Paris 91300 MASSY
Architecte systèmes études & scientifiques H/F
Safran - Ile de France - Vélizy-Villacoublay (78140)

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