qwanturank

Le décalage de mise en page cumulé mesure le nombre total de changements de mise en page qui se produisent sur une page Web lors de son chargement et de ses interactions. Google mesure le CLS afin de juger de l’expérience globale de la page aux côtés des deux autres éléments essentiels du Web, le délai de première entrée (FID) et la plus grande peinture de contenu (LCP). Le fait d’avoir plusieurs changements de contenu sur une page entraînera un pire score CLS. Une expérience de page idéale est une page avec un CLS minimal. Un changement de mise en page, ou un changement de contenu, est chaque fois que quelque chose sur la page change visiblement de position dans le cadre. qui déplacent la page au fur et à mesure qu’elle se charge. Voici un exemple de ce à quoi ressemble une faible quantité de CLS À l’été 2021, Google a confirmé que les trois éléments essentiels du Web font désormais partie du facteur de classement Page Experience. Il est donc important de s’assurer que les éléments essentiels du Web de vos pages se situent tous dans les plages suivantes que Google juge « bonnes ». Bon Besoin d’amélioration Mauvais LCP ≤2,5s ≤4s >4s FID ≤100ms ≤300ms >300ms CLS ≤0,1 ≤0,25 >0,25 .

Comment vérifier le décalage de mise en page cumulatif

Il existe de nombreuses façons de vérifier le CLS de décalage de mise en page cumulatif de votre page. Vous pouvez utiliser les outils de Google tels que Lighthouse ou le rapport Core Web Vitals dans Google Search Console, ou vous pouvez vérifier Semrush à l’aide de Site Audit.

Définir un CLS bon ou mauvais

Google définit officiellement les scores CLS dans les plages suivantes :

  • Bon CLS : inférieur à 0,10
  • Besoin d’amélioration CLS : Entre 0,10 et 0,25
  • Mauvais CLS : au-dessus de 0,25
  • Qu’est-ce qui cause un mauvais CLS ?

    Comme indiqué ci-dessus, les changements de mise en page peuvent être causés par beaucoup de choses. Les coupables les plus courants sont :

  • Images sans dimensions
  • Annonces, intégrations et iFrames sans dimensions
  • Contenu injecté dynamiquement
  • Polices Web provoquant FOIT/FOUT (flash de texte invisible et flash de texte sans style)
  • Toutes ces causes vivent dans le code de votre page et peuvent être identifiées en seulement quelques minutes d’inspection. Pour les images et les intégrations sans dimensions, il suffit d’identifier ces images puis d’ajouter les dimensions connues à votre code pour éviter les changements de mise en page. Si vous ne savez pas

    Comment corriger et éviter les changements de mise en page

    Pour corriger vos décalages cumulés de mise en page, vous devez d’abord identifier les éléments à l’origine des décalages. Ensuite, votre développeur peut prendre un certain nombre d’actions pour résoudre le problème et optimiser la vitesse de la page. Lighthouse a quelques recommandations qui pourraient vous aider, vous et/ou votre équipe de développement, à faire face aux changements, telles que :

    Comment inspecter les quarts de travail

    Pour optimiser le CLS, vous devez comprendre ce qui cause les changements. Il y a deux façons de voir les changements exacts :

  • Utilisation d’une recommandation spéciale dans l’audit de performance de Lighthouse intitulée « Éviter les grands changements de mise en page »
  • Utilisation de la trace
  • Dans les deux variantes, ce sera facile si vous lancez un audit de performance via Lighthouse. Pour ouvrir Lighthouse, cliquez avec le bouton droit n’importe où sur la page Web et sélectionnez Inspecter.

    Évitez les grands décalages de mise en page

    Recherchez et ouvrez la recommandation « Évitez les grands changements de mise en page ». Il est disponible dans l’audit Lighthouse Performance s’il y a eu au moins un changement de tâche pendant le chargement. Faites simplement défiler vers le bas pour le trouver. Si vous développez l’élément, vous pouvez vérifier la « Contribution CLS » de chaque élément.
    Ne vous inquiétez pas si vous voyez un élément avec une contribution CLS de 0,001, par exemple, car cela ne nuirait pas vraiment à l’expérience utilisateur. Nous savons que Google marque les pages qui ont jusqu’à 0,010 décalage au total comme de « bonnes » pages.

    Affichage de la trace d’origine

    Pour savoir quelle partie d’une page a changé dans une chronologie, vous pouvez afficher la trace d’origine dans Lighthouse. Tout d’abord, cliquez sur Afficher la trace d’origine dans le rapport Lighthouse. Cela ouvrira l’onglet Performance. Parcourez la piste Expérience ou la piste Web Vitals pour savoir quand ces changements se sont produits. Effectuez un zoom avant et recherchez les changements de mise en page (LS) pour voir quelle partie de la page a effectué ces changements pendant le chargement.

    Mesurer le CLS à Semrush

    L’audit de site de Semrush vous permet de suivre les changements de mise en page cumulatifs, ainsi que les autres éléments essentiels du Web lorsque vous auditez votre site Web. Le grand avantage d’utiliser Semrush ici est qu’il enregistrera vos données historiques dans le rapport spécial Core Web Vitals. Cela vous permet d’inspecter d’abord vos principaux éléments vitaux Web, puis d’apporter des modifications, puis de réexécuter l’audit et de voir comment vos scores se sont améliorés. Vous trouverez également un rapport complet sur les performances avec plus d’informations sur la façon d’améliorer la vitesse globale de chargement des pages de votre site Web, ainsi que d’autres conseils d’optimisation. Essayez-le aujourd’hui et optimisez l’expérience de votre page  !

    Qu'est-ce que le CLS et pourquoi est-ce important?

    S’abonner
    Notification pour
    guest

    0 Commentaires
    Commentaires en ligne
    Afficher tous les commentaires