Décalage de mise en page cumulatif

La mise en page cumulative (CLS) est une mesure Google qui mesure une mesure de l'expérience utilisateur. Cette mesure devrait devenir un facteur de classement en 2021. Cela signifie qu'il est important de comprendre ce qu'est CLS et comment l'optimiser.

Définition du décalage de mise en page cumulatif

CLS est le déplacement inattendu des éléments de page Web pendant 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.La minimisation du CLS est importante car les pages qui se déplacent peuvent provoquer une mauvaise expérience utilisateur.Un mauvais score CLS indique un codage problèmes qui peuvent être résolus.

Décalage de mise en page cumulatif

Pourquoi CLS se produit

Selon Google, il existe cinq raisons pour lesquelles le décalage de mise en page cumulative se produit:

  1. «Images sans dimensions
  2. Annonces, incorporations et iframes sans dimensions
  3. Contenu injecté dynamiquement
  4. Polices Web provoquant FOIT / FOUT
  5. Actions en attente d'une réponse du réseau avant de mettre à jour DOM »

Les images et les vidéos doivent avoir les dimensions de hauteur et de 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érentes fenêtres utilisent le même rapport d'aspect C’est une bonne ressource.

Les publicités peuvent provoquer CLS

Celui-ci est un peu délicat à gérer. Une façon de traiter les annonces qui provoquent CLS est de styliser l'élément où l'annonce va être affichée. Par exemple, si vous définissez le div pour avoir des hauteurs et une largeur spécifiques, l'annonce sera limitée à celles-ci. Il existe deux solutions si il y a un manque d'inventaire et une annonce n'apparaît pas.Si un élément contenant une annonce ne montre pas d'annonce, vous pouvez le définir de sorte qu'une autre bannière publicitaire ou une image d'espace réservé soit utilisée pour remplir l'espace.Alternativement, pour certaines mises en page où une annonce remplit une ligne entière en haut d'une colonne à 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 aucune différence sur mobile ou bureau. Mais cela dépend de la disposition du thème. Vous devrez tester cela si l'inventaire d'annonces est un problème. PUBLICITÉ POURSUIVRE LA LECTURE CI-DESSOUS

Contenu injecté dynamiquement

Il s'agit de contenu 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 en tant qu'objet intégré.

Polices Web

Les polices Web téléchargées peuvent provoquer ce qui est connu sous le nom de Flash de texte invisible (FOIT) et Flash de texte sans style (FOUT) Lighthouse peut vous aider diagnostiquer ce qui cause le CLS.

CLS peut se faufiler pendant le développement

Un décalage de mise en page cumulatif peut se glisser pendant la phase de développement. Ce qui peut arriver, c'est que de nombreux éléments nécessaires au rendu de la page sont chargés dans le cache d'un 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.

Comment le décalage de mise en page cumulatif est calculé

Le calcul implique deux mesures / événements. Le premier est appelé Impact Fraction.

Fraction d'impact

La fraction d'impact est une mesure de l'espace occupé par un élément instable dans la fenêtre d'affichage.Une fenêtre d'affichage est ce que vous voyez sur l'écran du mobile.Lorsqu'un élément télécharge puis décale, l'espace total que l'élément occupe, à partir de l'emplacement où il se trouve. occupé dans la fenêtre lorsqu'elle est rendue pour la première fois à l'emplacement final lorsque la page est rendue.L'exemple que Google utilise est un élément qui occupe 50% de la fenêtre, puis diminue de 25% supplémentaires.Lorsqu'il est ajouté, la valeur de 75% est appelée la fraction d'impact et elle est exprimée sous la forme d'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 page a déplacé de la position d'origine à la position finale.Dans l'exemple ci-dessus, l'élément de page s'est déplacé de 25%. 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 qui est important à retenir, c'est que le score est un moyen de mesurer un facteur important de l'expérience utilisateur.

Comment mesurer CLS

Il existe deux façons de mesurer le CLS. Google appelle la première façon dans le laboratoire. La deuxième méthode est appelée dans le champ. Dans le laboratoire, il s'agit de simuler un utilisateur réel téléchargeant une page Web. Google utilise un Moto G4 simulé pour générer le score CLS dans l'environnement de laboratoire.Les outils de laboratoire sont les meilleurs pour comprendre comment une mise en page peut fonctionner avant de la diffuser en direct aux utilisateurs. Il donne aux éditeurs la possibilité de tester une mise en page pour les problèmes.Les outils Lab se composent de Chrome Dev Tools et de Lighthouse.

Comprendre le décalage de mise en page cumulative

Il est important de comprendre le décalage de mise en page cumulatif. Il n'est pas nécessaire de comprendre comment effectuer les calculs vous-même. Mais il suffit de le savoir et de savoir ce qui est important car cette métrique devrait devenir un facteur de classement dans le courant de 2021.