Google search console me dit que j'ai un probleme de CLS ave

Créé le 27 July, 2023 | Seo | 772 views | 4 minutes read

Dans cet article nous ferons la lumière sur ce qu'est le CLS, ses effets sur les pages web et Comment résoudre définitivemen

Qu'est ce que le CLS (Cumulative Layout Shift)

CLS signifie Cumulative Layout Shift (décalage cumulatif de mise en page en français). C'est l'une des métriques utilisées pour évaluer la stabilité visuelle d'une page web pendant son chargement. Le CLS mesure la quantité de décalage des éléments de mise en page (texte, images, boutons, etc.) pendant le chargement de la page.

Le CLS est important pour l'expérience utilisateur car un décalage inattendu des éléments de la page peut être perturbant et frustrant pour les visiteurs. Imaginez que vous essayez de cliquer sur un bouton, mais au dernier moment, il bouge et vous cliquez accidentellement sur un autre élément. Cela peut entraîner des actions involontaires et une mauvaise expérience utilisateur.

Google Search Console et d'autres outils d'analyse des performances web fournissent des informations sur le CLS de vos pages afin que vous puissiez identifier les problèmes et les corriger pour améliorer l'expérience de vos utilisateurs, en particulier sur les appareils mobiles.

Quelles sont les principales causes du CLS

Les causes du CLS peuvent être:

1️⃣ Chargement asynchrone des ressources: Lorsque les images ou les publicités sont chargées de manière asynchrone sans réserver suffisamment d'espace, cela peut entraîner un décalage lorsque ces éléments apparaissent.

2️⃣ Contenu dynamique: Si du contenu est ajouté ou modifié de manière dynamique sur la page après le chargement initial, cela peut provoquer des décalages inattendus.

3️⃣ Fonts sans taille définie: Si les polices sont chargées sans taille définie, elles peuvent changer de taille lorsqu'elles sont appliquées, entraînant ainsi un décalage.

Pour améliorer le CLS de vos pages, vous pouvez prendre des mesures telles que:

• Définir les dimensions pour les éléments (images, vidéos, etc.) pour réserver l'espace nécessaire avant leur chargement.
• Éviter d'ajouter du contenu dynamique en haut de la page qui pourrait provoquer des décalages importants.
• Utiliser les polices Web avec des tailles spécifiées dans le CSS pour éviter les changements de taille inattendus.

En corrigeant les problèmes de CLS, les concepteurs de site web peuvent améliorer l'expérience globale des utilisateurs et favoriser un meilleur classement dans les résultats de recherche de Google, en particulier pour les recherches effectuées sur des appareils mobiles où le CLS a une plus grande importance.

Le problème de Cumulative Layout Shift (CLS) est dû à des changements dans la disposition des éléments de la page pendant son chargement.

Quels sont les facteurs qui peuvent entraîner un décalage cumulatif de mise en page ?

Plusieurs facteurs peuvent entraîner ce décalage ::

1. Chargement asynchrone des ressources : Lorsque des images, des publicités, des vidéos ou d'autres éléments multimédias sont chargés de manière asynchrone, c'est-à-dire qu'ils sont ajoutés à la page après le chargement initial, cela peut provoquer un décalage lorsque ces éléments apparaissent. Si l'espace n'est pas réservé pour ces éléments avant leur chargement, le contenu déjà présent sur la page peut se déplacer brusquement pour faire de la place aux nouvelles ressources.
2. Contenu dynamique : Lorsque du contenu est ajouté ou modifié de manière dynamique sur la page à mesure que l'utilisateur interagit avec le site (par exemple, des annonces qui se chargent après quelques secondes, des bannières qui apparaissent en faisant défiler la page, etc.), cela peut également provoquer des décalages inattendus.
3. Polices sans taille définie : Si les polices utilisées sur la page sont chargées sans qu'une taille spécifique soit définie dans le CSS, elles peuvent changer de taille lorsqu'elles sont appliquées, entraînant ainsi un décalage.
4. Images sans dimensions spécifiées : Lorsque des images sont intégrées dans la page sans que leurs dimensions soient spécifiées, le navigateur ne peut pas déterminer la taille de l'image à l'avance. Lorsque l'image est finalement chargée et que sa taille est connue, cela peut provoquer un décalage.
5. Annonces ou pop-ups : Les publicités ou les pop-ups qui s'affichent brusquement sur la page peuvent entraîner un décalage si elles n'ont pas été correctement prises en compte lors de la conception de la mise en page.

Pour éviter ou réduire le CLS, il est essentiel de concevoir vos pages de manière à ce que les éléments de la mise en page ne changent pas de position de manière inattendue lors du chargement. Cela implique de spécifier les dimensions pour les images et les éléments multimédias, de définir les tailles de police dans le CSS, d'éviter d'ajouter du contenu dynamique en haut de la page et de prendre en compte les publicités et les pop-ups lors de la conception de la mise en page. En prenant en compte ces bonnes pratiques, vous pouvez améliorer l'expérience utilisateur en réduisant les décalages indésirables lors du chargement de vos pages web.