Le décalage cumulatif de la mise en page (CLS) est un essentiel du Web qui évalue la cohérence visuelle d'une page. Le niveau de stabilité visuelle est déterminé par le nombre de modifications inattendues de la mise en page, sans interaction de l'utilisateur avec le site. Chaque modification du contenu de la page entraîne une modification de la mise en page, même sans clic sur un lien ou autre action similaire.
Le score global du décalage cumulatif de mise en page est déterminé en additionnant tous ces décalages.
Qu'est-ce que le décalage cumulatif de mise en page ?
Le délai de chargement des photos est le problème le plus fréquemment signalé par CLS . Il arrive souvent que le texte se charge avant les éléments multimédias. De plus, la structure de la page web change une fois que tous les éléments graphiques sont entièrement chargés. Ces problèmes surviennent même si vous faites défiler la page.
Même si une page web affiche un score CLS élevé, il peut être difficile de déterminer quand son chargement est terminé. La complexité du site et la quantité de contenu multimédia augmentent la probabilité que les utilisateurs rencontrent des changements de mise en page.
Réduire le décalage cumulatif de la mise en page dans WordPress ?
L'utilisation du débogueur CLS de Google Web Vitals est la méthode la plus efficace pour identifier les éléments responsables du score CLS élevé de votre site web. Il vous présente un GIF illustrant tous les éléments animés de votre site. Les scores CLS élevés sont généralement attribués aux publicités et aux ressources multimédias. Vous devrez optimiser chaque élément pour améliorer votre score CLS.
À cette fin, voici quelques méthodes qui peuvent être utilisées pour améliorer le score CLS de votre site web :
1. Ajouter des attributs de dimension à tous les fichiers multimédias
Comme votre navigateur devra évaluer la taille et l'orientation de votre image après son chargement, le risque de décalage de mise en page augmente si vous importez des fichiers multimédias dont les attributs sont inconnus. Les photos volumineuses et les fichiers haute résolution sont plus susceptibles de présenter ce problème que les fichiers plus petits. Redimensionnez les images dans l'éditeur de médias WordPress.
2. Assurez-vous que les polices sont chargées localement
Pendant le chargement de la police, le texte doit rester visible. Par conséquent, pour atteindre cet objectif, il est primordial de charger les polices localement plutôt que de les récupérer depuis des sites web hébergeant des polices tierces.
3. Évitez FOIT et FOUT
Le d'affichage de texte invisible (FOIT) se produit lorsqu'aucune police de remplacement n'est spécifiée. Par conséquent, les utilisateurs voient une zone vide à l'emplacement habituel du texte pendant que leur navigateur tente de charger la police ou d'en trouver une alternative.
Pendant un bref affichage de texte non stylisé (FOUT), votre navigateur utilisera sa police de secours par défaut jusqu'à ce qu'il puisse charger la police que vous avez sélectionnée. Pour remédier à ce problème, vous pouvez ajouter l'attribut `font-display: switch`.
Vous pouvez lire d'autres articles comme celui-ci sur le blog de Seahawk Media.
