CLS & PageSpeed, « Éviter les changements de mise en page importants », comment réduire le Cumulative Layout Shift ?
Tout d’abord, il convient de comprendre la nature de cet avertissement présenté en français sous ces termes :
« Éviter les changements de mise en page importants : des éléments DOM contribuent en grande partie au CLS de la page »
Qu’est-ce que le CLS ou Cumulative Layout Shift ?
Le CLS est une mesure importante pour grandement affecter le score PageSpeed, pourtant, celle-ci n’est pas liée à la vitesse de chargement de la page, mais à l’expérience utilisateur offerte par cell-ci.
PageSpeed tente de mesurer à quel point les changements de disposition inattendus peuvent être désagréables et perturbants pour les utilisateurs.
Le but est d’éviter que ces « shift » entraîne de la confusion ou de la frustration chez l’utilisateur.
En effet, Google nous alerte sur cette mesure afin de nous aider à éviter les clics accidentelles de la part des internautes. Par exemple, si un utilisateur venait à cliquer sur un bouton « Payer » au lieu de « Quitter », parce que les boutons “sautent” lors du chargement de la page, cela pourrait s’avérer très préjudiciable.
Courte vidéo pour comprendre le CLS en 12 secondes (animation) :
C’est pourquoi il est essentiel de conserver un score de CLS dans le vert !
Pour déterminer votre taux de CLS, PageSpeed mesure l’instabilité perçue visuellement lors du chargement de votre page, et non pas lorsque l’utilisateur interagit avec cette page. Autrement dit, comment se déplace les éléments de webdesign, au fur et à mesure du chargement initial.
Comment corriger les problèmes liés au CLS ?
Il existe plusieurs façons d’améliorer le score du CLS.
Pour empêcher les mouvements indésirables au chargement, vous devriez d’abord réduire le nombre et la taille des ressources qui sont chargées sur votre site Web, ainsi qu’optimiser leur chargement grâce aux précédentes recommendations.
Cela inclut par exemple le préchargement des polices d’écritures qui sont parfois responsables de cet effet de « shit » au chargement. Cela arrive lorsque la police d’écriture arrive longtemps après le reste du webdesign.
Ensuite, la partie la plus importante de ce travail consiste à identifier quels éléments des pages causent du CLS, pour pouvoir traiter chaque problème spécifiquement.
La suroptimisation des performances peut être la cause du CLS. À ce jeu là, c’est souvent les mesures de chargement asynchrones qui sont souvent responsables, puisqu’elles servent à retarder le chargement de certains éléments. Citons par exemple le Lazy Loading des images sans dimensions spécifique, le chargement retardé des vidéos et bien sûr, le chargement asynchrone d’autres ressources comme le JavaScript, le CSS et les Polices d’écritures.
Par exemple, si le retard de chargement d’un élément semble être lié à un widget, qui est lui même lié à un plugin, il peut être utile d’ajouter des exclusions d’optimisation sur les ressources « .js » du plugin concerné.
Enfin, vous devriez toujours tester votre site Web en simulant différents navigateurs Smartphone et Tablet, grâce à aux outils de développement de Google Chrome, afin de vérifier que tout fonctionne correctement avant sa publication.
Voici quelques idées utiles à prendre en compte pour vous aider à éliminer le CLS de votre site :
- Assurez-vous que toutes les images ont des attributs de largeur et de hauteur définis afin qu’elles ne causent pas de changements de disposition lorsqu’elles se chargent
- Assurez-vous que votre plugin de Lazy Loading utilise un “placeholder” dans vos images affiché avant leur chargement réel
- Différez uniquement les ressources non critiques après le chargement initial du contenu et du webdesign, mais excluez les éléments indispensables de vos réglages « asynchrones »
- Évitez d’insérer du contenu très dynamique tout en haut de page, dans la zone visible sans défilement et considérez de descendre ces éléments dynamiques plus bas dans la page
- Veillez à ce que la taille des polices d’écriture soient explicitement déclarée dans votre CSS et ne vous fiez pas aux valeurs par défaut du navigateur de votre utilisateur
- Évitez d’utiliser de très grandes tailles de texte sur les polices “custom”, car cela peut entraîner de gros “reflow”
- Assurez-vous que les publicités intégrées en haut de page ne poussent pas le contenu vers le bas de manière inattendue quelques instants après le chargement initial.
- Ajoutez notre bout de code JavaScript permettant de reporter l’affichage du rendu HTML après le téléchargement complet de la page, ainsi que l’exclusion associée à votre plugin de Delay JS →
En suivant ces étapes, vous devriez être en mesure de réduire ou d’éliminer tout changement de disposition inattendu sur vos pages et d’améliorer l’expérience utilisateur globale.
