CLS (Cumulative Layout Shift)

Le Cumulative Layout Shift (CLS) est une métrique Core Web Vital qui mesure la stabilité visuelle d'une page pendant son chargement. Plutôt que de suivre la vitesse ou la réactivité, le CLS s'intéresse à la question de savoir si le contenu visible se déplace de manière inattendue pendant et après le processus de chargement. Chaque fois qu'un élément bouge sans interaction de l'utilisateur, le navigateur enregistre la distance et la taille du déplacement. Ces scores de déplacement individuels sont regroupés en fenêtres de session, et la plus grande fenêtre de session devient le score CLS de la page. Un score de 0,1 ou moins est considéré comme bon, de 0,1 à 0,25 nécessite une amélioration, et tout ce qui dépasse 0,25 est mauvais.

Les déplacements de mise en page inattendus dégradent directement l'expérience utilisateur. Un lecteur qui tend la main vers un bouton peut toucher accidentellement le mauvais élément lorsque le contenu saute. Une personne qui parcourt un document peut perdre complètement sa place. Ces frustrations augmentent les [taux de rebond](/glossary/bounce-rate) et réduisent le temps passé sur la page. Google utilise le CLS comme l'un des trois Core Web Vitals dans son algorithme de classement, donc les pages dont la stabilité visuelle est mauvaise subissent à la fois des pénalités d'engagement et de SEO. Pour les éditeurs numériques qui intègrent du contenu interactif comme des flipbooks, contrôler le CLS est particulièrement important, car les intégrations de tiers font partie des sources les plus courantes de déplacements de mise en page.

Le lecteur de FlipLink est conçu pour minimiser le CLS en réservant des dimensions fixes au conteneur du flipbook avant que le contenu de la page ne soit entièrement chargé. Les images et les éléments interactifs s'affichent dans des espaces préalloués, de sorte que la mise en page ne bouge pas à mesure que les ressources arrivent. Le moteur de rendu de flipbook Three.js et le visionneur de documents PDF.js s'initialisent tous deux avec un cadre stable, ce qui empêche l'animation de tourne-page de provoquer des sauts de mise en page. Le [code d'intégration responsive](/features/sharing-and-distribution) que génère FlipLink utilise des conteneurs à ratio d'aspect, qui revendiquent immédiatement la bonne quantité d'espace sur la page hôte. Cette conception profite à la fois au lecteur intégré sur ton site web et à la publication hébergée sur go.fliplink.me.

Le CLS se mesure à l'aide de deux composantes pour chaque déplacement : la **fraction d'impact** (le pourcentage de la fenêtre d'affichage concerné) et la **fraction de distance** (à quelle distance l'élément s'est déplacé par rapport à la fenêtre d'affichage). Le score de déplacement de mise en page pour une seule image est égal à la fraction d'impact multipliée par la fraction de distance. Les déplacements qui se produisent dans les 500 millisecondes suivant une action de l'utilisateur (comme un clic ou un toucher) sont exclus, car l'utilisateur s'attend à un mouvement en réponse à son action. Les DevTools de Chrome, Lighthouse, PageSpeed Insights et la bibliothèque JavaScript Web Vitals rapportent tous le CLS. Les données de terrain du Chrome User Experience Report (CrUX) fournissent des scores CLS réels collectés auprès de vrais visiteurs.

Le CLS utilise une approche par **fenêtre de session** pour calculer le score final. Une fenêtre de session est un groupe de déplacements de mise en page qui se produisent à moins d'une seconde les uns des autres, avec une durée maximale de fenêtre de cinq secondes. Le score CLS de la page correspond à la plus grande fenêtre de session unique, et non à la somme de tous les déplacements. Cette méthode a été mise à jour en 2021 pour mieux refléter les pages de longue durée et les applications monopage où le contenu se charge progressivement. Les causes courantes d'un CLS élevé incluent les images sans attributs de largeur et de hauteur, les publicités ou bannières injectées dynamiquement, les polices web qui déclenchent un flash de texte sans style (FOUT), et les intégrations de tiers qui se chargent de façon asynchrone sans espace réservé.

**« Le CLS ne compte que pendant le chargement initial de la page. »** Le CLS suit les déplacements tout au long du cycle de vie de la page, y compris ceux déclenchés par des images chargées en différé, du contenu à défilement infini ou des éléments insérés dynamiquement. Les applications monopage qui remplacent le contenu lors de la navigation peuvent accumuler du CLS si les transitions ne sont pas gérées avec soin. **« Un score CLS de 0 est l'objectif. »** Bien que zéro soit idéal, un score de 0,1 ou moins est considéré comme bon. Chercher le zéro absolu peut conduire à une sur-ingénierie. L'objectif pratique est de rendre les déplacements imperceptibles pour les utilisateurs. **« Le CLS mesure la vitesse de chargement d'une page. »** Le CLS n'a rien à voir avec la vitesse. Une page peut se charger en moins d'une seconde et avoir tout de même un CLS catastrophique si les éléments sautent pendant le rendu. La vitesse se mesure avec le [LCP](/glossary/lcp) et d'autres métriques de temps, pas avec le CLS.