Comment améliorer le décalage de mise en page cumulatif (CLS) sur WordPress

Tutoriels • WordPressÉditorial • 16 août 2021 • 6 minutes LIRE

Il est très courant de constater que des changements soudains se produisent lorsque vous êtes sur un site Web. Par exemple, si vous lisez un article ou faites des achats dans une boutique en ligne, le texte et la taille changent tout d’un coup.

Vous recherchez peut-être dans la catégorie souhaitée, mais vous êtes maintenant sur un lien indésirable. De même, lorsque vous essayez de cliquer sur un lien pour accéder à un site Web, mais que cela finit par vous emmener ailleurs.

Ici, vous pouvez ajouter la vidéo du site Web de Google : https://web.dev/cls/

Ces expériences sont ennuyeuses et font perdre tout intérêt aux utilisateurs. Mais s’ils continuent à se produire encore et encore, ils peuvent causer de réels dommages. Ces changements inattendus sont dus au chargement asynchrone des ressources.

Une autre raison est l’ajout de l’élément DOM chargé au-dessus du contenu existant. Une police qui n’est pas cohérente peut également en faire partie. Il peut s’agir d’une vidéo ou d’une image aux dimensions indéfinies.

Les publicités de tiers sont également notoires à cet égard. Le widget peut également causer des problèmes. Parfois, les widgets se redimensionnent, ce qui est l’une des causes majeures de la perturbation de l’intégrité du site Web.

Ce qui rend ce problème plus compliqué, c’est que le fonctionnement d’un site dans le développement est généralement différent de l’expérience utilisateur.

Le contenu personnalisé ou ayant fait l’objet d’une autorisation de tiers ne se comporte pas de la même manière lors de son développement et de sa production. Les captures du développeur sont la plupart du temps déjà présentes dans les caches.

Les appels API, en revanche, sont si rapides que vous ne pouvez même pas remarquer le retard. Pour surmonter ces obstacles, la métrique de décalage de mise en page cumulative est utile. C’est la meilleure mesure pour mesurer les moments exacts où tous ces changements se produisent pour les utilisateurs.

Qu’est-ce que le décalage de mise en page cumulatif ?

Cumulative Layout Shift est un système de mesure Web essentiel. L’objectif principal de ce système est de calculer tous les décalages de mise en page. Les décalages de mise en page qui y sont calculés sont ceux qui n’ont pas lieu en raison de l’interaction de l’utilisateur.

Il calcule la proportion totale de la fenêtre qui est impactée par les mises en page. Il compte également la distance de déplacement de tous les éléments. Il aide à améliorer la qualité en détectant le nombre exact de dispositions de quarts de travail.

De nombreuses requêtes sont faites pour connaître le meilleur score de CLS. Il peut être aussi bas que zéro. Les pages complètement statiques ont généralement un score CLS de 0. Le nombre augmente dès qu’il y a des changements de mise en page.

Un bon score CLS signifie que vous devez rester plus bas. Si votre score est inférieur, cela signifie que votre mise en page est plus stable.

La source: https://web.dev/cls/

Des scores CLS plus élevés en revanche. Google recommande d’avoir ce score inférieur à 0,1. Un score inférieur 0,1 est un bon score. Si le score cls est entre 0. 1 à 0. 25 spectacles que vos changements de mise en page doivent être améliorés.

Tous les quarts de travail ayant un Les CLS de 0,25 ou plus sont connus comme des mises en page défaillantes.

Le décalage de mise en page cumulatif affecte-t-il votre référencement ?

CLS est important pour conserver des enregistrements des modifications apportées à vos mises en page. À l’avenir, cela deviendra un facteur de classement. Cela affecte l’optimisation de votre moteur de recherche car hébergement rapide Est-ce que.

Un score CLS élevé signifie que vos lecteurs ont du mal à utiliser votre site Web.

Le décalage de mise en page cumulatif et le référencement auront une relation solide à l’avenir. Les mesures LCP et FID ainsi que CLS affecteront votre référencement.

Vous pouvez considérer cela comme une chose mineure. Il détient toujours une grande valeur dans le calcul du trafic ciblé que vous obtenez à partir de différents moteurs de recherche. Il affiche directement le système de mesure du comportement de l’utilisateur. Google nie la possibilité d’utiliser des métriques telles que le temps d’arrêt à des fins de classement et d’évaluation.

Plusieurs moteurs de recherche tels que Bing admettent qu’ils utilisent des métriques pour améliorer leurs algorithmes de classement. Ce sont des raisons importantes pour lesquelles CLS fait partie de votre stratégie d’optimisation des moteurs de recherche.

Qu’est-ce qui cause le CLS ?

