Comment améliorer le CLS - Cumulative Layout Shift ?

Referencement

SEO / Referencement 140 Views comments

Les Core Web Vitals (Signaux Net Essentiels en français) évaluent la performance du chargement d’une page net pour un internaute :&

  • Quel délai avant le premier élément visuel (LCP) ?
  • Quelle réactivité de la page à une interaction (FID) ?
  • Quelle stabilité visuelle lors du chargement (CLS) ?

Qu’est-ce que le Cumulative Format Shift ?

Le CLS (Cumulative Format Shift) mesure donc la stabilité visuelle d’une page. L’exemple le plus parlant est celui d’un website média, par nature dense en encart publicitaire. Le titre et le déhowever d’un article apparaissent, l’internaute s’apprète à les faire défiler, mais au moment où il clique apparaît un bandeau publicitaire. L’internaute est donc amené vers un website tiers non souhaité, il lui faut faire marche arrière pour revenir à son article, et être vigilant à ne pas re-cliquer sur le bandeau shock.

Optimize Cumulative Format Shift - Google - https://web.dev/optimize-cls/

La state of affairs étant courante sur les sites net modernes, il est cohélease que Google en ait tiré un indicateur de mesure, afin d’encourager les éditeurs de website à l’améliorer.

Comment le mesurer ?

C’est une métrique composée de deux éléments :

  • Floor = la surface de l'écran influenceée par le décalage
  • Distance = le décalage des éléments concernés, leur distance parcourue sur l'écran

Dans l'exemple : l'élément principal couvre 50% de l'écran et se déplace de 25%, il a donc exploité 75% de l'écran au complete.

Le CLS est donc : Floor x Distance = 0,75 * zero,25 = zero,1875

On est donc dans le seuil d’Amélioration nécessaire pour que la page concernée soit considérée comme dépourvue de CLS

Plus simplement, les outils de webperformance de Google permettent de relever le CLS d’une page donnée : PageSpeed Insights (website tiers) et Lighthouse (module du navigateur Google Chrome). La meilleure supply de données reste naturellement celle qui remonte les données réelles d’utilisateurs, à savoir la Search Console. Dans le rapport des Signaux Net Essentiels, il est relevé le nombre de pages considérées comme Lentes ou nécessitant une amélioration, et chaque KPI dispose de son rapport.

On identifie donc facilement les pages les plus affectées, regroupées par pages similaires (gabarit / template).

Remark améliorer le CLS ?

Bonne nouvelle, en plus de nous donner le most de données de mesure, Google nous guide pour résoudre d’éventuels problèmes d’instabilité visuelle.

Plusieurs scénarios courants sont abordés :

  1. Photographs ou publicités sans dimensions définies
  2. Contenu injecté dynamiquement (pop-ins)
  3. Chargement des polices

Le cas des pictures se chargeant après la structure de la web page est courant sur tout sort de website, notamment en e-commerce (fiches ou listes de produits).

Dans l’exemple suivant, le nom des produits se charge en premier puis viennent les pictures des produits. Elles décalent les noms déjà chargés, rendant la web page instable pendant son chargement.

Il est potential d’empêcher ce comportement en définissant des zones réservées pour ces pictures, avant même leur chargement.

Une des méthodes possibles est de déclarer les dimensions des pictures, les navigateurs sauront ensuite leur réserver un espace en calculant le ratio entre largeur et hauteur (aspect-ratio).

Il est aussi attainable de déclarer directement un aspect-ratio dans le CSS pour l’appliquer à une catégorie d’pictures similaires.

CSS du template de page, avant (rouge) et après (vert) ajout de l'aspect-ratio

Notons que cette amélioration a nettement amélioré les scores du website net concerné lors de sa mise en production : d’un CLS de 0.178 on est moveé à zero.002. Et de 26% des visiteurs have an effect onés par une instabilité visuelle du website, on est crossé à 1,27% (données provenant de la Search Console, remontant les performances constatées par les utilisateurs du website).



&

Comments