Optimisation du Cumulative Layout Shift (CLS)

[saluts92]

Bonjour,
Comme annoncé par Google pour mai 2021, les signaux web essentiels risquent d'être pris plus en plus en compte. Notamment le CLS ( à mon avis).
Pour rappel le CLS n'est pas vraiment un signal de rapidité pure mais plutot de stabilité : combien faut il de temps pour que la page arrête de bouger d'un point de vu utilisateur : cela pour éviter les clics non souhaités (que c'est désagréable de penser cliquer sur un lien, la page bouge, et je clique sur un autre ...)

Je me suis donc penché sur mes pages importantes (qui sont toutes faites de la meme façon) et j'ai environ 0,330 seconde de CLS.
Je sais c'est déjà peu par rapport à la grande majorité des sites, mais je suis dans le rouge quand même.

J'ai identifié que c'est une image de 900x350 pixels en haut de page qui crée cet CLS "énorme"

Après m'être renseigné, j'ai donc rajouté les attributs WIDTH et HEIGHT à mon image pour que le navigateur réserve cet emplacement.
Pour être plus précis j'ai indiqué les dimensions DESKTOP, l'image étant ensuite CSSisé d'un width:100% en dessous de 1080px de largeur d'écran.

Sauf que ça ne change pas grand chose sur Lighthouse, j'ai toujours 0,330 seconde.

Une idée ?

 

[theunholy]

Ce serait plus simple avec une adresse.

 

[saluts92]

envoyé en MP

 

[saluts92]

grâce à @theunholy j'ai pu éclaircir le soucis.

En effet mon action (voir plus haut) a bien porté ses fruits, c'est juste que dans Lighthouse les données de performance semblent sur 28 jours et non pas à un instant T (si quelqu'un d'autre peut valider ça)

 

[WebRankInfo]

et donc dans Google PageSpeed Insights c'était OK ?

 

[saluts92]

et donc dans Google PageSpeed Insights c'était OK ?

oui mais uniquement dans les "données de laboratoire" (qui semble mesurer à un instant T, tu me confirmes ?) je suis descendu à 0.008 s (pour rappel je partais de 0.330 s)

 

[WebRankInfo]

le score CLS n'est pas un nombre de secondes mais un nombre sans unité, entre 0 et 1, une sorte de pourcentage

dans Lighthouse les données de performance semblent sur 28 jours et non pas à un instant T

j'ai fait un test dans Chrome et je n'arrive pas à voir ça

 

[saluts92]

j'ai fait un test dans Chrome et je n'arrive pas à voir ça

pour une meme page, ce matin, mon CLS (pour Ordinateur) est de :
lighthouse (sous Chrome) = 0.28
PageSpeedInsight / "Données de terrain" = 0.67
PageSpeedInsight / "Données de laboratoire" = 0

Lorsque je fais des modifications sur ma page, et que je teste aussitot, le seuil indice qui bouge de manière significative est PageSpeedInsight / "Données de laboratoire"

donc j'en conclue (comme @theunholy ) que les "données de laboratoire" sont les mesures dynamiques.

Un autre avis là dessus svp ?

QUand j'enelve les WIDTH et HEIGHT de mon image, j'ai les mesures suivantes :
lighthouse (sous Chrome) = 0.322
PageSpeedInsight / "Données de terrain" = 0.67
PageSpeedInsight / "Données de laboratoire" = 0.959

 

[saluts92]

le score CLS n'est pas un nombre de secondes mais un nombre sans unité, entre 0 et 1

effectivement, merci, je n'avais pas fait attention à cela, mais j'avais bien compris le principe (voir mon premier message)

j'ai fait un test dans Chrome et je n'arrive pas à voir ça

tu as fais le test avec un site non optimisé depuis 28 jours ?

 

[WebRankInfo]

je l'ai fait avec la home de WRI

 

[saluts92]

je l'ai fait avec la home de WRI

a ce niveau là ta home est sur-optimisé

et si elle l'est depuis plus de 28 jours, c'est normal que tu ne vois pas de différence, non ?

 

[WebRankInfo]

je ne connais pas ces détails, désolé
en tout cas c'est évident qu'il faut indiquer la taille de l'image dans le code source

 

[saluts92]

sinon, l'impact de ma mise à jour est surtout sur Ordinateur
sur Mobile je suis descendu un petit peu mais je reste entre 0.2 et 0.3

cela peut etre normal étant donné que la taille que j'ai donné est celle pour Ordinateur

QUestions :
1/ Comment faite vous pour indiquer une taille (surtout la hauteur) pour mobile pour atteindre un bon CLS alors qu'il y a des dizaines de possibilités de largeur d'écran ? je vois que sur WRI le CLS est très bon alors que les dimensions d'images sont celles pour ordinateur

2/ je ne comprends pas pourquoi dans la GSC/SWE je n'ai pas d'alerte pour le Mobile alors que dans Page speed insight, l'indicateur du CLS est rouge ?


lien intéressant : https://www.abondance.com/20201208-...m_medium=email&utm_campaign=actu-moteurs-1147

 

[WebRankInfo]

pour 1) je pense qu'il faut indiquer la hauteur dans src et lister toutes les images possibles dans srcset selon les tailles d'écran