Il y a plusieurs raisons à ce changement de disposition cumulatif. Les causes les plus courantes de ce changement incluent la présence d’images aux dimensions indéfinies. Parfois, des publicités, des iframes et des intégrations sont présents sur le site Web sans aucune dimension.

Cela augmente le score CLS. Si votre contenu est injecté dynamiquement, cela peut créer un changement de mise en page. Il est important de savoir que le flash des textes sans style est un contributeur majeur à ces changements. Flash de textes invisibles joue également le même rôle.

S’il y a une longue attente avant la mise à niveau du DOM, les actions restantes en attente de la réponse du réseau peuvent également provoquer ce décalage. Ce sont les causes les plus courantes de ce changement de disposition.

Comment améliorer CLS dans WordPress

Tout comme la réparation de n’importe quel autre site, il s’agit d’une chose légèrement technique pour résoudre ces problèmes. Il faut se concentrer sur les causes et essayer de les éviter autant que possible.

La plupart du temps, vous pouvez éviter un changement de score CLS plus élevé en vous concentrant uniquement sur le code et en créant une conception de site Web minimale comme le nouveau tendances de conception de sites Web dicte.

Voici quelques-unes des choses les plus importantes à considérer lors de l’amélioration de CLS dans WordPress.

1. Définir la dimension de l’image

Il est important de définir les dimensions des images pour votre site Web. Si vous ne le faites pas, vos images continueront de modifier la mise en page.

Le contenu de votre site Web sera affiché avec un changement continu sur le site Web. Cela diminuera la qualité de l’expérience utilisateur. Si vous utilisez l’éditeur WordPress, vous êtes entre de bonnes mains.

WordPress le fera pour vous automatiquement. Il définira les dimensions des images responsives. Mais si vous ajoutez les dimensions des images manuellement, vous devez garder à l’esprit de les ajouter au code à chaque fois.

Les attributs de hauteur et de largeur des dimensions de l’image doivent être utilisés.

2. Définir les dimensions des iframes

Vous devez également ajouter des dimensions pour les iframes. Si tu veux améliorer l’expérience des utilisateurs sur votre site Web vos inserts ont besoin de dimensions.

Si vous intégrez des cartes Google ou une vidéo, vous devez ajouter une largeur et une hauteur spécifiques aux dimensions.

L’utilisation d’un espace réservé vous aidera également avec la performance. Un espace réservé est généralement utilisé avant l’intégration. C’est une pratique importante pour garder vos iframes dans des dimensions spécifiques.

WP Rocket est une bonne option pour remplacer l’intégration YouTube.

3. Définir l’espace pour les annonces

Les publicités sont les mêmes que les intégrations mais elles ont plus d’importance. Leur importance est due à leur contribution majeure au CLS. Les annonces à chargement tardif provoquent le saut du site Web. Il existe une solution à ce problème.

Il vous suffit de réserver un espace pour ces annonces dans le code. Lorsqu’un site est en phase de développement, il a également besoin d’espace pour les annonces.

Cet espace dans le code entraînera un chargement parfait du contenu de l’annonce. Cela ne créera aucun décalage pour les utilisateurs.

Un autre facteur important tout en prenant soin des annonces est le placement. Habituellement, lorsque des publicités sont ajoutées dans la fenêtre du haut, elles provoquent un changement majeur.

4. Résoudre les problèmes de chargement des polices

Il est important de fixer les tailles de police et leur chargement. La façon dont vos polices personnalisées se chargent sur le site Web est une question importante. Si vous utilisez des polices Google ou des polices Adobe, vous devrez faire face aux changements de mise en page avec un flash de texte sans style et un flash de texte invisible.

Ce problème se produit lorsque le navigateur du visiteur agit rapidement et charge le texte avant les polices personnalisées. Pour éviter ce problème, vous pouvez précharger les fichiers de polices nécessaires.

Cela aidera de la bonne manière à charger le fichier de police dans les navigateurs du visiteur. Mais assurez-vous de précharger uniquement les ressources importantes.

Utiliser trop de préchargement affectera votre site. Cela ralentira le processus de chargement du contenu. Vous pouvez également combiner le préchargement avec l’affichage des polices pour obtenir de meilleurs résultats. Une pile de polices système est un autre moyen incroyable d’éviter complètement le problème.

Conclusion

Le décalage de mise en page cumulatif est important pour calculer les changements de mise en page de vos sites Web. Le score CLS renseigne sur l’expérience utilisateur sur votre site Web. Cela aide également à améliorer le référencement.

Il est important de résoudre les problèmes tels que les images, les dimensions des iframes et la définition de l’espace pour les annonces. Cela gardera un score CLS inférieur.