Qu’est-ce que le CLS (Cumulative Layout Shift) et en quoi est-il important ?
Imaginez : vous chargez un site Web et il semble prêt à fonctionner. Vous cliquez sur l’image à la une d’un article de blog pour le lire et, soudain, toute la page se déplace parce que quelque chose vient de se charger. Cela vous amène à cliquer sur quelque chose de totalement différent, ce qui charge une page que vous n’aviez pas prévue. Si vous avez déjà été confronté à ce type de problème, vous savez à quel point le Cumulative Layout Shift (CLS) peut avoir un impact négatif sur l’expérience utilisateur (UX) d’un site. Le terme « Cumulative Layout Shift » désigne l’ampleur du déplacement de la mise en page d’une page pendant son chargement. Dans cet article, nous allons vous expliquer ce qu’est le CLS, comment est-il calculé mais aussi comment l’améliorer.
Qu’est-ce que le CLS ou Cumulative Layout Shift ?
Le CLS ou Cumulative Layout Shift est le déplacement inattendu d’éléments d’une page Web alors que celle-ci est encore en cours de téléchargement. Les éléments qui ont tendance à se déplacer sont les polices, les images, les vidéos, les formulaires de contact, les boutons etc. Il est important de minimiser le CLS car les pages qui se déplacent peuvent entraîner une mauvaise expérience pour l’utilisateur. Un mauvais score CLS indique des problèmes de codage qui peuvent être assez facilement résolus.
La vitesse du site Web a un impact indirect sur le CLS
La vitesse de chargement de votre site Web ou l’utilisation d’un serveur puissant aura un impact sur votre score CLS. Un site Web à chargement lent entraînera nécessairement des décalages de mise en page. C’est pourquoi il est recommandé d’opter pour un hébergeur de haut niveau lorsque vous publiez votre site Web. De plus, les dimensions des images et une utilisation importante de JavaScript pour les animations sur votre site web peuvent avoir des impacts négatifs sur votre score CLS.
N’oubliez pas qu’aujourd’hui, l’objectif principal d’un site Web est de satisfaire les utilisateurs. Par conséquent, n’oubliez pas non plus que les éléments tels que les animations ou les images inutiles ralentiront votre site Web et entraîneront des résultats négatifs pour l’expérience utilisateur. Concevez votre site Web de manière à satisfaire vos utilisateurs et à leur apporter des avantages. Le concept CLS est l’un des concepts introduits par Google.
Comment le CLS est-il calculé ?
Deux facteurs entrent en ligne de compte dans le calcul du CLS : la fraction d’impact et la fraction de distance.
Fraction d’impact
Pour calculer la fraction d’impact, vous devez d’abord calculer la région d’impact. La région d’impact définit la zone affectée par le décalage de la mise en page. Google identifie tous les éléments concernés et combine la zone d’origine avec la version décalée, définissant ainsi la région d’impact. La région d’impact est généralement un rectangle, mais si vous avez plusieurs décalages de mise en page (horizontale et verticale), il peut s’agir d’une forme plus complexe.
Pour définir la fraction d’impact, vous divisez la surface de la région d’impact par la surface de la fenêtre d’affichage (partie de la page visible à l’écran sans défilement vers le bas). Le calcul donne donc :
Zone de la région d’impact / zone de la fenêtre d’affichage = fraction d’impact
La première version Google du CLS ne comprenait que la fraction d’impact. Cependant, les grands éléments peuvent ne bouger que légèrement, et les grands mouvements sont plus gênants que les petits. Dans cette optique, ce calcul simple du CLS devait être amélioré. C’est pourquoi Google a mis au point la fraction de distance.
Fraction de distance
Pour calculer la fraction de distance, vous devez d’abord calculer la distance de déplacement. La distance de déplacement définit la distance avant et après le changement de disposition. Elle répond plus ou moins à la question suivante : de combien l’élément déplacé s’est-il déplacé ? Pour calculer la fraction de distance, vous devez diviser la distance de déplacement maximale par la hauteur de la fenêtre :
Distance de déplacement maximale / hauteur de la fenêtre = fraction de distance
Comment améliorer votre CLS ?
Utilisation des valeurs font:display et du lien rel=preload
Si votre site utilise des polices hébergées en ligne, elles peuvent être la principale cause des FOIT (Flashes Of the Invisible Text) et des FOUT (Flashes Of the Unstyled Text).
Lorsque le navigateur télécharge les polices depuis le serveur, il affiche souvent un espace vide jusqu’au chargement de la police personnalisée. Après le téléchargement et l’affichage de la police, la mise en page bouge généralement beaucoup. Ce phénomène s’appelle FOIT (Flashes Of the Invisible Text).
Un autre scénario se produit lorsque le navigateur affiche l’une des polices du système jusqu’à ce que la police personnalisée soit téléchargée. Cela est appelé FOUT (Flashes of The Unstyled Text). Comme la police système peut être différente de la police personnalisée, elle peut occuper un espace différent. De ce fait, la mise en page de votre site risque de bouger considérablement après le chargement de votre police personnalisée.
Pour éviter cela, vous pouvez utiliser les valeurs font:display telles que auto, swap, block, fallback et optional. Et pour un résultat encore meilleur, vous pouvez également précharger les fichiers de police en utilisant <link rel=preload> pour les polices clés – de cette façon, elles seront téléchargées en priorité.
Inclure des éléments de largeur et de hauteur pour les vidéos et les images
Au début de l’Internet, les développeurs avaient l’habitude d’inclure des éléments de largeur et de hauteur partout sur le site. Cela ressemblait à ceci :
<img src= »exemple.jpg » width= »800″ height= »300″ alt= »Exemple d’image »>.
Cela est devenu moins populaire lorsque le responsive design a pris le dessus. En raison de cette nouvelle approche, les développeurs ont commencé à utiliser le CSS pour redimensionner les images. Tant mieux pour eux, mais pas forcément pour les utilisateurs concernés par le CLS.
Avec cette méthode, l’espace est alloué uniquement après que le navigateur a commencé à télécharger l’image. Une fois toutes les images affichées, la mise en page se déplace, provoquant des décalages inutiles. Une bien meilleure solution pour redimensionner les images consiste à utiliser le rapport de forme. Il s’agit du rapport entre la largeur et la hauteur (par exemple, 16:9). L’utilisation du rapport de forme permet au navigateur de calculer l’espace nécessaire pour afficher l’image – et ainsi réduire le risque de déplacement de la mise en page.
Si vous avez affaire à des images responsives, vous pouvez utiliser l’attribut srcset. Il vous permet de définir plusieurs tailles de photos et au navigateur d’afficher la meilleure taille possible.
Mauvaise implémentation du contenu injecté dynamiquement
Le contenu implémenté dynamiquement ne doit jamais apparaître au-dessus d’un contenu déjà chargé. La seule exception à cette règle est lorsque le changement est provoqué par l’interaction de l’utilisateur. Ce type de contenu n’affectera pas le CLS s’il est chargé dans les 500 ms suivant l’interaction.
