LinkedIn Link to LinkedIn Twitter Link to Twitter

Le guide ultime pour optimiser le CLS de son site web

0 commentaires

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.

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 :

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 mesurer : à la fois ces changements, la fréquence à laquelle ils se produisent et l'irritation que cela pourrait provoquer chez l'utilisateur.

Fonctionnement du Cumulative Layout Shift

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 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 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é, 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.

Mesurer le CLS et le réparer avec Google Page Speed Insights

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 qu’il a détectés, qui eux ne changeront pas. Effectivement le score en lui-même attribué à un élément 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, 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 d’actualisation ou utilisez le raccourci Ctrl + Shift + E afin de générer une analyse détaillée de votre site internet.

Mesurer le CLS avec Chrome Dev Tools

Voici ce que ça donne. Les éléments encadrés en rouge sont ceux qui vont nous intéresser.

Interpréter les mesures du CLS de Chrome Dev Tools

Pour commencer, cochez « Signaux Web ». Ensuite plongeons-nous dans le 2ème cadre, celui des captures d’écran 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 ne sera pas visible 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 :

Analyser précisément chaque layout shift sur Chrome

Enfin, en cliquant sur les boîtes nommées « Layout Shift », Chrome vous fournira plus de détails spécifiques :

Vue des détails d'un layout shift précis sur Chrome

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 de décalage 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 vitesse 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.

Mesurer le CLS avec webpagetest.org

La 1ère information globale que vous donnera l’outil est directement une moyenne calculée sur le nombre de tests que vous avez spécifié (3 si vous n’avez rien touché) :

Résultats d'un audit de web performance avec webpagetest.org

Cependant, ce qui nous intéresse ici est l’onglet « Web Vitals », entrons plus en détail sur cela :

Audit des Core Web Vitals avec webpagetest.org

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 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. 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 le décalage de mise en page (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 dimension 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 :

<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 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 comme ceci :

votre-image {
width : 800px;
height : 400px;
}

Il est tout de même probable que vous constatiez un CLS, 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. 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...

Ainsi l’un des moyens les plus efficaces est encore une fois de leur réserver un espace explicite.

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 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. GPSI pourrait vous indiquer cette formule « Assurez-vous que le texte reste visible pendant le chargement des polices Web ».

Si votre police n’est pas préchargée, 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 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 pallier ces problèmes vous pouvez utiliser ces 3 méthodes :

  •  Afficher ses polices en utilisant optional. Le code : font-display : optional
  • Pré-charger ses polices. Le code : <link rel="preload" as="font" href="/fonts/ma-police.woff" type="font/woff" crossorigin="anonymous">
  • Utiliser directement des piles de polices système. 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 !!

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 :

Exemple d'un élément produisant un layout shift avec GPSI

Il ne vous reste plus qu’à modifier cet élément et ajouter un width et un height explicites dans le code HTML et le tour est joué. C’est pour cela que nous avons vu en détail comment se servir des outils : ils seront précieux ! Ce n’est pas si compliqué que ça !

L'hébergement WordPress pour les sites ambitieux

Vos concurrents utilisent Kinsta. Ne les laissez pas vous devancer.

Découvrez

Vous avez besoin d'aide ?

N'hésitez pas ! Nous sommes experts en création de site et en référencement naturel.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *