Corriger l'erreur de problème CLS dans Core Web Vitals dans GSC

Avec l’introduction des Core Web Vitals dans GSC, Google a clairement indiqué qu’il tiendrait compte des Web Vitals pour les pages comme facteur de classement. Cela fonctionnera avec d’autres facteurs de classement de Google tels que la vitesse de la page, HTTPS, la compatibilité mobile et la navigation sécurisée. Peu de détails ont été publiés pour le moment, mais Google Search Console a commencé à afficher des rapports pour les Core Web Vitals.

Il se compose de trois métriques de performance web :

1. LCP : Largest Contentful Paint
2. FID : First Input Delay
3. CLS : Cumulative Layout Shift

Il n’y a pas beaucoup d’informations disponibles pour le moment sur la façon dont vous pouvez corriger ces problèmes, mais il existe certaines pratiques qui peuvent vous aider à résoudre le Cumulative Layout Shift (CLS) ‘ Plus que’ pour vos pages web.

Qu’est-ce que le Cumulative Layout Shift ?

C’est une métrique de page qui rapporte la stabilité de la page. En termes simples, lorsque vous chargez une page web, commencez à lire ou à effectuer des actions, et si soudainement le contenu ou les éléments de la page web sautent ou changent, cela peut causer des problèmes en tenant compte de l’expérience de visualisation des utilisateurs.

CLS mesure la somme totale de tous les scores de décalage de mise en page individuels pour chaque décalage de mise en page inattendu qui se produit pendant toute la durée de vie de la page.

L’exemple ci-dessus montre qu’un chargement soudain d’éléments au-dessus de la boîte de confirmation de commande a causé un clic accidentel. Le CLS est la moyenne de tous ces décalages de contenu de page.

Pour offrir une bonne expérience utilisateur, les sites doivent s’efforcer d’avoir un score CLS inférieur à 0.1

Qu’est-ce qui cause un CLS élevé ?

Il peut y avoir un certain nombre de problèmes qui peuvent causer un CLS plus élevé, mais je vais souligner certaines des principales raisons :

• Reflux de contenu Lazy Load
• Images sans dimensions
• Injection d’annonces
• Embeds et iframes sans dimensions
• Un contenu attendant de se charger en raison d’une réponse lente

Reflux de contenu Lazy Load

Lazy Load est un plugin merveilleux qui charge les images uniquement lorsqu’une page est défilée et que le contenu entre dans le viewport. Mais de nombreuses fois, cela provoque un décalage du contenu vers le haut et vers le bas, causant un reflux, où le contenu en dessous ou autour de l’image est poussé pour faire de la place pour l’image nouvellement chargée.

Injection d’annonces

Les annonces sont l’un des plus grands contributeurs aux décalages de mise en page sur le web en poussant le contenu visible que vous visualisez vers le bas de la page. Cela se produit en chargeant les unités publicitaires après le chargement de la page, ce qui provoque un décalage significatif.

Élément attendant de se charger en raison d’une réponse lente

Parfois, en raison d’une réponse HTTP lente, quelques éléments peuvent prendre du temps à se charger, provoquant un décalage du contenu vers le haut ou vers le bas.

Comment corriger l’erreur CLS élevée dans Web Vitals ?

Si les images prennent du temps à se charger et que le contenu prend de l’espace pour les images. Alors, lorsque le contenu se charge, il déplace le contenu vers le bas, provoquant une instabilité de la mise en page.

Pour les images causant un décalage de contenu (Jank), réservez l’espace requis avec des boîtes de rapport d’aspect CSS. Cette approche garantit que le navigateur peut allouer la bonne quantité d’espace dans le document pendant que les médias se chargent. Vous pouvez lire cet article pour un chargement d’image sans Jank.

Les images chargées paresseusement peuvent également causer le problème, elles peuvent créer un énorme espace avant de prendre l’espace de l’image. Si vous rencontrez le problème de reflux de contenu en raison du Lazy Loading des images, vous pouvez lire cet article pour les solutions.

Si vous placez des annonces dans le contenu, assurez-vous que les décalages sont éliminés en réservant la taille de l’emplacement. Utilisez un espace réservé s’il n’y a pas d’annonce retournée plutôt que de faire s’effondrer l’espace réservé. Si vous utilisez WordPress, un bon plugin publicitaire comme Ad-Inserter s’occupera de garder l’espace correct pour les annonces afin que vous n’ayez pas à vous inquiéter.

Évitez le contenu dynamique, le contenu dynamique est celui qui est inséré après le chargement de la page. Surtout le contenu au-dessus de la ligne de flottaison, par exemple, les newsletters, les inscriptions, les publications connexes dans le DOM de contenu. Évitez de charger ce type de contenu au-dessus de la ligne de flottaison, si possible, essayez d’utiliser une boîte contextuelle.

Une réponse HTTP lente du serveur pourrait également causer une instabilité du contenu. Si vous utilisez un CDN et qu’il faut un certain nombre de millisecondes pour charger les éléments, cela provoque un saut du contenu, alors vous devez soit créer un espace dans le DOM, soit synchroniser le chargement avec d’autres éléments.

Il existe également d’autres causes de CLS élevé, vous pouvez trouver un guide détaillé pour optimiser le CLS sur le site officiel Web.Dev

Conclusion : Le post ne contient aucune solution technique ou liée au code, mais donne un aperçu de ce qui cause exactement le problème et comment vous pouvez aborder la correction du problème.

Si vous avez des réflexions sur Corriger l’erreur de problème CLS dans Core Web Vitals dans GSC, n’hésitez pas à les laisser dans la boîte de commentaires ci-dessous. De plus, veuillez vous abonner à notre chaîne YouTube DigitBin pour des tutoriels vidéo. Cheers !