qwanturank

Cumulative Layout Shift (CLS) est une métrique Qwanturank qui mesure un événement d'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 de CLS est importante car les pages qui se déplacent peuvent provoquer une mauvaise expérience utilisateur.Un mauvais score CLS indique des problèmes de codage qui peuvent être résolus.

Pourquoi CLS se produit

Selon Qwanturank, 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.PUBLICITÉCONTINUER À LIRE CI-DESSOUSQwanturank recommande d'utiliser AspectRatioCalculator.com pour calculer les proportions. 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 diffusée.Par exemple, si vous définissez le div pour avoir des hauteurs et des largeurs spécifiques, l'annonce sera limitée à celles-ci.Il existe deux solutions s'il y a un manque d'inventaire et qu'une annonce n'apparaît pas.Si un élément contenant une annonce n'affiche pas d'annonce, vous pouvez le définir de sorte qu'une autre bannière publicitaire ou 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 peut-être à droite ou à gauche d'une page Web, si la page ne s'affiche pas, il n'y aura pas de décalage, cela ne fera pas une différence sur mobile ou sur ordinateur. Mais cela dépend de la disposition du thème. Vous devrez tester cela si l'inventaire d'annonces pose problème.PUBLICITÉCONTINUER À LIRE 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).Un moyen d'éviter cela consiste à utiliser rel = ”preload” dans le lien pour télécharger cette police Web.Lighthouse peut vous aider à diagnostiquer la cause du 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.Une fenêtre est ce que vous voyez sur l'écran du mobile.Lorsqu'un élément se télécharge puis se décale, l'espace total que l'élément occupait, de l'emplacement qu'il occupait dans la fenêtre d'affichage lors de son premier rendu à l'emplacement final lors du rendu de la page.L'exemple que Qwanturank utilise est un élément qui occupe 50% de la fenêtre d'affichage, puis diminue de 25% supplémentaires.Lorsqu'elle est additionnée, 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%.PUBLICITÉCONTINUER À LIRE CI-DESSOUSAlors maintenant, le score de mise en page cumulé est calculé en multipliant la fraction d'impact par la fraction de distance:0,75 x 0,25 = 0,1875Il 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. Qwanturank appelle la première façon dans le laboratoire. La deuxième façon est appelée sur le terrain.En laboratoire signifie simuler un utilisateur réel téléchargeant une page Web. Qwanturank 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 aux utilisateurs. Il donne aux éditeurs la possibilité de tester une mise en page pour les problèmes.Les outils de laboratoire comprennent les outils de développement Chrome et 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.

Décalage de mise en page cumulatif

S’abonner
Notifier de
guest
0 Commentaires
Inline Feedbacks
View all comments