Corriger et identifier les problèmes de Cumulative Layout Shift (CLS)

Avant de modifier quoi que ce soit, confirmez que vous avez réellement un problème de CLS. Connectez-vous à la Google Search Console, accédez à Core Web Vitals et vérifiez à la fois sur mobile et sur ordinateur.

Si Google signale des URL avec "Problème CLS : supérieur à 0,25" ou "Problème CLS : supérieur à 0,1", vous avez la confirmation du rapport d'expérience utilisateur Chrome (CrUX) que de vrais utilisateurs subissent des décalages de mise en page sur votre site.

Contrairement au LCP et à l'INP où la puissance de calcul brute et la vitesse du réseau comptent, les problèmes de CLS peuvent être spécifiques à l'appareil ou à la taille de l'écran. Lorsqu'un problème similaire affecte les mobiles et les ordinateurs de bureau (images non dimensionnées, échanges de polices, contenu injecté) en raison de la taille de l'écran, l'ordinateur de bureau peut signaler une valeur CLS beaucoup plus importante (car une plus grande partie de la fenêtre d'affichage visible peut être affectée). La Search Console regroupe les URL, elle vous indique donc quels types de pages sont affectés, mais pas quels éléments se décalent. Pour cela, vous avez besoin du RUM.

La Search Console confirme que le problème existe mais ne vous donne presque rien pour travailler. Vous devez trouver quels éléments se décalent, sur quelles pages et dans quelles conditions. Pour cela, vous avez besoin d'un outil RUM.

J'ai créé CoreDash pour répondre exactement à ces questions. Vous ajoutez une balise de script et il commence à collecter les données d'attribution CLS de chaque visiteur réel. Le point de données clé pour le débogage CLS est l'élément qui se décale : le nœud DOM réel qui s'est déplacé. Sans cette information, vous déboguez à l'aveugle.

Trouver les éléments qui se décalent

Commencez par regarder vos données CLS regroupées par élément. Dans CoreDash, accédez à la page CLS et affichez le tableau de données trié par "CLS par élément". Cela montre quels éléments causent le plus de décalage de mise en page parmi tous vos visiteurs. Cliquez sur le pire d'entre eux pour filtrer toutes les métriques des pages où cet élément s'est décalé.

Trouver quelles pages sont affectées

Après avoir filtré par l'élément de décalage le plus impactant, vérifiez la répartition des URL. Les problèmes de CLS peuvent concerner l'ensemble du site ou un modèle spécifique. Nous savons maintenant si le CLS est regroupé sur des types de pages spécifiques : pages de produits avec des galeries d'images, articles de blog avec des emplacements publicitaires ou pages de destination avec des animations de héros. Savoir quelles pages échouent vous indique où vous concentrer.

Vérifier les nouveaux visiteurs par rapport aux visiteurs réguliers

C'est une autre vérification rapide que je fais et elle a plus d'importance que la plupart des gens ne le pensent. Le CLS lié à l'échange de police ne se produit que lorsque la police n'est pas mise en cache. Le CLS d'image provenant de width: auto ne se produit que lorsque l'image n'est pas dans le cache du navigateur. Si votre CLS est bien pire pour les visiteurs qui viennent pour la première fois, vous faites face à un décalage dépendant de la mise en cache que vous, en tant que développeur, ne verrez jamais sur votre propre machine à moins de désactiver le cache (conseil : désactivez toujours votre cache Chrome... mais c'est une autre histoire pour un autre jour).

Vérifier les types d'appareils et les tailles de la fenêtre d'affichage

Le CLS montre généralement un autre modèle mobile/bureau que le LCP et l'INP. Les mises en page réactives peuvent introduire des décalages qui n'apparaissent qu'à des largeurs et hauteurs de fenêtre d'affichage spécifiques. Un emplacement publicitaire qui posait des problèmes sur le bureau peut même ne pas être dans la fenêtre d'affichage mobile. Un menu de navigation peut s'animer différemment à des points d'arrêt plus petits. Regroupez vos données CLS par type d'appareil pour savoir où ils se produisent.

Vos données RUM vous ont indiqué quels éléments se décalent et pourquoi. Maintenant, reproduisez le problème localement et trouvez ce qui le cause.

Utiliser le Core Web Vitals Visualizer

Le moyen le plus rapide de voir les décalages de mise en page est d'utiliser l'extension Chrome Core Web Vitals Visualizer. Chargez la page, cliquez sur l'icône de l'extension et rechargez. Chaque décalage de mise en page est mis en évidence avec une superposition colorée montrant exactement ce qui a bougé et de combien. Je l'utilise comme première étape avant d'ouvrir le panneau Performance car cela donne une réponse visuelle immédiate.

