CLS (Cumulative Layout Shift)
C
Definition complete
<p>Le <strong>CLS (Cumulative Layout Shift)</strong> est l'un des trois Core Web Vitals de Google, mesurant la stabilité visuelle d'une page pendant son chargement. Cette métrique quantifie les décalages inattendus de mise en page qui peuvent frustrer les utilisateurs et provoquer des clics accidentels.</p>
<p>Le CLS calcule la somme de tous les scores de décalage de mise en page survenant pendant toute la durée de vie de la page. Un décalage de mise en page se produit lorsqu'un élément visible change de position d'un frame à l'autre sans interaction utilisateur (comme un clic ou une frappe clavier).</p>
<p>L'échelle de notation du CLS :</p>
<ul>
<li><strong>Bon</strong> : CLS ≤ 0,1</li>
<li><strong>À améliorer</strong> : 0,1 < CLS ≤ 0,25</li>
<li><strong>Mauvais</strong> : CLS > 0,25</li>
</ul>
<p>Les causes courantes de mauvais CLS incluent :</p>
<ul>
<li><strong>Images sans dimensions</strong> : absence d'attributs width/height causant un redimensionnement au chargement</li>
<li><strong>Publicités et embeds</strong> : contenus tiers s'insérant dynamiquement dans la page</li>
<li><strong>Polices web</strong> : FOUT (Flash of Unstyled Text) causant un recalcul de la mise en page</li>
<li><strong>Contenu injecté</strong> : bandeaux cookies, notifications, promos apparaissant tardivement</li>
<li><strong>Iframes</strong> : vidéos YouTube ou widgets sans espace réservé</li>
</ul>
<p>L'optimisation du CLS passe par plusieurs bonnes pratiques : toujours définir les dimensions des images et vidéos, réserver l'espace pour les publicités avec des placeholders, utiliser font-display:swap avec preload des polices, et insérer les nouveaux contenus sous la zone visible plutôt qu'au-dessus.</p>
<p>Depuis 2021, le CLS fait partie des facteurs de classement Google dans le cadre de l'expérience page. Les outils comme PageSpeed Insights, Lighthouse et Chrome DevTools permettent de mesurer et diagnostiquer les problèmes de CLS.</p>
Exemples pratiques
<ul>
<li><strong>Problème courant</strong> : Un utilisateur s'apprête à cliquer sur un lien quand une publicité se charge, décalant tout le contenu et provoquant un clic erroné</li>
<li><strong>Solution images</strong> : Ajout de width="800" height="600" sur les balises img réduisant le CLS de 0,35 à 0,02</li>
<li><strong>Solution fonts</strong> : Preload de la police principale + font-display:optional éliminant le FOUT</li>
<li><strong>Solution pub</strong> : Skeleton placeholder réservant l'espace exact de la publicité avant son chargement</li>
<li><strong>Solution cookie banner</strong> : Bandeau positionné en overlay plutôt qu'en insertion dans le DOM</li>
</ul>
A quoi sert CLS (Cumulative Layout Shift) ?
<ul>
<li>Améliorer l'expérience utilisateur en garantissant une mise en page stable</li>
<li>Optimiser le score Core Web Vitals pour le référencement Google</li>
<li>Réduire les clics accidentels et la frustration utilisateur</li>
<li>Diagnostiquer les problèmes de stabilité visuelle avec les outils de test</li>
<li>Auditer l'impact des publicités et widgets tiers sur la performance</li>
<li>Mettre en place des bonnes pratiques de développement front-end</li>
</ul>
CLS (Cumulative Layout Shift) en pratique chez 123web
<p>Chez 123web, nous optimisons le CLS de chaque site que nous développons ou auditons. De la configuration des dimensions d'images à la gestion des polices web en passant par les placeholders pour les contenus dynamiques, nous appliquons toutes les bonnes pratiques pour garantir une expérience utilisateur stable. Notre expertise Core Web Vitals contribue à améliorer à la fois le référencement et la satisfaction des visiteurs.</p>