La spécification de dimensions d'image explicites aide-t-elle les performances du site?
J'ai effectué des audits sur une nouvelle application Web que nous sommes sur le point de lancer. Chromium suggère, dans l'utilisation du réseau, que quelques images sur notre site n'ont pas de dimensions hauteur/largeur explicitement déclarées.
Cela aidera-t-il vraiment la performance? Mis à part le fait que le navigateur n’a pas à décider comment afficher l’image et à se faire dire d’utiliser une hauteur X et une largeur Y pour une image, en quoi cela peut-il aider "l’utilisation du réseau"?
Tout autre commentaire à ce sujet serait apprécié!
Cela n’aidera que les performances du navigateur individuel. Cela n'augmentera en rien l'utilisation du réseau. Lorsque le navigateur affiche le code HTML, il commence à allouer et à espacer les objets. S'il dispose d'instructions explicites sur la manière d'allouer l'espace, la mise en page est analysée tandis que l'image continue à se charger en arrière-plan. Avec les vitesses de téléchargement à large bande modernes, cela pose de moins en moins de problèmes, mais cela reste perceptible. Si vous avez déjà consulté une page contenant de nombreuses images (http://www.skysports.com/ par exemple) qui ne définit pas explicitement la taille des images, vous remarquerez que la page saute et saute au fur et à mesure que les images sont chargées. dom et le navigateur actualise l'interface pour compenser la nouvelle taille. Avec le dimensionnement d'image explicite, cette expérience instable est éliminée. Cependant, dans de nombreux sites de gestion de contenu, la taille de l'image ne peut pas être explicitement connue à tout moment, de sorte que ce comportement peut être inévitable.
Si vous connaissez la taille de l'image, vous n'aurez aucun mal à la placer, même si vous ne voyez aucun gain "réel" non plus.
EDIT - comme autre test, vous pouvez l’essayer avec 2 pages différentes en utilisant le texte "lorem ipsum" enroulé autour d’une grande image (environ 4 Mo?). Comme il n’existe aucun moyen réel de chargement rapide de l’image (à moins qu’elle ne soit mise en cache), vous devriez remarquer une différence de comportement d’affichage entre les pages explicites et non explicites.
Je ne connais pas les gains de performances réels, mais cela aide le temps de peinture du navigateur, ce qui donne l'impression que l'application semble plus rapide à l'utilisateur. Ne sous-estimez pas une interface utilisateur plus vivante en termes de perception de votre application.