Reproduire les conditions dans Chrome et vérifier les captures d'écran du réseau

Les problèmes de CLS sont souvent invisibles avec un cache chaud. Ouvrez DevTools, désactivez le cache dans l'onglet Network (Réseau) et limitez la connexion à "Slow 4G" (mon préféré, il vous montrera le CLS causé par les conditions de course). Cliquez maintenant sur l'icône d'engrenage et désactivez la mise en cache (lorsque DevTools est ouvert). Cela simule les conditions que rencontrent vos nouveaux visiteurs. Allez dans l'onglet Network et activez les captures d'écran. Maintenant, rechargez la page et surveillez les décalages.

Utiliser le panneau Performance de Chrome

La plupart des décalages de mise en page sont faciles à repérer lorsque l'on sait comment s'y prendre, mais ils peuvent parfois vous échapper. C'est le moment d'ouvrir Chrome DevTools (Ctrl+Shift+I) et d'aller dans le panneau Performance pour un débogage détaillé. Appuyez sur Ctrl+Shift+E pour recharger et enregistrer. Après le chargement de la page, faites défiler vers le haut et vers le bas à quelques reprises. Arrêtez l'enregistrement.

Recherchez la piste "Layout Shifts" (Décalages de mise en page). Chaque décalage apparaît sous forme de bloc coloré. Cliquez sur un décalage pour voir :

• Le nœud de décalage : l'élément DOM qui a bougé
• Le score de décalage : la fraction d'impact multipliée par la fraction de distance
• hadRecentInput : si une entrée utilisateur a précédé le décalage (les clics et les tapotements bénéficient d'un délai de grâce de 500 ms, mais le défilement non)

Faites attention au moment où les décalages se produisent. Les décalages pendant le chargement de la page indiquent des images non dimensionnées, des échanges de polices ou des transitions CSS. Les décalages pendant le défilement pointent vers des animations déclenchées par le défilement utilisant des propriétés de mise en page.

Test rapide : désactiver toutes les transitions

Les transitions CSS qui animent les propriétés de mise en page sont une cause de CLS sournoise car elles ne se décalent que pendant la phase de chargement et sont difficiles à reproduire. Collez cet extrait dans la console, rechargez la page à fond avec le cache désactivé et comparez le CLS :

document.head.insertAdjacentHTML('beforeend',
  '<style>*{transition-property:none!important}</style>');

Si votre CLS chute après la désactivation des transitions, vous avez trouvé la cause. Utilisez le guide de débogage des transitions CSS pour trouver les transitions spécifiques responsables.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift:', {
        value: entry.value,
        sources: entry.sources?.map(s => ({
          node: s.node,
          previousRect: s.previousRect,
          currentRect: s.currentRect
        }))
      });
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

Vous savez quels éléments se décalent et pourquoi. Il est temps de les corriger. Le CLS n'a pas de phases séquentielles comme le LCP. Au lieu de cela, les décalages de mise en page ont des catégories de causes distinctes. Voici les plus courantes, dans l'ordre où je les rencontre lors des audits.

1. Images, vidéos et iframes sans dimensions

C'est la cause numéro un de CLS sur le web. Le Web Almanac 2025 rapporte que 62 % des pages mobiles ont au moins une image non dimensionnée. Le correctif : incluez toujours les attributs width et height sur les balises <img>, <video> et <iframe>.

<img src="hero.jpg" width="800" height="450" alt="Description">

<style>
img {
    height: auto;
    max-width: 100%;
}
</style>

Faites attention à width: auto dans votre CSS. Cette déclaration unique remplace le calcul du rapport d'aspect du navigateur et provoque des décalages de mise en page même lorsque vous avez défini la largeur et la hauteur dans le HTML. J'ai vu cela sur des dizaines de sites. Le développeur a tout fait correctement dans le balisage, mais une règle CSS globale comme img { width: auto; height: auto; max-width: 100%; } a tout défait. Pour l'explication complète, voir corriger le décalage de mise en page causé par les images à dimensionnement automatique. Pour un guide complet couvrant toutes les causes de CLS liées aux images et aux médias (vidéos, iframes, direction artistique, images réactives, chargement différé, espaces réservés), voir Comment les images et les médias causent le Cumulative Layout Shift.

2. Échanges de polices Web

Lorsqu'une police Web se charge et remplace la police de secours (fallback), la différence de taille provoque un décalage de mise en page. Le Web Almanac 2025 montre que seulement 11 % des pages préchargent les polices Web. Cela signifie que la grande majorité des sites sont vulnérables au CLS lié à l'échange de police.

Le correctif comporte deux parties. Tout d'abord, faites correspondre la police de secours aux dimensions de la police Web en utilisant des remplacements de métriques :

