Cumulative Layout Shift (CLS)
Avez-vous déjà lu un article en ligne lorsque quelque chose change soudainement sur la page ? Sans prévenir, le texte bouge et vous avez perdu votre place. Ou pire encore : vous êtes sur le point d’appuyer sur un lien ou un bouton, mais juste avant que votre doigt n’atterrisse — BOUM — le lien se déplace et vous finissez par cliquer sur autre chose !
La plupart du temps, ce genre d’expériences est simplement ennuyeux, mais dans certains cas, elles peuvent causer de réels dommages.
Un mouvement inattendu du contenu de la page se produit généralement parce que les ressources sont chargées de manière asynchrone ou que des éléments DOM sont ajoutés dynamiquement à la page au-dessus du contenu existant. Le coupable peut être une image ou une vidéo aux dimensions inconnues, une police qui s’affiche plus ou moins grand que sa version de secours, ou une publicité ou un widget tiers qui se redimensionne dynamiquement.
Ce qui rend ce problème encore plus problématique, c’est que le fonctionnement d’un site en développement est souvent très différent de la façon dont les utilisateurs le vivent. Le contenu personnalisé ou tiers ne se comporte souvent pas de la même manière en développement qu’en production, les images de test sont souvent déjà dans le cache du navigateur du développeur et les appels d’API qui s’exécutent localement sont souvent si rapides que le retard n’est pas perceptible.
La métrique Cumulative Layout Shift (CLS) vous aide à résoudre ce problème en mesurant la fréquence à laquelle il se produit pour les utilisateurs réels.
What is CLS ?
CLS est une mesure de la plus grande rafale de scores de changement de mise en page pour chaque changement de mise en page inattendu qui se produit pendant toute la durée de vie d’une page.
Un changement de mise en page se produit chaque fois qu’un élément visible change de position d’une image rendue à la suivante.
Une rafale de changements de mise en page, appelée fenêtre de session, se produit lorsqu’un ou plusieurs changements de mise en page individuels se produisent en succession rapide avec moins d’une seconde entre chaque changement et un maximum de 5 secondes pour la durée totale de la fenêtre.
La rafale la plus importante est la fenêtre de session avec le score cumulé maximum de tous les changements de disposition dans cette fenêtre.
Qu’est-ce qu’un bon score CLS ?
Pour offrir une bonne expérience utilisateur, les sites doivent s’efforcer d’avoir un score CLS de 0,1 ou moins.
Les changements de mise en page en détail
Les décalages de mise en page sont définis par l’API d’instabilité de la mise en page, qui signale les entrées de décalage de mise en page chaque fois qu’un élément visible dans la fenêtre change sa position de départ (par exemple, sa position supérieure et gauche dans le mode d’écriture par défaut) entre deux cadres. De tels éléments sont considérés comme des éléments instables.
Notez que les changements de mise en page ne se produisent que lorsque les éléments existants changent leur position de départ. Si un nouvel élément est ajouté au DOM ou qu’un élément existant change de taille, cela ne compte pas comme un changement de mise en page, tant que le changement n’entraîne pas le changement de position de départ d’autres éléments visibles.
Score de décalage de mise en page
Pour calculer le score de décalage de mise en page, le navigateur examine la taille de la fenêtre et le mouvement des éléments instables dans la fenêtre entre deux images rendues. Le score de décalage de mise en page est un produit de deux mesures de ce mouvement : la fraction d’impact et la fraction de distance.
Fraction d’impact
La fraction d’impact mesure l’impact des éléments instables sur la zone de la fenêtre entre deux images.
L’union des zones visibles de tous les éléments instables pour l’image précédente et l’image actuelle, en tant que fraction de la surface totale de la fenêtre, est la fraction d’impact pour l’image actuelle.
Fraction de distance
L’autre partie de l’équation du score de décalage de mise en page mesure la distance de déplacement des éléments instables par rapport à la fenêtre. La fraction de distance est la plus grande distance parcourue par un élément instable dans le cadre (horizontalement ou verticalement) divisée par la plus grande dimension de la fenêtre (largeur ou hauteur, selon la plus grande des deux).
Changements de mise en page attendus ou inattendus
Tous les changements de mise en page ne sont pas mauvais. En fait, de nombreuses applications Web dynamiques modifient fréquemment la position de départ des éléments sur la page.
Changements de mise en page initiés par l’utilisateur
Un changement de mise en page n’est mauvais que si l’utilisateur ne s’y attend pas. D’un autre côté, les changements de mise en page qui se produisent en réponse aux interactions de l’utilisateur (cliquer sur un lien, appuyer sur un bouton, taper dans un champ de recherche et autres) sont généralement corrects, tant que le changement se produit suffisamment près de l’interaction pour que la relation soit clair pour l’utilisateur.
Par exemple, si une interaction utilisateur déclenche une requête réseau qui peut prendre un certain temps, il est préférable de créer immédiatement de l’espace et d’afficher un indicateur de chargement pour éviter un changement de mise en page désagréable lorsque la requête se termine. Si l’utilisateur ne se rend pas compte que quelque chose est en cours de chargement, ou n’a pas une idée du moment où la ressource sera prête, il peut essayer de cliquer sur autre chose en attendant, quelque chose qui pourrait sortir de sous lui.
Animations et transitions
Les animations et les transitions, lorsqu’elles sont bien faites, sont un excellent moyen de mettre à jour le contenu de la page sans surprendre l’utilisateur. Le contenu qui se déplace brusquement et de manière inattendue sur la page crée presque toujours une mauvaise expérience utilisateur. Mais le contenu qui passe progressivement et naturellement d’une position à l’autre peut souvent aider l’utilisateur à mieux comprendre ce qui se passe et le guider entre les changements d’état.
La propriété de transformation CSS vous permet d’animer des éléments sans déclencher de changement de mise en page :
- Au lieu de modifier les propriétés de hauteur et de largeur, utilisez transform: scale().
- Pour déplacer des éléments, évitez de modifier les propriétés haut, droite, bas ou gauche et utilisez plutôt transform: translate().
Comment améliorer CLS
Pour la plupart des sites Web, vous pouvez éviter tous les changements de mise en page inattendus en respectant quelques principes directeurs :
- Incluez toujours des attributs de taille sur vos images et éléments vidéo, ou réservez l’espace requis avec quelque chose comme des boîtes de rapport d’aspect CSS. Cette approche garantit que le navigateur peut allouer la bonne quantité d’espace dans le document pendant le chargement de l’image. Notez que vous pouvez également utiliser la stratégie de fonctionnalité de média non dimensionné pour forcer ce comportement dans les navigateurs qui prennent en charge les stratégies de fonctionnalité.
- N’insérez jamais de contenu au-dessus d’un contenu existant, sauf en réponse à une interaction de l’utilisateur. Cela garantit que tous les changements de mise en page qui se produisent sont attendus.
- Préférez les animations de transformation aux animations de propriétés qui déclenchent des changements de mise en page. Animez les transitions de manière à fournir un contexte et une continuité d’un état à l’autre.
Pour plus d’informations vous pouvez retrouver l’origine de cette article en anglais