Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par rodolphebrd

0PARTAGES

3  0 
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:[][;charset=][;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 ?

Une erreur dans cette actualité ? Signalez-le nous !