Optimiser les images pour les Core Web Vitals

Comment les images peuvent-elles affecter les Core Web Vitals ?

Les images jouent un rôle important dans l'amélioration de l'attrait visuel d'un site web, mais elles peuvent aussi avoir un impact significatif sur sa vitesse de chargement. Les Core Web Vitals sont un ensemble de métriques que Google utilise pour mesurer l'expérience utilisateur d'un site web, et l'optimisation des images est un facteur critique pour obtenir de bons scores. Dans cet article, nous discuterons de la manière d'optimiser les images pour les Core Web Vitals et d'améliorer la vitesse de chargement de votre site web.

Quels Core Web Vitals les images peuvent-elles affecter ?

Vous pourriez être surpris d'apprendre que les images peuvent affecter tous les Core Web Vitals. Les images, si elles sont mises en file d'attente pour le téléchargement tardivement lors du rendu ou si elles sont simplement trop volumineuses, entraîneront généralement un score LCP élevé. Si les dimensions de l'image ne sont pas définies ou changent pendant la phase de chargement, les images peuvent également affecter le score CLS. Et enfin, si le décodage de l'image prend trop de travail sur le fil principal, elles peuvent même affecter l'INP. Regardons de plus près :

Largest Contentful Paint

L'un des Core Web Vitals est le Largest Contentful Paint (LCP), qui mesure combien de temps il faut pour que le plus grand élément sur la page (comme une image ou une vidéo) devienne visible pour l'utilisateur. Si une image est mise en file d'attente trop tard ou prend trop de temps à charger, cela peut ralentir considérablement le score LCP de la page.

Cumulative Layout Shift

Un autre Core Web Vital est le Cumulative Layout Shift (CLS), qui mesure à quel point le contenu d'une page se décale pendant son chargement. Les images peuvent provoquer des décalages de mise en page si elles ne sont pas correctement dimensionnées ou si elles sont insérées dans la page après qu'elle a déjà chargé, provoquant le déplacement d'autres éléments .

First Input Delay et INP

Enfin, les images peuvent également impacter le troisième Core Web Vital, l'INP, qui mesure le temps qu'il faut pour qu'une page réponde visuellement après qu'un utilisateur interagisse avec une page. S'il y a trop de grandes images qui doivent être décodées, la page peut prendre plus de temps pour répondre aux interactions de l'utilisateur, conduisant à un mauvais score INP.

Étape 1 : Optimiser l'élément image HTML pour la vitesse

Attribut Src

Spécifie l'URL de l'image. Cette propriété est essentielle, car elle indique au navigateur où trouver l'image.

Attribut Width et height

Spécifie la largeur et la hauteur de l'image en pixels. Ces propriétés sont importantes pour rendre l'image correctement sur la page, car elles définissent la taille du conteneur de l'image et comment l'image s'adapte à l'intérieur.

Attribut Alt

Spécifie un texte alternatif pour l'image si elle ne peut pas être affichée. C'est important pour l'accessibilité, car cela aide les utilisateurs malvoyants à comprendre de quoi traite l'image. C'est aussi important pour le référencement (SEO), car les moteurs de recherche utilisent le texte alt pour comprendre le contenu de l'image.

Attribut Loading (chargement différé)

Spécifie comment le navigateur doit charger l'image (lazy, eager, ou auto). Cette propriété est importante pour améliorer la performance de la page, car elle permet aux images d'être chargées de manière asynchrone et seulement lorsqu'elles sont nécessaires.

Attribut Srcset

Attribut Sizes

Attribut Decoding

Attribut Fetchpriority

L'attribut fetchpriority spécifie la priorité de la récupération d'une ressource par rapport aux autres ressources sur la page. L'attribut priority peut avoir l'une des trois valeurs : "high", "medium", ou "low". Une ressource avec une priorité haute (high) est chargée avant les ressources avec des priorités moyenne (medium) ou basse (low). Une ressource avec une priorité moyenne est chargée avant les ressources avec une priorité basse. Les ressources avec la même priorité sont chargées dans l'ordre où elles apparaissent dans le HTML.

Étape 2 : Assurez-vous que l'image est mise en file d'attente pour le téléchargement le plus tôt possible

La deuxième chose à faire, après avoir optimisé le html, est de regarder la planification des images. Dans de nombreux cas, le plus grand goulot d'étranglement, quand il s'agit d'images affectant la métrique LCP, est la planification tardive. Si un navigateur a une chance de télécharger l'élément LCP tôt pendant le processus de rendu, l'image sera disponible pour le navigateur le plus tôt possible et le navigateur peut commencer à peindre cet élément tôt dans le processus de rendu.

Ça semble simple, non ? Eh bien, comment nous assurons-nous que l'image est mise en file d'attente pour le téléchargement le plus tôt possible.

Précharger l'élément LCP

Le moyen le plus efficace d'assurer un téléchargement précoce est de précharger l'image. Le préchargement de l'image se fait avec une simple balise au début de l'élément <head>. Par exemple :

<link rel="preload" as="image" href="image.jpg">

Cette simple balise dira au navigateur que nous aurons besoin de "image.jpg" assez bientôt et le navigateur commencera à télécharger ce fichier immédiatement.

Charger en mode Eager l'élément LCP

Utiliser fetchpriority high

Si, pour une raison quelconque, vous ne pouvez pas précharger l'élément LCP, assurez-vous au moins que l'élément a l'attribut fetchpriority défini sur high. Cela indiquera au navigateur que cette image est importante pour la page et le navigateur la téléchargera avec une haute priorité. Veuillez noter que l'utilisation de fetchpriority="high" n'est généralement pas aussi efficace que le préchargement d'une image !

Éviter le chargement différé basé sur JavaScript

Étape 3 : Assurez-vous que l'image est téléchargée aussi vite que possible

