Comment résoudre les problèmes de décalage de mise en page cumulatif (CLS)

Cumulative Layout Shift (CLS) tente de mesurer ces mouvements discordants de la page. car le nouveau contenu – qu'il s'agisse d'images, de publicités ou autre – entre en jeu plus tard que le reste de la page. Il calcule un score basé sur la quantité de la page qui se déplace de manière inattendue et à quelle fréquence. Ces déplacements 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 !

Dans cet article, je suis va discuter de certains modèles frontaux pour réduire CLS. Je ne vais pas trop parler de la mesure du CLS car j'en ai déjà parlé dans un article précédent . Je ne parlerai pas non plus trop des mécanismes de calcul du CLS : Google a une bonne documentation à ce sujetet Jess PeckThe Almost-Complete Guide to Cumulative Layout Shift est également une plongée en profondeur impressionnante dans ce domaine. Cependant, je vais donner un peu de contexte nécessaire pour comprendre certaines des techniques.

Pourquoi CLS est différent

CLS est, à mon avis, le plus intéressant des Core Web Vitals, en partie parce que c'est quelque chose que nous avons jamais vraiment mesuré ou optimisé pour avant. Ainsi, il faut souvent de nouvelles techniques et modes de pensée pour tenter de l'optimiser. C'est une bête très différente des deux autres Core Web Vitals.

En regardant brièvement les deux autres Core Web Vitals, Largest Contentful Paint (LCP) fait exactement comme son nom l'indique et est plus une torsion sur les métriques de chargement précédentes qui mesurent la vitesse à laquelle la page se charge. Oui, nous avons changé la façon dont nous avons défini l'expérience utilisateur du chargement de la page pour examiner la vitesse de chargement du contenu le plus pertinentmais il s'agit essentiellement de réutiliser les anciennes techniques pour garantir que le contenu se charge aussi rapidement que possible. Comment optimiser votre LCP devrait être un problème relativement bien compris pour la plupart des pages Web.

First Input Delay (FID) mesure tout retard dans les interactions et ne semble pas être un problème pour la plupart sites. L'optimisation est généralement une question de nettoyage (ou de réduction !) de votre JavaScript et est généralement spécifique au site. Cela ne veut pas dire que la résolution des problèmes avec ces deux métriques est facile, mais ce sont des problèmes raisonnablement bien compris.

L'une des raisons pour lesquelles CLS est différent est qu'il est mesuré à travers la durée de vie de la page — c'est la partie "cumulative" du nom ! Les deux autres Core Web Vitals s'arrêtent une fois que le composant principal a été trouvé sur la page après le chargement (pour LCP) ou pour la première interaction (pour FID). Cela signifie que nos outils de laboratoire traditionnels, comme Lighthouse, ne reflètent souvent pas entièrement le CLS car ils ne calculent que la charge initiale CLS. Dans la vraie vie, un utilisateur fera défiler la page et peut voir plus de contenu tomber en provoquant plus de changements.

CLS est également un peu un nombre artificiel qui est calculé en fonction de la quantité de page qui se déplace et de la fréquence à laquelle . Alors que LCP et FID sont mesurés en millisecondes, CLS est un nombre sans unité généré par un calcul complexe. Nous voulons que la page soit de 0,1 ou moins pour passer ce Core Web Vital. Tout ce qui est supérieur à 0,25 est considéré comme « médiocre ».

Les changements provoqués par l'interaction de l'utilisateur ne sont pas comptés. Ceci est défini comme dans 500 ms d'un ensemble spécifique d'interactions utilisateur bien que les événements de pointeur et le défilement soient exclus . Il est présumé qu'un utilisateur cliquant sur un bouton peut s'attendre à ce que du contenu apparaisse, par exemple en développant une section réduite.

CLS consiste à mesurer des changements inattendus. Le défilement ne devrait pas provoquer le déplacement du contenu si une page est construite de manière optimale, et le survol de l'image d'un produit pour obtenir une version agrandie, par exemple, ne devrait pas non plus faire sauter l'autre contenu. Mais il y a bien sûr des exceptions et ces sites doivent réfléchir à la manière de réagir à cela.

CLS est également en constante évolution avec des ajustements et des corrections de bogues. Un changement plus important vient d'être annoncé qui devrait donner un certain répit aux pages de longue duréecomme les applications à page unique (SPA) et les pages à défilement infini, que beaucoup estimaient injustement pénalisées dans CLS. Plutôt que d'accumuler les changements sur toute la durée de la page pour calculer le score CLS comme cela a été fait jusqu'à présent, le score sera calculé sur la base du plus grand ensemble de changements dans une fenêtre temporelle spécifique.

Cela signifie que si vous en avez trois. des morceaux de CLS de 0,05, 0,06 et 0,04 alors auparavant, cela aurait été enregistré comme 0,15 (c'est-à-dire au-dessus de la « bonne » limite de 0,1), alors que maintenant sera noté 0,06. C'est toujours cumulatif dans le sens où le score peut être composé de décalages distincts dans ce laps de temps (c'est-à-dire si ce score CLS de 0,06 a été causé par trois décalages distincts de 0,02), mais il n'est tout simplement pas cumulatif sur la période durée de vie totale de la page.

En disant que, si vous résolvez les causes de ce décalage de 0,06, votre CLS sera alors signalé comme le le plus grand suivant (0,05) donc il regarde toujours tous les changements au cours de la durée de vie de la page – il s'agit simplement de ne signaler que le plus grand comme score CLS.

Avec cette brève introduction à une partie de la méthodologie sur CLS, passons à certaines des solutions  ! Toutes ces techniques impliquent essentiellement de réserver la bonne quantité d'espace avant le chargement de contenu supplémentaire, qu'il s'agisse de contenu multimédia ou injecté en JavaScript, mais les développeurs Web disposent de plusieurs options pour le faire.