Le CLS, pour Cumulative Layout Shift, est une note donnée parmi les critères des Core Web Vitals que vous pouvez retrouver après une analyse sur l’outil Google PageSpeed Insights. Le CLS mesure le décalage des éléments pendant la mise en page. Si un élément bouge pendant que l’utilisateur interagit ou non et que cela risque potentiellement de dégrader son expérience, Lighthouse (l’outil de mesure derrière GPSI) augmentera (négativement) votre note de CLS.
Dans ce guide, nous explorerons le CLS, nous verrons comment le comprendre, l'analyser puis l'améliorer pour éviter les décalages et optimiser l'expérience utilisateur.
C’est quoi le Cumulative Layout Shift (CLS) ?
Un changement de mise en page se produit chaque fois qu'un élément visible change de position d'une frame à l'autre, situation qu'il faut éviter :
CLS, c'est lorsque vous êtes sur le point de cliquer sur un lien, que la page entière se déplace et que vous cliquez sur un autre lien à la place. C'est quand vous êtes à mi-chemin d'un article de blog, qu'une annonce se charge et que vous perdez le fil. En clair, c'est quand la mise en page change. Du moins, c'est ce qu'il essaie de faire : mesurer les performances de votre site en analysant ces changements, la fréquence à laquelle ils se produisent et l'irritation que cela pourrait provoquer chez l'utilisateur.
Comprendre la note CLS de Google PageSpeed
Il peut être frustrant de comprendre ces concepts plutôt simples sans pourtant comprendre pourquoi GPSI vous donne une note élevée CLS, sachant qu'il n'est pas toujours possible de visualiser les problèmes. Effectivement, en fonction de votre connexion, par exemple si vous êtes fibré, il est possible qu'une page se charge instantanément et donc vous vous demandez pourquoi l'outil Lighthouse (l'outil derrière GPSI) vous donne une si mauvaise note. Il existe aussi d'autres raisons, comme un décalage des éléments de mise en page qui peut être terminé avant de défiler la page. Vous ne pouvez donc pas toujours tout voir sans utiliser d'outil.
Pour cela il existe de nombreux moyens d’analyser le CLS frame par frame pour mieux visualiser les éléments concernés. C’est ce que nous allons voir juste après.
Les outils pour comprendre et mesurer le CLS
S’il existe de nombreux outils SEO pour mesurer et comprendre votre CLS, pour moi le meilleur reste webpagetest.org. Il permet d’effectuer des analyses avancées grâce aux nombreux paramètres disponibles que vous pouvez détailler avant de déclencher les tests, chose impossible sur GPSI par exemple. De plus, il est plutôt agréable à prendre en main comparé à des outils très techniques comme New Relic.
1. Google PageSpeed Insights
Je vous déconseille de choisir l'outil Google PageSpeed qui induit plus souvent en erreur qu'autre chose. Cependant, plus le temps passe et plus l'outil est perfectionné, notamment pour l'analyse des métriques INP et LCP, rien ne vous empêche donc de commencer par cet outil. Le fait que la liste de tous les éléments soit plutôt sympathique pour les novices ou ceux qui ont la phobie des interfaces plus nerds, est un vrai plus.
Je tiens tout de même à préciser que GPSI effectue des tests depuis des emplacements en « Europe » (oui c'est vague) et avec une mauvaise connexion (3G slow). Ainsi il est souvent très peu utile de prendre en compte les notes qu'il attribue. Il vaut plutôt mieux voir les problèmes de layout qu'il a détectés, qui eux ne changeront pas. Effectivement le score en lui-même attribué à un élément de layout est moins important à prendre en compte.
2. Chrome DevTools
Si GPSI n'est pas très précis, le navigateur Chrome est équipé d'une fonctionnalité pour analyser plus profondément votre CLS. Incluse de base dans le navigateur sans mise en place particulière, il vous suffira de faire un simple clic droit puis d'appuyer sur « Inspecter ». Ensuite, rendez-vous dans l'onglet « Performances », puis cliquez sur la petite icône de mise à jour ou utilisez le raccourci Ctrl + Shift + E afin de internet/monetiser-site/generer-trafic/">générer une analyse détaillée de votre site internet.
Voici ce que ça donne. Les éléments encadrés en rouge sont ceux qui impactent le Largest Contentful Paint et qui vont nous intéresser.
Pour commencer, cochez « Signaux Web ». Ensuite plongeons-nous dans le 2ème cadre, celui des captures d'écran et images frame par frame. Il vous permettra de visualiser pas à pas les décalages potentiels influençant le CLS de votre page. En revanche, il faudra regarder plus en détail le graphique car les captures d'écran ne se font que pour la 1ère mise en page, c'est à dire que le CLS après défilement ou les changements de hauteur largeur ne seront pas visibles ici.
Vous avez également plusieurs curseurs avec pour nom « LP » pour Layout Shift vous indiquant précisément en millisecondes qu'un événement a déclenché un décalage de mise en page, utiles pour la mesure performances :
Enfin, en cliquant sur les boîtes nommées « Layout Shift », Chrome vous fournira plus de détails spécifiques que vous pourrez utiliser :
Après avoir cliqué sur une boîte, il est également possible de passer sa souris sur le résumé (locations) pour visualiser concrètement l'élément concerné :
Note : Nous n'avions pas vu cet élément sur les screenshots frame par frame, mais c'est relativement logique puisque l'on peut voir que le score CLS pour cet élément est relativement faible. Il est donc très peu perceptible à l'œil nu, même avec des screenshots frame par frame.
3. webpagetest.org
Je vous conseille vivement d’utiliser WebPageTest, plus souvent précis et également souvent plus facile à digérer que Chrome DevTools. De plus, vous pouvez choisir une location précise pour vos tests, et même une tester la vitesse du site de connexion exacte et plein d’autres choses. Vous pouvez ainsi créer des tests beaucoup plus proches de la réalité en prenant en compte la réalité de vos utilisateurs.
La 1ère information globale que vous donnera l'outil est directement une moyenne calculée pour le Largest Contentful Paint sur le nombre de tests que vous avez spécifié (3 si vous n'avez rien touché) :
Cependant, ce qui nous intéresse ici est l'onglet « Core Web Vitals », entrons plus en détail sur cela :
Note : En fonction des paramètres que vous avez assignés juste avant, les résultats peuvent être très différents de GPSI pour les raisons que j'ai déjà de nombreuses fois expliquées (fiez-vous à WebPageTest).
Sur ce test, j’ai utilisé une connexion 3G slow, avec pour location paris et pas Europe ;). Si les résultats sont relativement différents de tout à l’heure, même si j’ai pris le même débit qu’utilise GPSI, c’est tout simplement parce que j’ai choisi de regarder les CWV sur desktop et non pas sur mobile cette fois-ci.
En cliquant sur le carré CLS, celui du milieu, vous serez automatiquement redirigés vers les éléments en question. Vous aurez ainsi une vue détaillée incluant hauteur largeur et accès à une vidéo explicative :
Si cela ne correspond pas au même problème que tout à l'heure sur Chrome, rappelez-vous que nous sommes sur desktop cette fois-ci, ne perdez pas le fil ! Ici on voit que l'élément de décalage de mise en page est le panneau publicitaire pour Noël. C'est d'ailleurs ce que vous pouvez aussi constater lorsque je passe ma souris sur l'image réactive juste avant.
Améliorer sa note de Cumulative Layout Shift
Maintenant que vous avez les outils et que vous savez les utiliser, il est temps de passer à l'optimisation de votre site. Cette partie sera particulièrement complexe car je ne peux deviner les problèmes que vous rencontrerez. J'essaierai cependant de parcourir tous les problèmes récurrents, notamment les questions de hauteur largeur d'éléments. Si vous avez besoin d'aide pour améliorer vos Core Web vitals et que cela vous semble trop complexe, ou que vous n'avez pas le temps, vous pouvez tout simplement me contacter.
1. Les éléments d’image ne possèdent pas de width ni de height explicites
Cette partie est la plus importante à retenir. Elle déclenche à elle seule presque toujours la dégradation du Largest Contentful Paint (ou le score le plus haut).
Effectivement si vous n'allouez pas de place définie pour vos images et que vous utilisez des dimensions « auto », le navigateur chargera la taille image idéale en adaptant l'élément en plein chargement et donc décalera la mise en page. Par exemple ce code CSS n'est pas bon :
votre-image {
height: auto;
}
Au lieu de ça, la méthode la plus simple est d'utiliser la méthode classique pour l'espace réservé :
<img src=“votre-image.webp“ width=“800“ height=“400“ alt=“integrer le format webp“>
Vous devez donner une valeur explicite afin que vos images, iFrames, vidéos et SEO et autres, soient correctement définis et qu’aucun élément ne se décale. Sinon ces éléments vont se charger et s’organiser en fonction de leur apparition à l’écran, ce qui est, disons-le, terrible.
Pour pallier ce problème vous pouvez également définir un ratio afin que l’image charge au tout début du calcul :
votre-image {
aspect-ratio: attr(width) / attr(height);
}
S'il est possible d'ajouter en HTML l'image sans détailler sa dimension et en utilisant un CSS précisant les dimensions exacte de l'image pour optimiser WordPress et améliorer INP LCP comme ceci :
votre-image {
width : 800px;
height : 400px;
}
Il est tout de même probable que vous constatiez un CLS, voire des impacts sur INP LCP, même s'il sera moins important. Cela s'explique car le code HTML est plus rapide à charger comparé au CSS ou au JavaScript.Ainsi l'intégralité de votre HTML sera affichée et la ligne de code en CSS spécifiant les dimensions ne sera pas encore interprétée. Ainsi, vous aurez l'affichage HTML avec une image possédant une dimension. Le CSS sera ensuite interprété et changera les dimensions de l'image déjà affichée. Vous aurez donc toujours un décalage de mise en page.
1.1 Les espaces publicitaires
Si votre site utilise des espaces publicitaires comme avec des scripts Google (contenus dynamiques externes), il est fortement probable qu'ils déclenchent d'importants décalages de mise en page puisqu'ils s'adapteront automatiquement à votre page, impactant l'optimisation des performances. Encore pire si les utilisateurs se servent d'adblock. Si ce dernier est interprété après la mise en page vous verrez apparaître des publicités décalant la mise en page puis disparaissant, décalant ainsi à nouveau la mise en page et compromettant davantage l'optimisation…
Ainsi l'un des moyens les plus efficaces est encore une fois de leur réserver un espace explicite avec hauteur et largeur définies lorsque le chargement s'effectue.
Mais cela peut aussi concerner d’autres éléments, comme un plugin WordPress de pop-up intrusive, votre module RGPD de cookies et autres.
Retenez que les éléments, qu’il s’agisse d’image, de contenu dynamique ou autres, qui ne possèdent pas de width ni de height explicites sont toujours les facteurs de classement Google de décalage de mise en page les plus importants et souvent la seule cause à un CLS très élevé.
2. Le chargement des polices
Précharger la police pour ne pas avoir de font « FOUT ou FOIT » est probablement le 2ème critère le plus fréquent de Layout Shift, particulièrement sur WordPress. GPSI pourrait vous indiquer cette formule lors de la mise en ligne « Assurez-vous que le texte reste visible pendant le chargement des polices Web ».
Si votre police n'est pas préchargée sur votre site WordPress, le code HTML affichera une police de remplacement avant d'interpréter la police qui lui est assignée. Étant donné qu'une police peut-être facilement deux fois plus grande ou deux fois plus petite qu'une police de secours (« FOUT » : texte sans style), vous constaterez ainsi un important décalage entre tous les éléments de votre site WordPress le temps que la police soit définie. La police peut aussi rencontrer un problème et être invisible jusqu'à sa résolution, dans ce cas de figure la police sera aussi affichée en police de secours.
Pour éviter ces problèmes vous pouvez utiliser ces 3 méthodes :
- Afficher ses polices en utilisant optional pour maintenir l'espace réservé. Le code : font-display : optional
- Pré-charger ses polices pour réduire le cumulative layout shift. Le code :
- Utiliser directement des piles de polices système pour améliorer score CLS. Le code : body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
Note : Ne surtout pas faire appel à une font en CSS avec la règle @import !! Cela peut nuire à vos Core Web Vitals.
Résumé : optimiser son CLS
Petit récapitulatif de ce que l'on a pu voir tout au long de cet article. Chrome, GPSI ou WebPageTest vous indiquent précisément le bout de code concerné provoquant le Layout Shift, permettant ainsi d'identifier très facilement les causes du problème pour améliorer score CLS :
Il ne vous reste plus qu'à modifier cet élément et ajouter un width et un height explicites dans le code HTML pour optimiser images et le tour est joué. C'est pour cela que nous avons vu en détail comment se servir des outils pour optimiser images : ils seront précieux ! Ce n'est pas si compliqué que ça d'optimiser images !
0 commentaires