10 Août UX : Comment améliorer votre Cumulative Layout Shift (CLS) ?

Qu’est ce que le Cumulative Layout Shift ou CLS ?

Le Cumulative Layout Shift (CLS) est une métrique mesurant l’instabilité du contenu, obtenue en additionnant les changements de mise en page qui se produisent au-delà des 500 premières millisecondes du chargement de la page. Elle examine la quantité de contenu qui se déplace dans l’écran de l’utilisateur ainsi que la distance à laquelle les éléments concernés ont été déplacés.

Vous vous êtes sans doute déjà rendus sur un site pour lire un article et au milieu de celui-ci, vous avez des éléments qui se sont déplacés soudainement. Cela vous oblige à retrouver l’endroit où vous étiez il y a quelques secondes… C’est une chose que l’on retrouve souvent sur le Web. Qu’il s’agisse de la lecture « passive » d’un article ou que vous essayiez d’interagir avec la page en cliquant sur un bouton qui ne se trouve plus là au « clic » Et de vous à moi, je trouve cela très frustrant. C’est un mauvais signal que ces sites nous envoient. Ces expériences sont déstabilisantes, voire frustrantes.. Le CLS est considéré par Google comme l’un des Core Web Vitals, soit l’un des critères UX essentiels au bon fonctionnement d’un site web. En tant que Consultant SEO, je vous recommande de faire attention à l’UX sur vos sites. Pour mesurer ces critères, découvrez la liste des outils mis à votre disposition par Google.

Des images sans dimensions

Il y a quelques temps maintenant, lorsque le Responsive Web Design a été introduit, les développeurs se sont mis à utiliser le CSS pour redimensionner les images. grâce à cette méthode, l’espace est alloué à l’image qu’une fois que cette dernière est importée et que le navigateur peut en déterminer les dimensions. cela signifie qu’à chaque fois qu’une image s’affiche, la page se dimensionne avec l’espace nécessaire à l’image. Cela a pour conséquence un texte qui se déplace au beau milieu de notre lecture ! Et voilà pourquoi, nous sommes perdus…

Et les publicités dans les pages Web ?

L’un des principaux facteurs de décalage de mise en page est bien entendu à cause des publicités intrusives ! Les éditeurs tout comme les publicitaires prennent souvent en charge des tailles d’annonces que l’on appelle dynamique. cela a pour objectif d’augmenter les performances, revenus car le taux de clic est beaucoup plus élevé. Le problème, c’est que le contenu visible est renvoyé en bas de page.

Néanmoins, Vous pouvez éviter ces changements de présentation en réservant un espace statique pour vos encarts publicitaires. En d’autres termes, vous devez styliser l’élément avant que la publicité ne se charge.

Embeds et iframes sans dimension

Les Widgets « embedded » vous permettent d’intégrer du contenu « portable » dans votre page. Les plateformes qui proposent des embeds ne réservent pas toujours suffisamment d’espace pour leurs embeds et cela peut provoquer des changements de mise en page. 

Afin de contourner ce problème, avec des outils d’inspection de votre navigateur préféré, vous pouvez trouver la hauteur de votre intégration finale. Cela a pour but une fois l’embed chargé, que la frame puisse se redimensionner et s’adapter au contenu. 

Quid des animations sur les pages Web ?

Les modifications des propriétés CSS peuvent nécessiter que le navigateur réagisse à ces changements. Un certain nombre de valeurs déclenchent un repositionnement.

Il est pourtant possible de gérer les animations de manière à éviter tout décalage de mise en page, par exemple en utilisant transform ou opacity plutôt que d’actionner une animation avec box-shadow ou box-sizing (et tant d’autres).

Pour terminer avec le Cumulative Layout Shift

Améliorer le CLS de son site n’est parfois pas très compliqué en soi. Il arrive dans certains cas, qu’un site cumule plusieurs problèmes et là, cela peut vite devenir complexe ! Il est parfois nécessaire de faire appel à une aide extérieure. De nombreux Webmasters freelance sont là pour vous accompagner.