Qu'est-ce que le Cumulative Layout Shift (CLS) et comment le corriger

Qu'est-ce que le Cumulative Layout Shift (CLS) ?

Le Cumulative Layout Shift (CLS) représente la partie 'stabilité visuelle' des Core Web Vitals. Le Cumulative Layout Shift (CLS) mesure les mouvements de la page lorsque le contenu s'affiche ou qu'un nouveau contenu est montré sur la page. Il calcule un score basé sur la quantité de page qui se déplace de manière inattendue et la distance de ce déplacement. Ces décalages de contenu sont très ennuyeux, vous faisant perdre votre place dans un article que vous avez commencé à lire ou, pire encore, vous faisant cliquer sur le mauvais bouton !

Importance du CLS dans la performance web et l'expérience utilisateur

Le Cumulative Layout Shift (CLS) est lié à la fois à la performance web et à l'expérience utilisateur car il impacte directement la stabilité et la prévisibilité d'une page web pendant son chargement. Voici pourquoi cela compte :

• UX, engagement et perception de la marque :  Les décalages de mise en page inattendus perturbent le flux utilisateur, rendant plus difficile la recherche d'informations, le clic sur les boutons et l'interaction avec la page comme prévu. Cette frustration peut conduire à de mauvaises expériences où les utilisateurs abandonnent le site web complètement.
  L'expérience utilisateur d'un site web reflète la marque qui se trouve derrière. Des décalages de mise en page fréquents peuvent donner l'impression d'un site web mal conçu ou mal entretenu, perturber l'engagement utilisateur, ce qui entraînera une diminution des interactions et potentiellement des taux de rebond plus élevés.
  
• Accessibilité : Les décalages de mise en page peuvent être particulièrement perturbants pour les utilisateurs handicapés qui comptent sur des technologies d'assistance ou des lecteurs d'écran. Une mise en page stable garantit que tout le monde peut naviguer et interagir avec le site web efficacement.
  
• SEO et classement de recherche : Les Core Web Vitals sont un facteur de classement petit mais significatif dans Google. Google, ainsi que d'autres moteurs de recherche, priorise les sites web qui offrent une bonne expérience utilisateur. Le CLS est l'une des métriques Core Web Vitals que Google prend en compte lors du classement des sites web. L'optimisation pour le CLS peut donner à votre site web un avantage concurrentiel dans les résultats de recherche.
  

Comment le CLS est-il mesuré ?

Le CLS d'une page peut être mesuré avec l' API Layout Instability. Voici une utilisation simple de cette api

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Calcul du CLS

Le CLS se calcule facilement à l'aide d'une formule simple mais élégante :

CLS = sum(impact-fraction * distance-fraction)

La fraction d'impact mesure combien du contenu visible de la page s'est déplacé. La fraction de distance mesure la distance à laquelle le contenu s'est déplacé. Si, par exemple, 50 % de la page (combien) s'est déplacée de 25 % (la distance) de la fenêtre d'affichage de la page. Le score CLS = .50 * .25 = 0.125

Décalages de mise en page attendus VS inattendus

Tous les décalages de mise en page ne sont pas mauvais, seulement ceux auxquels vous ne vous attendez pas. Lorsque vous cliquez sur un lien 'charger plus d'éléments' par exemple, vous vous attendez à ce que plus d'éléments apparaissent sur la page et que le contenu de la page se décale.

C'est pourquoi seuls les décalages de mise en page inattendus contribueront au CLS. Par exemple, si un utilisateur clique sur un bouton et qu'en réponse un nouveau contenu est ajouté à la page (par exemple un menu déroulant), le décalage de mise en page sera exclu du CLS. Pour être précis :
Les décalages de mise en page qui se produisent dans les 500 millisecondes suivant une entrée utilisateur seront exclus des calculs

Sessions de décalage de mise en page

