Corriger le Layout Shift causé par le dimensionnement automatique des images

Corriger le Layout Shift causé par le dimensionnement automatique des images

Saviez-vous qu'il existe un moyen très simple et assez courant de tuer vos Core Web Vitals avec une seule déclaration CSS ? C'est courant, je l'ai vu maintes fois et cela fera des ravages sur votre CLS.

Le voici : le petit morceau de code qui fera automatiquement se décaler toutes vos images sur la page. Cela provoquera même un Layout Shift lorsque la largeur et la hauteur de l'image ont été explicitement définies ! Même définir la valeur CSS correcte d'aspect-ratio ne résoudra pas le problème !

C'est un petit problème sournois de Layout Shift car il ne se produira que lors des premières visites. Comme vous, en tant que webmaster, aurez probablement l'image dans le cache de votre navigateur, vous ne remarquerez peut-être pas immédiatement le Layout Shift.

Comment avons-nous remarqué le problème ?

Il est difficile de détecter ce genre de problèmes qui apparaîtront surtout pour les nouveaux visiteurs avec des appareils mobiles à faible bande passante. La réponse est le RUM Tracking. Le RUM Tracking suit les Core Web Vitals pour les utilisateurs réels et vous fait un rapport. Le RUM Tracking est excellent pour trouver les problèmes cachés de Core Web Vitals !

Comment cela fonctionne-t-il ?

Ce minuscule morceau de code CSS est parfois utilisé pour les images responsives. Lorsqu'une image n'est pas pré-cachée par le navigateur, celui-ci n'a aucune idée de la largeur et de la hauteur intrinsèques. Avec ce code, il ignorera la largeur et la hauteur définies et essaiera de rendre la page avec la largeur et la hauteur intrinsèques. Comme cela est inconnu, l'image sera d'abord rendue à 0x0 pixels et ce n'est que lorsque l'image aura été téléchargée et décodée qu'elle sera re-rendue et prendra la quantité correcte de pixels.

1. Le height: auto; s'assurera que l'image a toujours la hauteur correcte lorsqu'elle est redimensionnée. 
2. Le max-width:100%; s'assurera que l'image n'est jamais plus large que le viewport visible 
3. La partie width:auto; générera un Layout Shift pour les images non cachées même lorsque vous définissez explicitement la largeur et la hauteur ou l'aspect-ratio.

Comment le corriger ?

La correction est facile. Supprimez simplement le width:auto. Cela forcera le navigateur à utiliser la largeur d'image donnée, et à calculer la hauteur auto basée sur la hauteur. 

Alors faites-vous une faveur, prenez 15 secondes, inspectez une image aléatoire sur votre site web (clic droit, inspecter l'élément) et vérifiez s'il y a width:auto; et height:auto; Si vous le voyez, corrigez-le !