CLS WordPress : corriger définitivement les décalages visuels (Cumulative Layout Shift)

Avez-vous déjà cliqué sur un lien et cliqué sur le mauvais bouton parce qu’il s’est déplacé au dernier moment ? C’est le CLS (Cumulative Layout Shift) — et Google le pénalise. Voici comment l’éliminer sur WordPress.

Comprendre le score CLS

Le CLS calcule la somme de tous les décalages visuels inattendus pendant la durée de vie de la page. Chaque Layout Shift est calculé comme :

Layout Shift Score = Impact Fraction × Distance Fraction

Un élément qui couvre 50 % de l’écran et se déplace de 25 % de la hauteur d’écran génère un score de 0,125 — ce qui dépasse déjà le seuil de 0,1 de Google en un seul décalage.

Seuils Google :

• < 0,1 : Bon
• 0,1 – 0,25 : À améliorer
• > 0,25 : Mauvais

Cause n°1 : images sans attributs width et height

La cause de CLS la plus répandue. Si une balise <img> n’a pas d’attributs width et height, le navigateur ne réserve pas d’espace avant le chargement de l’image. Résultat : le texte en dessous se déplace vers le bas à l’arrivée de l’image.

Fix : Toujours spécifier les dimensions :

<!-- Mauvais -->
<img src="photo.webp" alt="Photo">

<!-- Correct -->
<img src="photo.webp" width="800" height="450" alt="Photo">

Sur WordPress, le CMS ajoute automatiquement les dimensions aux images insérées via l’éditeur Gutenberg. Les problèmes viennent des images ajoutées via du HTML custom, des page builders, ou des thèmes mal codés. Le plugin Smush et ShortPixel ajoutent les dimensions manquantes automatiquement.

Cause n°2 : polices Google Fonts qui causent du FOUT

Quand une police web est chargée après le rendu initial, les textes se redimensionnent si la police chargée a des métriques différentes de la police de fallback. Ce phénomène (FOUT — Flash of Unstyled Text) génère du CLS.

Fix 1 : font-display: swap avec size-adjust

@font-face {
    font-family: 'Inter';
    src: url('inter.woff2') format('woff2');
    font-display: swap;
    size-adjust: 100.06%; /* Ajuster pour minimiser le layout shift */
    ascent-override: 106%;
    descent-override: 27%;
}

Fix 2 : self-héberger les polices — en éliminant le round-trip vers Google Fonts (200 à 400 ms), la police est disponible plus tôt et le swap est moins visible ou absent.

Fix 3 : font-display: optional — la police n’est utilisée que si elle est déjà en cache. Élimine le CLS au prix d’une police système à la première visite.

Cause n°3 : bannières cookie et barres de notification

Les bannières RGPD qui apparaissent en haut de page et poussent le contenu vers le bas sont une source majeure de CLS. La solution : réserver l’espace pour la bannière avant son apparition.

/* Réserver un espace fixe en haut pour la bannière */
body {
    padding-top: 60px; /* Hauteur de votre bannière cookie */
}
.cookie-banner {
    position: fixed;
    top: 0;
    height: 60px;
}

Alternative : utiliser position: fixed ou position: sticky pour la bannière, de sorte qu’elle se superpose au contenu sans le déplacer.

Cause n°4 : publicités et embeds (YouTube, Twitter)

Les publicités AdSense et les embeds de réseaux sociaux sont des sources classiques de CLS : leur taille varie et ils s’injectent après le rendu initial.

Pour les publicités :

/* Réserver un espace minimum pour le slot publicitaire */
.ad-slot {
    min-height: 250px; /* Hauteur la plus courante pour un banner */
    min-width: 300px;
}

Pour les iframes YouTube :

<!-- Technique aspect-ratio pour préserver les proportions -->
<div style="aspect-ratio: 16/9; width: 100%;">
    <iframe src="https://www.youtube.com/embed/ID"
            style="width:100%;height:100%;"
            loading="lazy"></iframe>
</div>

Cause n°5 : animations et transitions CSS mal codées

Les animations qui modifient top, left, margin, padding, width ou height déclenchent du layout shift. Utilisez exclusivement transform et opacity pour vos animations :

/* Mauvais — déclenche du layout shift */
.hero { animation: slideIn 0.5s ease; }
@keyframes slideIn {
    from { margin-top: -50px; }
    to   { margin-top: 0; }
}

/* Correct — transform ne génère pas de layout shift */
@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

Cause n°6 : contenu injecté dynamiquement par JavaScript

Tout contenu ajouté au-dessus du contenu existant (bandeaux promo, notifications push, popin) génère du CLS. La règle : n’insérer du contenu dynamique qu’en réponse à une action utilisateur, jamais automatiquement au-dessus du fold.

Debugger le CLS avec Chrome DevTools

Chrome DevTools → Performance → cochez « Web Vitals » dans les options → enregistrez une session. Les Layout Shifts apparaissent comme des événements violets sur la timeline. Survolez-les pour voir les éléments déplacés et leurs coordonnées avant/après.

L’extension Web Vitals de Chrome affiche le CLS en temps réel et liste les éléments responsables dans la console.

Questions fréquentes sur le CLS WordPress

Mon CLS est 0 dans PageSpeed Insights mais mauvais dans Search Console — pourquoi ?

PageSpeed Insights mesure la page en lab, souvent sans publicités ni personnalisation. Search Console agrège les données réelles d’utilisateurs avec toutes les variantes (bannière cookie, pub chargée, contenu personnalisé). Testez votre site sur un appareil réel avec votre connexion habituelle.

Le plugin de cache peut-il corriger le CLS ?

Indirectement : un cache plus rapide charge les ressources plus vite, ce qui réduit la fenêtre pendant laquelle des éléments peuvent se déplacer. Mais le CLS est principalement un problème de code (dimensions manquantes, polices) — le cache ne résout pas les causes structurelles.

Gutenberg ou Elementor génèrent-ils plus de CLS ?

Elementor charge plus de JS et CSS qui peuvent retarder le rendu et créer des décalages. Les blocks Gutenberg sont plus légers. Dans les deux cas, le CLS dépend surtout de la façon dont vous insérez les images (avec ou sans dimensions) et gérez les polices. Un site Elementor bien codé peut avoir un CLS parfait.