Lorsque le CLS a été introduit pour la première fois, certains sites ont été injustement punis avec un mauvais score CLS. Par exemple, une page qui implémente le défilement infini aurait vu l'impact du contenu nouvellement ajouté s'ajouter au score CLS total pour chaque nouveau défilement. C'est pourquoi le CLS est maintenant calculé par sessions. Chaque session a une durée de 5 secondes. La session avec le score CLS le plus élevé deviendra le score CLS final.
Si, par exemple, pendant les 5 premières secondes le score CLS est de 0,095, puis dans les sessions de 5 secondes suivantes le CLS est de 0,15 et pour la dernière session le score CLS est de 0. Le score CLS final sera le plus élevé des trois, soit 0,15.

Un petit rappel : CLS et les Core Web Vitals !

Le Cumulative Layout Shift (CLS) est une métrique importante, centrée sur l'utilisateur, pour mesurer la stabilité visuelle. Le Cumulative Layout Shift (CLS) fait partie des Core Web Vitals avec le First Contentful Paint, le Largest Contentful Paint et le First Input Delay.

Comment mesurer les problèmes de CLS

1. Utiliser Lighthouse pour trouver les Cumulative Layout Shifts

La méthode la plus simple pour trouver des décalages de mise en page est d'utiliser Lighthouse dans votre propre navigateur Chrome. Exécutez simplement un audit Lighthouse en faisant un clic droit n'importe où sur la page. Sélectionnez ensuite inspecter l'élément, sélectionnez l'onglet lighthouse dans la console qui vient de s'ouvrir et lancez l'audit

Les résultats de l'audit afficheront le score Cumulative Layout Shift (CLS). Faites défiler vers le bas jusqu'à Diagnostics et développez les informations sur le Cumulative Layout Shift pour voir quels nœuds causent le décalage de mise en page.

Pour être honnête, je n'utilise jamais vraiment cette méthode moi-même. Le manque de détails sur la distance exacte du décalage de mise en page rend ces résultats plus difficiles à interpréter

2. Utiliser le CLS Visualizer pour trouver les Cumulative Layout Shifts

Le CLS Visualizer est une extension Chrome écrite par moi. D'un simple clic sur un bouton, tous les décalages de mise en page sur la page sont visualisés. C'est la première solution vers laquelle je me tourne lorsque j'essaie de déterminer un décalage de mise en page sur une page. C'est facile et cela donnera un excellent aperçu visuel du Cumulative Layout Shift.

3. Utiliser l'onglet Performance de Chrome pour trouver le CLS

De loin la meilleure façon de déboguer un décalage de mise en page est via l'onglet performance de Chrome. Pour ouvrir l'onglet performance, naviguez vers n'importe quelle page dans Chrome et utilisez cette combinaison de raccourcis :
- Appuyez sur Ctrl-Shift-I (Ouvrir les Dev Tools)
- Appuyez sur Ctrl-Shift-E (Démarrer le profilage et recharger la page)

