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 ?

Cause Exemple Impact
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 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 swap, qui active le préchargement de leurs polices.

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 et combiner 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 et combiner 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;

L'utilisation de transform : scale(2,2); donnera plus de stabilité car seule la taille changera alors que la position de l'élément sur la page restera la même.

Le changement direct des deux propriétés en :

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

Ressources

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.