Décalage cumulatif de l'agencement – Aperçu du facteur de classement 2021

Le Cumulative Layout Shift (CLS) est une mesure de Google qui mesure l’expérience de l’utilisateur. On dit que cette mesure deviendra un facteur de classement en 2021. Il est donc important de comprendre ce qu’est le CLS et comment l’optimiser.

Définition de la modification cumulative de la présentation

Le CLS est le déplacement inattendu d’éléments d’une page web alors que la page est encore en cours de téléchargement. Les types d’éléments qui ont tendance à provoquer un décalage sont les polices, les images, les vidéos, les formulaires de contact, les boutons et d’autres types de contenu.

Il est important de réduire au minimum le nombre de CLS, car les pages qui se déplacent peuvent entraîner une mauvaise expérience pour l’utilisateur.

Un mauvais score au CLS est révélateur de problèmes de codage qui peuvent être résolus.

Pourquoi le CLS existe-t-il ?

Selon Google, il y a cinq raisons pour lesquelles le Cumulative Layout Shift se produit :

1. « Images sans dimensions
2. Annonces, encarts et iframes sans dimension
3. Contenu injecté dynamiquement
4. Les polices de caractères Web à l’origine de la FOIT/FOUT
5. Actions en attente d’une réponse du réseau avant la mise à jour du DOM ».

Les images et les vidéos doivent avoir les dimensions en hauteur et en largeur déclarées dans le HTML. En ce qui concerne les images réactives, assurez-vous que les différentes tailles d’images pour les différents points de vue utilisent le même rapport hauteur/largeur.

Google recommande d’utiliser AspectRatioCalculator.com pour calculer les rapports d’aspect. C’est une bonne ressource.

Les publicités peuvent être à l’origine de l’ELC

Celui-ci est un peu délicat à traiter. Une façon de traiter les publicités qui provoquent des CCL est de styliser l’élément où la publicité va être diffusée.

Par exemple, si vous donnez au div une hauteur et une largeur spécifiques, la publicité sera limitée à ces deux dimensions.

Il y a deux solutions en cas de manque d’inventaire et d’absence d’annonce.

Si un élément contenant une publicité n’affiche pas de publicité, vous pouvez le paramétrer de manière à ce qu’une bannière publicitaire alternative ou une image de remplacement soit utilisée pour remplir l’espace.

Par ailleurs, pour certaines mises en page où une publicité remplit une ligne entière en haut d’une colonne, par exemple dans la gouttière droite ou gauche d’une page web, si la page n’apparaît pas, il n’y aura pas de décalage, cela ne fera pas de différence, ni sur le mobile ni sur le bureau. Mais cela dépend de la disposition du thème. Vous devrez le tester si l’inventaire des publicités pose problème.

Contenu injecté dynamiquement

C’est le contenu qui est injecté dans la page web. Par exemple, dans WordPress, vous pouvez créer un lien vers une vidéo YouTube ou un tweet et WordPress affichera la vidéo ou le tweet comme un objet intégré.

Polices de caractères pour le Web

Les polices web téléchargées peuvent provoquer ce que l’on appelle le Flash of invisible text (FOIT) et le Flash of Unstyled Text (FOUT).

Un moyen d’éviter cela est d’utiliser rel= »preload » dans le lien pour télécharger cette police web.

Lighthouse peut vous aider à diagnostiquer les causes du syndrome de stress post-traumatique.

CLS peut se faufiler pendant le développement

Des modifications cumulatives de la mise en page peuvent se glisser au cours de la phase de développement. Ce qui peut se produire, c’est que de nombreux éléments nécessaires au rendu de la page sont chargés dans la mémoire cache du navigateur. La prochaine fois qu’un développeur ou un éditeur visitera la page en cours de développement, il ne remarquera pas de changement de mise en page car les éléments de la page sont déjà téléchargés.

C’est pourquoi il est utile d’avoir une mesure en laboratoire ou sur le terrain.

Calcul de l’effet cumulatif de la modification de la configuration

Le calcul implique deux mesures/événements. Le premier est appelé Fraction d’impact.

Fraction d’impact

La fraction d’impact est une mesure de l’espace qu’un élément instable prend dans le hublot.

Un viewport est ce que vous voyez sur l’écran du téléphone portable.

Lorsqu’un élément est téléchargé puis déplacé, l’espace total que l’élément occupait, de l’emplacement qu’il occupait dans la fenêtre de visualisation lors de son premier rendu à l’emplacement final lors du rendu de la page.

L’exemple que Google utilise est un élément qui occupe 50% de la fenêtre de visualisation et qui diminue ensuite de 25%.

Une fois additionnée, la valeur de 75 % est appelée « Fraction d’impact » et elle est exprimée par un score de 0,75.

Fraction de distance

La deuxième mesure est appelée la fraction de distance. La fraction de distance est la quantité d’espace que l’élément de la page a déplacé de la position initiale à la position finale.

Dans l’exemple ci-dessus, l’élément de page s’est déplacé de 25%.

Le score cumulé de la mise en page est donc maintenant calculé en multipliant la fraction d’impact par la fraction de distance :

0.75 x 0.25 = 0.1875

Il y a d’autres considérations mathématiques et autres qui entrent dans le calcul. Ce qu’il est important de retenir, c’est que le score est une façon de mesurer un facteur important de l’expérience de l’utilisateur.

Comment mesurer le CLS

Il y a deux façons de mesurer le CLS. Google appelle la première façon dans le Labo. La seconde est appelée sur le terrain.

Dans le laboratoire, cela signifie simuler un utilisateur réel qui télécharge une page web. Google utilise un Moto G4 simulé pour générer le score CLS dans l’environnement du laboratoire.

Les outils de laboratoire sont les meilleurs pour comprendre comment une mise en page peut fonctionner avant de la mettre en ligne pour les utilisateurs. Ils donnent aux éditeurs la possibilité de tester une mise en page pour les numéros.

Les outils de laboratoire se composent de Chrome Dev Tools et de Lighthouse.

Comprendre le changement cumulatif de présentation

Il est important de comprendre le concept de Cumulative Layout Shift. Il n’est pas nécessaire de comprendre comment faire les calculs soi-même. Mais il suffit de le savoir et de savoir ce qui est important, car cette mesure devrait devenir un facteur de classement dans le courant de 2021.