<style>
@font-face {
    font-family: 'My Font Fallback';
    src: local('Arial');
    size-adjust: 105.2%;
    ascent-override: 93%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'My Font';
    src: url('/fonts/myfont.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'My Font', 'My Font Fallback', sans-serif;
}
</style>

Utilisez un générateur de polices de secours pour calculer les valeurs de remplacement correctes pour votre paire de polices. Deuxièmement, accélérez la livraison : hébergez vos propres polices, préchargez votre fichier de police critique et utilisez WOFF2 avec le sous-ensemble. Pour une stratégie complète, consultez le chargement réactif des polices Web et s'assurer que le texte reste visible pendant le chargement de la police Web.

3. Animations et transitions CSS

Selon le Web Almanac 2025, 40 % des pages mobiles exécutent des animations non composées. Celles-ci animent des propriétés comme width, height, top, left, margin et padding qui déclenchent un recalcul de la mise en page à chaque image.

Le coupable le plus courant est transition: all. Lorsqu'un développeur écrit transition: all .3s ease, chaque changement de propriété est animé, y compris les propriétés de mise en page. Pendant le chargement de la page, les éléments qui passent de leur état non stylisé à leur état stylisé produisent des décalages de mise en page qui se produisent par intermittence et sont presque impossibles à reproduire systématiquement. Je vois ce modèle tout le temps.

Le correctif : remplacez les propriétés qui déclenchent la mise en page par des propriétés composées.

• Utilisez transform: translateY() au lieu de top/bottom
• Utilisez transform: translateX() au lieu de left/right
• Utilisez transform: scale() au lieu de width/height
• Utilisez opacity au lieu de visibility combiné à des changements de hauteur
• N'utilisez jamais transition: all. Spécifiez la propriété exacte : transition: background-color .2s ease

transform et opacity s'exécutent entièrement sur le thread compositeur et ne déclenchent jamais la mise en page. Pour le processus de débogage complet, consultez le décalage de mise en page causé par les transitions CSS.

4. Publicités, intégrations et contenu injecté dynamiquement

Les publicités se chargent tardivement et poussent le contenu vers le bas. Des bannières de consentement aux cookies apparaissent et décalent la page. Les requêtes AJAX injectent du nouveau contenu sans réserver d'espace au préalable. Ce sont tous le même problème : quelque chose apparaît sur la page que le navigateur ignorait au moment du rendu.

La solution pour tous ces problèmes consiste à réserver de l'espace. Pour les emplacements publicitaires, définissez un min-height correspondant à la taille de l'annonce attendue :

<style>
.ad-slot {
    min-height: 250px;
    contain: layout style;
}
@media (min-width: 600px) {
    .ad-slot { min-height: 90px; }
}
</style>

La déclaration contain: layout style isole le conteneur d'annonces du reste de la page. Pour les bannières de cookies, utilisez position: fixed pour superposer au lieu de pousser le contenu vers le bas. Pour le contenu AJAX, réservez de l'espace avec min-height. Vous n'avez pas besoin d'une estimation exacte : un décalage de 50px représente beaucoup moins de CLS qu'un décalage de 400px sans réservation.

Pour les intégrations tierces comme YouTube, Google Maps et les widgets de chat, utilisez le modèle de façade : affichez un espace réservé statique et ne chargez l'intégration réelle que lorsque l'utilisateur interagit avec elle. Zéro CLS, zéro ressource gaspillée.

5. Décalages de mise en page déclenchés par le défilement

C'est la cause de CLS que Lighthouse ne détectera jamais. Lighthouse ne fait pas défiler la page, de sorte que les décalages de mise en page déclenchés par le défilement sont complètement invisibles dans les tests en laboratoire. La seule façon de les trouver est d'utiliser les données RUM ou d'enregistrer une trace du panneau Performance lors du défilement manuel.

L'exemple le plus courant est un en-tête qui se masque au défilement et qui anime la propriété top. Voici la chose que la plupart des développeurs ne savent pas : le défilement n'est pas une entrée excluante dans la spécification Layout Instability. Les clics et les tapotements bénéficient d'un délai de grâce de 500 ms. Le défilement non. Chaque décalage de mise en page déclenché par le défilement compte pour votre score CLS.

Le correctif : utilisez transform: translateY() au lieu de top pour toute animation déclenchée par le défilement. La même chose s'applique aux effets de parallaxe, aux barres de navigation qui rétrécissent et aux barres de progression liées au défilement. S'il bouge au défilement, animez-le avec transform. Pour la procédure pas à pas complète avec des exemples vidéo, voir comment les animations déclenchées par le défilement causent du CLS.