À partir de quelle taille de fichier cela vaut-il la peine d'implémenter des images en tant que Data URI?
Comme le titre l'indique, il est bon d'implémenter de petites images telles que des URI de données directement dans le code source HTML, comme des CSS en ligne (URL de l'image d'arrière-plan) ou avec img src habituel. Mais à partir de quelle taille de fichier cela vaut-il?
Pour répondre à cette question d’abord un peu d’arrière-plan: HTTP fonctionne sur TCP. Lorsque le navigateur ouvre une connexion, il envoie un paquet TCP avec la requête HTTP au serveur. Parce que TCP a TCP slowstart , le serveur peut au plus renvoyer 10 paquets, ce qui totalise 14 Ko au navigateur. Après cela, il doit attendre un accusé de réception du navigateur avant de pouvoir envoyer des paquets supplémentaires.
Donc, si vous voulez que le navigateur puisse afficher rapidement une page, vous devez vous assurer que tout ce dont il a besoin tient dans 14 Ko.
Maintenant, de quoi un navigateur a-t-il besoin pour commencer le rendu? Cela commence évidemment avec HTML. Mais si la page nécessite des fichiers CSS, elle ne commencera pas à restituer quoi que ce soit (elle affichera simplement une page vierge) avant que les fichiers css soient téléchargés et analysés. Le javascript synchrone est une autre chose qui bloque le navigateur.
Donc, si vous voulez qu'une page soit très rapide, assurez-vous de tout renvoyer dans la première réponse et même dans les 14 premiers Ko de la réponse. Cela signifie l'inclusion de CSS dans le code HTML. Si vous pouvez rendre le chargement javascript asynchrone, s'il doit être synchrone, faites-le aussi tard que possible dans la page. S'il doit être synchrone et dans la tête, il doit également être en ligne.
Maintenant, déterminez la taille du HTML avec les CSS en ligne (et peut-être javascript). Assurez-vous de déterminer la taille du fichier compressé.
Maintenant, pour répondre à votre question: si vous avez maintenant de la place, vous pouvez insérer de petites images en tant que data-uri. Assurez-vous simplement de garder le total gzippé inférieur à 14 Ko.
REMARQUE: en tant que technique d'optimisation du chemin critique, l'inclusion peut devenir obsolète à mesure que HTTP/2 devient la norme et que les serveurs Web commencent à prendre en charge SERVER-Push.