Pour corriger le Cumulative Layout Shift, trouvez ce qui modifie la mise en page sans prévenir et réservez l’espace nécessaire avant l’arrivée du contenu. Commencez par les dimensions des médias, les publicités, les intégrations, les bandeaux et les changements de police. Enregistrez aussi l’usage après le chargement initial : un premier écran stable peut encore bouger ensuite.
Un CLS inférieur ou égal à 0,1 au 75e centile est bon. Il mesure un mouvement visuel inattendu, sans unité, et non un délai en secondes. Accélérer le téléchargement peut réduire certaines occasions de décalage, mais une géométrie prévisible traite plus directement le problème.
Comprendre le calcul avant de suivre l’élément déplacé
Le score d’un décalage est le produit de la fraction d’impact par la fraction de distance. La première correspond à l’union des anciennes et nouvelles surfaces visibles des éléments instables, divisée par la surface de la fenêtre. La seconde divise le plus grand déplacement horizontal ou vertical par la plus grande dimension de cette fenêtre. CLS regroupe les mouvements en fenêtres de session : moins d’une seconde entre deux décalages et cinq secondes au maximum. La fenêtre présentant la somme la plus élevée détermine le résultat.
Une page longtemps ouverte n’accumule donc pas nécessairement les décalages pendant toute sa durée de vie. Une séquence tardive peut néanmoins déterminer le CLS alors que le chargement initial semblait stable.
Certains mouvements proches d’une action de l’utilisateur sont exclus. Cette exception ne couvre pas tout changement tardif associé à un ancien clic. Elle ne garantit pas davantage confort ou accessibilité. Préservez la position de lecture et le contrôle, même hors du calcul.
Le navigateur désigne les éléments déplacés, pas toujours les responsables. Un titre poussé par une publicité est la victime ; l’agrandissement de la publicité est la cause à traiter. Examinez les changements environnants au même instant.
L’introduction aux Core Web Vitals explique l’évaluation générale. Distinguez le CLS d’un enregistrement du p75 calculé sur de nombreuses visites.
Enregistrer le chargement et la suite du parcours
Dans Chrome DevTools, enregistrez un parcours représentatif avec le panneau Performance. Examinez les événements de décalage et les indications visuelles associées. Les outils Rendering peuvent surligner les zones concernées pendant la reproduction.
Incluez première visite, choix de consentement, publicité retardée, défilement vers une intégration et police sans cache chaud. Essayez plusieurs largeurs. Une réserve adaptée à l’ordinateur peut s’agrandir ou s’effondrer incorrectement sur mobile.
Tout mouvement visible n’est pas un événement CLS. Le défilement change la zone visible ; une transformation peut déplacer un élément sans modifier le flux de la même façon. Appuyez-vous sur les événements enregistrés plutôt que sur une simple impression.
Notez séparément cause et victime. « Le conteneur média s’agrandit et pousse le titre suivant » donne une tâche plus exploitable que « titre défectueux ». L’équipe responsable de l’intégration sait alors quoi examiner.
Le guide d’optimisation CLS de Google distingue chargement initial et mouvements ultérieurs. Utilisez-le pour identifier votre cas, sans supposer que tous ses exemples concernent votre site.
Donner une empreinte prévisible aux images et vidéos
Les attributs width et height permettent au navigateur de calculer un rapport d’aspect avant de recevoir l’image. Le CSS responsive reste possible. Les valeurs doivent refléter les proportions réelles, pas servir uniquement à faire disparaître une alerte.
Cet exemple réserve un format horizontal adaptable au conteneur. Le fichier cité représente une ressource illustrative du projet.
<img class="article-image"
src="/images/diagram.webp"
width="1600" height="900"
loading="lazy"
alt="A page layout with space reserved for media">.article-image {
display: block;
max-width: 100%;
height: auto;
}Le chargement différé convient uniquement hors de la zone initiale importante. Ne recopiez pas loading="lazy" sur l’image LCP. La géométrie stabilise l’affichage ; la stratégie de chargement détermine quand la ressource devient disponible.
La direction artistique peut sélectionner des proportions différentes selon les points de rupture. Vérifiez que l’espace réservé correspond à la variante affichée. Un ratio d’ordinateur imposé à une image mobile verticale peut entraîner recadrage ou correction tardive.
Contrôlez aussi le conteneur. Légendes, bordures et commandes peuvent ajouter de la hauteur après stabilisation de l’image. Le composant complet doit être prévisible. Le guide d’optimisation des images relie ces choix à la sélection responsive.
Réserver les publicités avant la fin de l’enchère
La création publicitaire finale peut être inconnue au premier calcul de mise en page. Définissez les dimensions prises en charge à chaque largeur et réservez-les dès le départ. Coordonnez CSS et configuration publicitaire au lieu de deviner une hauteur.
Les dimensions suivantes illustrent une méthode, pas les formats recommandés d’une régie particulière.
.ad-slot {
min-height: 250px;
display: grid;
place-items: center;
}
@media (min-width: 64rem) {
.ad-slot {
min-height: 280px;
}
}Une hauteur minimale évite que le contenu remonte en cas de petite publicité ou d’absence de remplissage uniquement si elle reste réservée. Replier automatiquement un emplacement vide peut provoquer le décalage recherché.
Il faut arbitrer espace réservé et espace inutilisé, surtout au-dessus du premier écran. Vous pouvez limiter les formats, choisir un emplacement moins perturbant ou conserver un conteneur neutre. Examinez le contenu déplacé avant d’accepter un agrandissement inattendu.
Testez chargement, remplissage, absence et erreur dans un environnement approprié. Une simulation renvoyant toujours le même format ne prouve pas la stabilité en production.
Stabiliser les intégrations pendant leur initialisation
Les lecteurs vidéo et publications sociales peuvent remplacer un petit bloc par un composant plus haut. Définissez sa géométrie avant l’exécution du code externe et conservez-la pendant le chargement et les échecs.
Ce conteneur réserve un composant prévu en 16:9 sans imposer son téléchargement immédiat.
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #0c1222;
}
.video-frame > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}Toutes les intégrations n’ont pas un ratio vidéo fixe. Un message social ou graphique interactif peut dépendre du contenu. Utilisez le dimensionnement pris en charge, une réserve initiale réaliste et une position où l’agrandissement ne perturbe pas la lecture.
Une façade peut retarder un lecteur coûteux jusqu’à sa demande. Gardez les mêmes dimensions lors du remplacement, rendez l’activation accessible au clavier et fournissez un état d’erreur compréhensible.
Le guide des scripts tiers traite le coût d’exécution qui subsiste une fois la géométrie stabilisée. Corriger le CLS ne démontre pas que la réactivité est également satisfaisante.
Empêcher les bandeaux et panneaux asynchrones de pousser le contenu
Consentement, annonces et recommandations apparaissent souvent après le premier affichage. Décidez leur place avant de dessiner leur environnement. Une réserve ou une superposition soigneusement conçue peut éviter un bloc inattendu au-dessus de l’article.
Une superposition ne doit ni masquer durablement le contenu essentiel, ni piéger incorrectement le focus, ni devenir impossible à fermer avec du texte agrandi. Testez écrans étroits et zoom ; une hauteur fixe ne convient pas forcément à toutes les traductions.
Les recommandations ont besoin d’états de chargement réalistes. Un squelette bien plus court que le résultat final permet encore un décalage. Reproduisez une structure plausible de lignes et d’images ou placez la zone variable hors du parcours en cours.
Évitez de calculer tardivement en JavaScript une taille exprimable dans le CSS initial. Cela crée une course avec le premier affichage. Préférez une règle stable, puis ajoutez du dynamisme si le contenu l’exige réellement.
Rapprocher la géométrie des polices de remplacement
Le remplacement d’une police peut changer largeur des caractères, ascendantes, descendantes et interligne. Une ligne supplémentaire dans un titre déplace bien plus que le titre lui-même.
font-display: swap permet de lire pendant le téléchargement, sans garantir la stabilité. font-display: optional peut éviter un remplacement tardif dans certaines situations, au prix de conserver la police de secours pendant cette visite.
Choisissez une alternative adaptée et, si nécessaire, ajustez ses métriques avec size-adjust, ascent-override, descent-override et line-gap-override. Les valeurs dépendent du couple de polices. Des pourcentages copiés ailleurs peuvent aggraver l’écart.
Testez les écritures réellement publiées. Hébreu, coréen et alphabet latin peuvent utiliser des fichiers et chemins de remplacement distincts. Un titre anglais court ne représente pas les traductions longues ou les écritures mélangées.
Préchargez seulement une police indispensable tôt qui arriverait sinon trop tard. Précharger toutes les graisses peut concurrencer les images prioritaires. Vérifiez requêtes et géométrie ensemble pour éviter une régression de chargement.
Animer sans recalculer constamment la mise en page
Animer largeur, hauteur, top ou d’autres propriétés de disposition peut répéter les calculs et déplacer les voisins. Transformations et opacité permettent souvent une transition sans changer le flux environnant.
Cela ne justifie pas une animation superflue. Un objet peut distraire même sans contribuer au CLS. Respectez la réduction des mouvements et alignez focus et zones activables sur la position visible.
Dans un accordéon, considérez les attentes et les commandes voisines. Gardez un lien clair entre activation et contenu révélé. Évitez les insertions sans rapport qui arrivent tardivement et repoussent la page.
Chercher les situations qu’une simple recharge ne révèle pas
Un test de chargement peut finir avant l’actualisation d’une publicité ou l’arrivée du lecteur à une intégration. Si le CLS de terrain est pire, reproduisez le parcours long avant de rejeter le rapport.
Le RUM peut identifier des modèles ou composants associés aux mouvements. Les API et la visibilité des iframes diffèrent parfois de CrUX ; un collecteur JavaScript principal peut manquer certains événements. Documentez cette limite au lieu de forcer l’égalité des jeux de données.
Vérifiez aussi le retour avec le bouton Précédent. Restaurer depuis le cache avant/arrière diffère d’une recharge. Préservez cette possibilité tout en corrigeant les décalages du premier chargement.
Priorisez les causes communes. Réparer un conteneur partagé par de nombreuses pages vaut mieux que corriger chaque article manuellement. Testez les exceptions : média absent, longue légende et chargement impossible.
Valider la géométrie autant que le score
Reproduisez le scénario initial et examinez le même événement après correction. Le contenu doit rester en place sans rognage, débordement ou défilement inutile causé par la réserve.
Comparez largeurs, longueurs de texte et états de chargement. Vérifiez clavier, zoom et traductions. Une boîte fixe qui semble stable parce qu’elle coupe le contenu n’est pas une solution.
Conservez CLS observé et conditions avec la modification. Après publication, suivez les données à mesure que de nouvelles visites entrent dans la fenêtre. Une trace stable ne promet pas un changement immédiat dans Search Console.
Intégrer le contenu tardif à la revue des composants
Documentez l’espace réservé, le comportement en cas d’absence et les variations possibles après le début de l’interaction. La stabilité devient ainsi une propriété de conception plutôt qu’une urgence répétée.
Utilisez le vérificateur Core Web Vitals pour interpréter les valeurs et les guides Core Web Vitals pour poursuivre. Un composant stable reste prévisible en état normal, retardé et défaillant, pas seulement sur une capture achevée.