La troisième chose à faire est de vous assurer que vous ne gaspillez pas de précieuses ressources réseau sur des images qui sont plus grandes qu'elles ne devraient l'être. Vous pouvez faire cela en utilisant des images réactives, en utilisant la compression et en utilisant de nouveaux conteneurs d'images plus rapides

Images réactives

Compression d'image

Nouveaux conteneurs d'images plus rapides

Les images sont souvent l'une des plus grandes ressources sur une page web, et elles peuvent ralentir considérablement la vitesse de chargement d'une page si elles ne sont pas optimisées. Des conteneurs d'images plus récents et plus rapides, tels que les formats WebP et AVIF, peuvent aider à réduire la taille de fichier des images sans sacrifier leur qualité. Cela signifie qu'elles peuvent être chargées plus rapidement, ce qui peut améliorer la vitesse de chargement de la page.

Étape 4 : Éliminez le Layout Shift !

Les images qui changent de taille pendant qu'elles chargent causeront un layout shift (décalage de mise en page). C'est aussi simple que cela. Il y a 3 raisons principales pour lesquelles les images causent un layout shift (il y en a beaucoup plus en fait, mais ces 3 sont les plus courantes)

1. Dimensions d'image manquantes

2. Problèmes de style

Habituellement, on empêche les images de devenir plus grandes que la fenêtre d'affichage par une simple astuce CSS

img{\r\n   max-width:100%;   height:auto;\r\n}

C'est une excellente astuce et vous devriez l'utiliser. Malheureusement, je vois régulièrement des variantes de cette astuce qui causent un layout shift. Par exemple en ajoutant width:auto :

img{\r\n   max-width:100%;   height:auto;\r\n   width:auto;\r\n}

Cela fera rendre n'importe quelle image avec une largeur et une hauteur auto. Cela signifie généralement que le navigateur rendra l'image à 0x0px avant que l'image n'ait été téléchargée

3. Espaces réservés (Placeholders)

Certains scripts de chargement différé basés sur JavaScript utilisent des espaces réservés. Si vous utilisez une sorte d'astuce CSS comme celle mentionnée ci-dessus max-width:100% et height:auto, alors la hauteur auto de l'espace réservé carré ne correspondra pas à la hauteur de l'image. Fondamentalement, l'image sera d'abord rendue avec l'espace réservé carré à 720x720 et quand l'image finale aura été téléchargée, elle sera rendue à 720*180

<img 
  src="1x1placeholder.png" 
  data-src="hero.png" 
  width="720" 
  height="180"
  style="height:auto;max-width:100%"
>

Étape 5 : Protéger le fil principal (main thread)

La prochaine chose à s'assurer est que pas trop d'images ne sont décodées sur le fil principal en même temps. Habituellement, ce ne sera pas un problème mais je l'ai vu arriver de nombreuses fois sur des pages de liste de produits (où parfois jusqu'à 500 images sont en compétition pour les ressources !).

L'astuce est d'ajouter decoding="async" à toutes les images pour s'assurer que ces images peuvent être décodées sur un fil séparé. Essayez aussi d'éviter qu'autant d'images soient décodées toutes en même temps en ajoutant loading="lazy" à toutes les images en dessous de la ligne de flottaison et cachées.

Étape 6 : Choisissez la bonne stratégie pour chaque image !

Stratégies d'image pour l'élément LCP

L'élément LCP est généralement l'élément visuel le plus important. Nous devons donc vraiment prioriser celui-ci."

1. Préchargez l'image tôt dans le head de la page avec ce code : <link rel="preload" as="image" href="path-to-img.png">
2. Dites au navigateur que cette image ne doit pas être chargée en différé en définissant loading="eager" ou en omettant l'attribut loading
3. Indiquez au navigateur que cette image doit être téléchargée avec une haute priorité en utilisant fetchpriority="high" (si vous préchargez l'image, vous pouvez sauter cette partie)
4. Définissez decoding="sync" puisque cet élément est si important que nous voulons le décoder sur le fil principal

Stratégie d'image pour les logos et autres images visibles (non-LCP)

Les images visibles devraient être chargées assez tôt pendant le chargement de la page mais de préférence après l'élément LCP. Nous pouvons y parvenir en préchargeant l'élément LCP. Cela donnera à ces images visibles leur ordre de téléchargement naturel et correct.

1. Dites au navigateur que cette image ne doit pas être chargée en différé en définissant loading="eager" ou en omettant l'attribut loading
   
2. Définissez decoding="async" puisque cet élément peut être décodé en toute sécurité hors du fil principal !

Stratégie d'image pour les images en dessous de la ligne de flottaison

Toutes les images en dessous de la ligne de flottaison devraient être chargées en différé (lazy loaded). C'est aussi simple que cela ! Il n'y a pas d'exceptions !

1. Dites au navigateur que cette image doit être chargée en différé en définissant loading="lazy"
   
2. Définissez decoding="async" puisque cet élément peut être décodé en toute sécurité hors du fil principal !

Éviter les images d'arrière-plan

Si vous utilisez des images d'arrière-plan, vous devez reconsidérer. Les images d'arrière-plan ne peuvent pas être chargées en différé et vous ne pouvez pas contrôler la propriété decoding et vous ne pouvez pas définir le fetchpriority. Les images d'arrière-plan ne sont généralement pas réactives, ce qui vous coûtera probablement beaucoup de bande passante. Mais le plus important, les images d'arrière-plan sont généralement découvertes après que le navigateur a téléchargé les fichiers CSS. Ce n'est presque jamais le bon moment pour déclencher un téléchargement d'image !

Vous pouvez utiliser des balises d'image normales en combinaison avec le CSS object-fit:cover pour faire en sorte que les images normales se comportent comme des images d'arrière-plan !