Maintenant, inspectez la chronologie image par image en survolant avec votre souris la chronologie en haut et recherchez les décalages de mise en page (les décalages de mise en page sont également colorés en rouge dans la section Expérience de l'onglet Performance). 

4. Utiliser des outils RUM comme Core/Dash

RUM signifie Real User Monitoring et les données RUM peuvent fournir des informations précieuses en temps réel sur les Core Web Vitals. Les outils RUM comme Core/Dash peuvent décomposer les Cumulative Layout Shifts en segments comme le navigateur, l'élément, le type de navigation, l'url spécifique ou le type de page. Cela aidera à identifier et à corriger les pages peu performantes et les éléments fautifs

Causes courantes du Cumulative Layout Shift et comment les corriger

L'origine de tous les décalages de mise en page est fondamentalement la même. À un moment donné, un élément qui était placé au-dessus d'un autre élément a pris plus ou moins d'espace qu'avant. Cela est généralement dû à l'une ou plusieurs de ces causes :

• Images, iFrames ou vidéos
• Publicités
• Contenu injecté
• Animations
• Interactions lentes
• Polices web

CLS causé par des images, des vidéos et des iFrames

Les décalages de mise en page causés par des images, des vidéos ou des iFrames sont toujours causés par des dimensions manquantes. Le plus souvent, c'est parce que la hauteur et la largeur de l'élément ne sont pas définies dans le html. Un modèle courant et une bonne pratique consiste à définir la largeur intrinsèque de l'image dans le html et à utiliser le style pour mettre à l'échelle automatiquement afin de contenir l'image dans son conteneur parent.

<img src="img.jpg" width="200" height="200">
<style>
   img{
      max-width:100%;
      height:auto
   }
</style>

Notez que les dimensions peuvent également être définies comme une propriété de style ou même en définissant la propriété de style aspect-ratio. 

CLS causé par les polices web

Un cumulative layout shift peut être causé par des polices web. Les WebFonts sont des polices qui ne sont pas installées sur votre ordinateur local ou votre téléphone mais téléchargées depuis internet. Tant que la police web n'est pas encore téléchargée, la page est généralement rendue avec une police de secours. La taille de cette police de secours peut différer de la police finale. Dans cet exemple, la police de secours est légèrement plus petite que la police web finale.

Il existe de nombreuses méthodes pour 'corriger' le décalage de mise en page causé par les polices web. Elles sont basées sur 2 techniques :

1. Faire en sorte que la police de secours corresponde plus étroitement à la police web. Le moyen le plus efficace est de surcharger les descripteurs @font-face

La deuxième façon est d'accélérer les polices web. Cela les rendra disponibles pour le navigateur avant que celui-ci ne commence le rendu. Une façon courante de le faire est de précharger vos polices web critiques, 

Problèmes de CLS causés par des interactions utilisateur lentes

Dans l'exemple ci-dessous, le bouton charger plus déclenche clairement un décalage de mise en page. Cependant, le décalage de mise en page ne sera pas ajouté aux métriques CLS. C'est parce que ce décalage de mise en page est intentionnel

Un navigateur le saura parce que les éléments maintenant visibles ont un attribut appelé 'hadRecentInput'. Lorsque ceci est défini sur true ET que le décalage de mise en page se produit dans les 500 ms suivant l'événement d'entrée (le clic sur le bouton), le décalage de mise en page ne sera pas signalé par le navigateur.

Assurez-vous que les interactions utilisateur se terminent dans les 500 ms

Problèmes de CLS causés par AJAX

AJAX permet aux pages web d'être mises à jour de manière asynchrone en échangeant des données avec un serveur web en arrière-plan. Évidemment, injecter du nouveau contenu dans n'importe quelle page web pourrait entraîner un décalage de mise en page massif. C'est pourquoi il est sage de réserver l'espace qui est utilisé pour le nouveau contenu. Évidemment, vous ne connaissez pas la hauteur du nouveau contenu à l'avance mais ce que vous pouvez faire est de faire une estimation éclairée.

Par exemple, si le contenu ajax moyen prend 50 % de l'écran, il est sage de réserver ces 50 %. Lorsque le nouveau contenu finit par prendre 40 ou 60 % de l'écran, le CLS (50 % - 40 % = 10 % distance-fraction) est toujours beaucoup plus petit que 50 % distance-fraction.

Voici un exemple sur la façon de faire cela :

<style>
   #ajax{height:400px}
   #ajax.loaded{height:auto;}
</style>
<script>
   fetch('/ajax-content)
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML(result.html);
      el.classList.add('loaded');
   })
<script>

Corriger les problèmes de CLS causés par les publicités

Les publicités se chargent souvent (beaucoup) plus tard sur la page. Cela rend les Cumulative Layout Shifts causés par les publicités particulièrement ennuyeux. Lorsque plusieurs publicités se chargent dans la fenêtre d'affichage visible, la 'page ne veut tout simplement pas rester immobile'. Pour corriger cela, réservez également l'espace pour les publicités, en particulier les publicités dans la fenêtre d'affichage visible.

<style>
// rectangle mobile ad
.ad{min-height:250px;background:#dedede}
// banner desktop ad
@media only screen and (min-width: 600px) {
.ad{min-height:90px}
}
</style>