Cumulative Layout Shift
Cumulative Layout Shift (CLS) est une des métriques de Core Web Vitals. Cet article explique ce qu'est cet indicateur et comment l'améliorer.
Qu'est-ce que le Cumulative Layout Shift ?
Selon PageSpeed, les changements de mise en page inattendus peuvent perturber l'expérience utilisateur de différentes manières, par exemple en lui faisant perdre sa place pendant la lecture si le texte se déplace soudainement, ou en l'incitant à cliquer sur le mauvais lien ou bouton. Dans certains cas, cela peut causer des dommages graves. Pour éviter cela, votre site web doit offrir une grande stabilité visuelle.
Vous le trouverez sur les rapports Google PageSpeed (ou Lighthouse).
Un changement de mise en page est la façon dont un élément change de position pendant le chargement de la page.
Voici un exemple de changement de position :
Le CLS ne compte que les changements de disposition inattendus sur les outils de test. Cela n'inclut que les changements de disposition qui ne sont pas induits par l'interaction de l'utilisateur (survol de la souris, clic sur un bouton).
Le score du changement de mise en page dépend de la façon dont les éléments changent de taille et de position. Plus l'élément est grand, plus le changement sera perceptible et plus son influence sera plus importante sur les autres éléments voisins.
Important : le CLS est calculé pendant tout le cycle de vie de la page, du chargement à la sortie. Ainsi, tous les changements de mise en page se produisant entre ces deux étapes feront partie du score final du CLS pour une visite particulière.
Qu'est-ce qui provoque le changement de mise en page ?
| Images sans dimensions | Images sans attributs explicites de hauteur et de largeur | Élevé |
| Contenu injecté dynamiquement | Annonces, encarts et iframes sans dimensions | Élevé |
| Polices Web causant un flash de texte non stylisé (Flash of Unstyled Text - FOUT) | Polices déclarées après le les directives CSS d'un élément | Faible en général - Élevé pour les textes de grande taille |
| Actions en attente d'une réponse du réseau avant la mise à jour du DOM | Éléments dépendant des appels d'API, comme les galeries d'Instagram | Élevé sur le réseau mobile |
| Animations | Utilisation des animations de transition CSS au lieu d'animer les propriétés | Faible |
Le CLS a un impact plus important sur les mobiles
Taille de l'écran plus petit
Tous les éléments ne s'adaptent pas parfaitement à la taille de l'écran. En général, le même élément prendra plus d'espace vertical sur mobile que sur moniteur bureau. Ainsi, toute modification de la disposition aura un changement de "distance" plus significatif.
Il est assez fréquent de voir le score CLS sur mobile moins bon que celui du bureau.
Le réseau mobile augmente le temps de chargement des fichiers et des requêtes
Plus une requête CSS, JS ou AJAX est lente au chargement, plus elle aura d'impact sur le CLS mobile.
Les mobiles ont des processeurs moins performants
Cela aura généralement un impact sur le CLS. Surtout pour les éléments qui dépendent d'un traitement complexe de JavaScript.
Comment trouver ce qui dégrade le CLS sur votre page
Dans PageSpeed Insights, faites défiler vers le bas jusqu'à la section Causes des décalages de mise en page pour trouver les éléments qui changent de position pendant le chargement de la page :
Comment WP Rocket améliore-t-il le CLS ?
Ces optimisations WP Rocket devraient améliorer la métrique CLS :
- Ajouter les dimensions d'image manquantes : Ajoute une dimension statique pour les images. Aucun décalage de mise en page ne se produira même si les images sont chargées en lazyload.
- Supprimer les ressources CSS inutilisées : Cette option permet d'accélérer l'affichage du contenu au-dessus de la ligne de flottaison, sans aucun élément bloquant le rendu. Utilisez Chargement Asynchrone du CSS si Supprimer les ressources CSS inutilisées ne peut pas être utilisé sur votre site.
- Remplacer l'iframe Youtube par une image d'aperçu : L'image d'aperçu aide à stabiliser la mise en page.
- Précharger les polices : Cette fonctionnalité offre davantage de possibilités d'éviter les FOIT.
- Reporter l’exécution JavaScript : En ciblant les éléments situés au-dessus de la ligne de flottaison, il bloque les interactions dynamiques, l'injection de contenu (publicités) et les changements de classe dynamiques jusqu'à ce qu'il y ait une interaction sur la page.
Le CLS est pire avec WP Rocket
Dans certaines circonstances, certaines fonctionnalités peuvent avoir un impact négatif sur le score CLS, comme suit :
- Chargement Asynchrone du CSS - Dans les cas où cela génère un Flash Of Unstyled Content (FOUC), le contenu non stylisé provoquera un décalage de la mise en page. Ce problème peut être résolu en excluant certains fichiers.
- LazyLoad pour les images - Lorsqu'il est appliqué à des images situées au-dessus de la ligne de flottaison qui n'ont pas de dimensions définies, cela provoque un décalage de la mise en page lorsque l'image est finalement chargée. Ce problème peut être résolu grâce à Optimiser les images critiques, et Ajouter les dimensions d'image manquantes, ou en excluant l'image concernée du LazyLoad.
- Chargement différé des fichiers JavaScript - Lorsque JavaScript est nécessaire pour afficher des éléments au-dessus de la ligne de flottaison. Pour résoudre ce problème, vous devez exclure les fichiers JavaScript nécessaires à l'affichage du contenu au-dessus de la ligne de flottaison.
Comment améliorer encore le CLS
En général, les problèmes CLS ne sont pas causés par WP Rocket, mais par la manière dont le site web a été construit. Pour améliorer les problèmes CLS à la racine, veuillez tenir compte des points suivants :
- Réduisez les animations inattendues.
- Évitez d'injecter du contenu dans la fenêtre d'affichage, en particulier lorsqu'il est inséré au-dessus d'éléments.
- Iframe manquant ou largeur et hauteur du contenu injecté