CLS (Cumulative Layout Shift)

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

Le CLS (Cumulative Layout Shift, ou décalage de mise en page cumulé) mesure l’importance des déplacements inattendus des éléments visibles lors du chargement ou de l’utilisation d’une page. Le score est sans unité et correspond au produit de la fraction d’impact (la proportion de la zone d’affichage affectée) par la fraction de distance (la distance de déplacement des éléments). Le CLS est l’un des trois Core Web Vitals (signaux Web essentiels) aux côtés du LCP et de l’INP. Un bon score est inférieur ou égal à 0.1 au 75e percentile, tandis qu’un score supérieur à 0.25 est considéré comme médiocre.

Pourquoi le CLS (Cumulative Layout Shift) est-il important ?

Les sauts de mise en page sont particulièrement préjudiciables pour une boutique en ligne : un acheteur s’apprête à cliquer sur « Acheter », mais une bannière ou une image au chargement tardif décale le bouton, et le clic atterrit sur un autre élément. Cela génère de la frustration, des erreurs de clic et de la méfiance juste avant l’étape de conversion. De plus, le CLS fait partie des signaux d’expérience utilisateur (Page Experience) de Google ; des valeurs constamment élevées peuvent donc pénaliser votre référencement. Une page stable semble plus rapide et plus professionnelle, même si le temps de chargement brut reste le même.

Cas d’utilisation courants

• Images et vidéos sans dimensions spécifiées. Sans les attributs width/height ou la propriété aspect-ratio, le navigateur ne peut pas réserver d’espace à l’avance, ce qui provoque un saut de contenu lors du chargement du média — associez toujours cela à un texte alternatif approprié.
• Bannières de cookies et fenêtres pop-up. Le contenu injecté en haut ou au milieu de la page décale tout ce qui se trouve en dessous.
• Widgets d’applications. Les avis clients, les blocs « récemment consultés » ou les offres de vente incitative (upsell) qui se chargent après le reste de la page modifient la mise en page.
• Polices web. Le passage d’une police système de secours à la police finale peut modifier la taille du texte et provoquer un décalage.
• Publicités et éléments iframe sans espace réservé dans la zone au-dessus de la ligne de flottaison.

Perspective de Shopify

Dans Shopify, la plupart des sauts de mise en page proviennent des applications installées et des modifications apportées au thème, plutôt que de la plateforme elle-même. Veillez à toujours réserver de l’espace pour les blocs dynamiques, à définir des dimensions fixes pour les images de produits et à charger les bannières de cookies et fenêtres pop-up de manière à ce qu’elles ne déplacent pas le contenu. Mesurez ces effets avec PageSpeed Insights ou Lighthouse sur mobile et ordinateur, et suivez le rapport de vitesse sous Boutique en ligne dans l’interface administrateur Shopify, qui repose sur les données de Google Lighthouse.