Le CLS (Cumulative Layout Shift) mesure les décalages visuels imprévus pendant le chargement : une image qui apparaît et pousse le texte, une bannière de cookies qui repositionne le contenu, une fonte web qui change les métriques. Cible : moins de 0,1 au 75ᵉ percentile.
Bonne nouvelle : le CLS se règle presque entièrement avec une règle simple — tout élément qui prend de la place doit déclarer sa taille avant le rendu. Voici les 4 sources les plus fréquentes sur WordPress et leur correctif.
1. Images sans width et height
Depuis WordPress 5.5, les attributs width et height sont injectés automatiquement sur les <img> rendues par le core. Le navigateur calcule l’aspect ratio et réserve l’espace avant le téléchargement de l’image — zéro décalage.
Le problème : beaucoup de thèmes (souvent custom ou anciens) court-circuitent ce mécanisme avec des helpers maison qui régénèrent la balise <img> sans dimensions. Vérifiez le HTML rendu dans DevTools — chaque image visible avant le scroll doit avoir width et height dans la source.
Pour les images servies via un composant Blade, utilisez systématiquement wp_get_attachment_image() qui injecte tout : src, srcset, sizes, width, height, alt, loading. Pas de composition manuelle.
2. Polices web qui changent les métriques
Avec font-display: swap (recommandé pour le LCP), le navigateur affiche d’abord la fonte de fallback puis remplace par la fonte web une fois chargée. Si les deux fontes ont des métriques différentes (hauteur de ligne, largeur des glyphes), le texte se redessine et pousse le contenu en dessous : c’est du CLS.
Solution : aligner les métriques de la fonte fallback sur celles de la fonte web via les CSS Font Loading descriptors :
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
body {
font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
}Outil : Font Style Matcher calcule automatiquement les overrides pour aligner deux fontes.
3. Bannière de cookies en flux normal
La bannière RGPD apparaît typiquement 200 à 800 ms après le first paint (le temps que son JS se charge). Si elle se rend en flux normal (en haut ou en bas du <body>), elle pousse tout le contenu et déclenche un CLS proportionnel à sa hauteur.
Solution : la rendre en position: fixed sur un overlay, jamais dans le flux. Visuellement identique, CLS = 0.
- Tarteaucitron, Cookiebot, Axeptio : config par défaut souvent fixed, à vérifier
- Bannières maison : ajouter
position: fixed; bottom: 0; left: 0; right: 0;+z-index
4. Embeds tiers (YouTube, Twitter, Maps)
Les iframes d’embed ne déclarent pas leur hauteur tant que le contenu tiers n’est pas chargé. Réservez l’espace avec un wrapper en aspect-ratio :
.wp-block-embed-youtube {
aspect-ratio: 16 / 9;
}
.wp-block-embed-youtube iframe {
width: 100%;
height: 100%;
}Bonus performance : ajoutez loading="lazy" sur l’iframe pour que les embeds en bas de page n’entrent pas dans le LCP path.
Le CLS est la métrique la moins coûteuse à corriger. Il ne demande ni cache, ni infrastructure, ni refactor JS — juste de la rigueur.
Cas particulier : annonces et A/B testing
Si vous ne pouvez pas pré-réserver l’espace (annonces dynamiques dont la taille varie), exclure la zone du calcul CLS via contain: layout sur le wrapper. Le décalage interne ne pollue plus la métrique globale.
Pour Google Optimize ou outils A/B test similaires, configurez le snippet en haut du <head> avec le pattern anti-flicker officiel et un timeout court (500 ms max) pour éviter de bloquer indéfiniment le render.
Mesurer le CLS en réel
Lighthouse mesure le CLS sur un seul render. Or le CLS s’accumule sur toute la session — un overlay qui apparaît au scroll après 30 secondes compte aussi.
Déployez web-vitals.js qui fournit le CLS final de session, avec attribution sur l’élément qui a déclenché chaque shift. C’est ce qui permet de débugger les CLS post-load (lazy load mal configuré, lazy hydration, modal d’inscription qui apparaît sur scroll).
Cible réaliste avec les 4 leviers ci-dessus : CLS au 75ᵉ percentile sous 0,05, soit deux fois mieux que le seuil Google.
Besoin d’un audit CLS sur votre site WordPress ? Contactez-nous pour identifier les sources de décalage les plus coûteuses.