Cumulative Layout Shift
Qu'est-ce que le Cumulative Layout Shift ?
Le CLS mesure l'ampleur du changement de mise en page inattendu qui se produit pendant le chargement de la page et pendant le temps où le visiteur est sur la page. Les grands changements de mise en page offrent une mauvaise expérience à l'utilisateur, car celui-ci peut cliquer sur le mauvais élément ou sa lecture peut être perturbée si le texte se déplace de manière inattendue.
Source - https://web.dev/cls/
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 |
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
Le point "Éviter les changements de mise en page importants" qui se trouve sous Diagnostic vous indiquera quels sont les éléments spécifiques qui causent le changement de mise en page sur la page testée:
Comment WP Rocket améliore-t-il le CLS ?
| Fonctionnalité | Pourquoi |
| La fonctionnalité Optimiser le chargement du CSS si elle ne génère pas de Flash of Unstyled Content (FOUC) | CPCSS permettra d'accélérer l'affichage du contenu au-dessus du pli, sans avoir d'élément bloquant le rendu. Chemin sur WP Rocket : WP Rocket > Optimisation des fichiers > Optimiser le chargement du CSS. Documentation : Optimiser le chargement du CSS. |
| La fonctionnalité Reporter l’exécution JavaScript ciblant des éléments au-dessus du pli | Arrête l'interaction dynamique, l'injection de contenu (publicités), et les changements de classes dynamique jusqu'à ce qu'il y ait une interaction sur la page. Chemin sur WP Rocket : WP Rocket > Optimisation des fichiers > Reporter l'exécution de JavaScript > Scripts à reporter. Documentation : Reporter l’exécution JavaScript. |
| La fonctionnalité Lazyload des vidéos YouTube avec une image d'aperçu |
L'image d'aperçu aide à stabiliser la mise en page. Chemin sur WP Rocket : WP Rocket > Media > LazyLoad > Activer sur les iframes et vidéos > Replacer l'iframe YouTubepar une image d'aperçu. Documentation : Choisir la résolution des images d’aperçu Youtube . |
| La fonctionnalité Précharger les polices | Donne plus de chances d'éviter les "Flash de Texte Invisible" ( FOIT). Chemin sur WP Rocket : WP Rocket > Préchargement > Précharger les polices. Documentation : Précharger les polices. WP Rocket regroupe également les polices Google et ajoute automatiquement l'attribut |
| La fonctionnalité 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. Chemin sur WP Rocket : WP Rocket > Média > Ajouter les dimensions d'image manquantes. Documentation : Ajouter les dimensions d'image manquantes. |
| La fonctionnalité Minifier le CSS |
Cela permet à WP Rocket d'ajouter le font-display : swap; manquant sur les propriétés du font-display sur les fichiers CSS. Chemin d'accès sur WP Rocket : WP Rocket > Optimisation des fichiers. Documentation : Minifier le CSS. |
Quelles sont les fonctionnalités qui peuvent détériorer le score du CLS ?
| Dossier | Pourquoi |
| CPCSS s'il génère un FOUC | Le contenu non stylisé entraînera un changement de mise en page. Solution Trouver et exclure les fichiers CSS impliqués dans la mise ne page au-dessus pli du CPCSS lorsque c'est possible. Documentation : Exclure des fichiers de l'option Optimiser le chargement du CSS. |
| Lazyload des images au-dessus du pli | Si l'image n'a pas de dimensions définies, elle provoquera un décalage de la mise en page si elle est chargée avec l'option lazyload. Un bon exemple est quand le menu change de dimension, avant/après que l'image du logo n'est chargée. Solution Exclure les images au-dessus du pli du chargement paresseux. Chemin sur WP Rocket : WP Rocket > Media > LazyLoad > Images et iframes exclues. Documentation : Désactivez le LazyLoad sur des images spécifiques L'activation de la fonctionnalité "Ajouter les dimensions d'image manquantes" aidera également. Chemin sur WP Rocket : WP Rocket > Média > Ajouter les dimensions d'image manquantes. Documentation : Ajouter les dimensions d'image manquantes. |
| Chargement différé des fichiers JavaScript | Lorsque JavaScript est nécessaire pour afficher des éléments au-dessus du pli, le reporter créera un décalage de la mise en page. Exemple : Le chargement tardif des sliders peut déplacer le contenu de manière significative et sera signalé comme un changement de mise en page important. Solution Exclure les fichiers JavaScript nécessaires pour afficher le contenu au-dessus du pli. Chemin sur WP Rocket : WP Rocket > Optimisation des fichiers > Charger le JavaScript en différé > Fichiers JavaScript exclus. Documentation : Exclure des fichiers JavaScript du chargement différé . |
Les causes de CLS que WP Rocket ne peut pas réparer
| Cause du CLS | Pourquoi |
| Animations | WP Rocket ne peut pas contrôler ou améliorer les animations. Solution Certaines décisions de conception et de codage doivent être prises. Par exemple, l'utilisation des animations de transformation au lieu d'animations de propriétés. On prend comme example un élément avec les propriétés suivantes : height: 100px; width: 100px;<br> L'utilisation de height: 200px; width: 200px; induira un changement de position tout en changeant la taille. Ce qui va déclencher un décalage de la mise en page. |
| Injections de contenu, en particulier lorsqu'il est inséré au-dessus des éléments | Injecter dynamiquement du contenu avant les éléments aura pour effet de pousser ce qui se trouve au fond. Non seulement l'élément fautif sera marqué pour un chagement de la mise en page (changement de rapport d'aspect et de position), mais également tout ce qui se trouve en dessous (changement de position verticale). Exemple : L'ajout dynamique de boîtes de notification AJAX, comme le statut de la commande WooCommerce. Solution Repenser l'utilisation de l'élément qui cause le CLS. |
| iframes, ou contenu injécté, sans des attributs explicites de largeur et de hauteur | L'iframe, ou l'élément injecté, se développe lors du chargement, ce qui provoque un décalage de la mise en page. Solution Ajouter manuellement la hauteur et la largeur aux iframes et aux éléments à contenu dynamique de façon à réserver l'espace. |
Outils
- https://layoutstability.rocks/ - Calculer rapidement le score CLS.
- https://gtmetrix.com/ - La dernière mise à jour intègre PageSpeed et se concentre davantage sur les web vitals, y compris CLS.
Ressources
- https://web.dev/cls/ - La documentation de Google sur le CLS.