les dév pourront confirmer, sinon il faut se renseigner sur la gestion du responsive pour les images

 

[saluts92]

lister toutes les images possibles dans srcset selon les tailles d'écran

merci, mais comme mon image est calé à 100% de l'écran en dessous de 1080px, ça veut dire qu'il y a (en exagérant un peu) 1080 possibilités

 

[saluts92]

Retour d'expérience : je n'ai plus de page en "alerte" ou en "amélioration" dans GSC/Signaux Web Essentiels depuis que j'ai mis en place mes optimisations (voir début du POST) : CDFD

Prêt pour MAI 2021

 

[thomasrossignol]

En deux mots, je pense qu'il faut comprendre ce qui influence CLS : pour chaque image, on calcule
1. La proportion d'impact (qui représente en simplifiant le %age du viewport qui est impacté par un élément instable)
2. La proportion de distance (en simplifiant, la distance parcourue par un élément visuel instable)

Le score est la multiplication de ces deux proportions.

Cet article comprend un guide sur comment optimiser CLS, je pense qu'il pourra être utile à ceux qui lisent cette discussion : https://www.kadiska.com/fr/comment-ameliorer-votre-cumulative-layout-shift-cls/

 

[WebRankInfo]

Merci. ça aurait été encore mieux de préciser qu'il s'agit de ton site, pour + de transparence.

 

[saluts92]

je réponds à ma propre question, étant donné que personne ne m'a aidé j'ai été obligé de bosser ;-)

donc pour que le CLS soit à zéro pour une image donnée : il faut absolument indiquer le width et height, puis pour le responsive design (si on n'utilise pas de valeurs définies précisément), on utilise le width:100% MAIS il ne faut pas oublier le height:auto (le plus important)

Egalement, cela fonctionnera si les conteneurs parents de l'image ont eux memes un width de défini (dans le css) : qu'il soit en pixel ou en %

 

[WebRankInfo]

la largeur de l'image aussi doit absolument être définie ? je pensais que c'était uniquement la hauteur

 

[saluts92]

la largeur de l'image aussi doit absolument être définie ? je pensais que c'était uniquement la hauteur

je n'ai pas essayé, mais cela me semble logique, il faut que le navigateur puisse calculer, l'espace qui va être pris, l'un par rapport à l'autre

en effet, en responsive on peut toujours définir le width (le plus souvent proportionnellement), mais très rarement le height

 

[WebRankInfo]

sauf que les décalages concernés par le CLS ne concernent que la hauteur, non ?

 

[saluts92]

ne concernent que la hauteur, non

de mon expérience ça concerne tout ce qui bouge sur la page que ce soit de haut en bas ou de droite à gauche : le but étant que l'affichage de la page doit être stable pour ne pas perturber le visiteur

 

[aMoN12]

sauf que les décalages concernés par le CLS ne concernent que la hauteur, non ?

Test effectué sur un de mes sites, effectivement le CLS concerne le width + height. L'idée c'est de balancer plusieurs versions d'images pour différents devices.

 

[saluts92]

L'idée c'est de balancer plusieurs versions d'images pour différents devices.

ok mais ça ne fonctionne pas si l'image doit être redimensionnée (tu ne peux pax cibler TOUS les devices) et si le CSS n'est pas adapté

après tu peux juste prévoir un device de 340px de large (il me semble que c'est celui qu'utilise "googlebot mobile", mais est ce ou sera ce stable ?