Comment corriger les décalages de mise en page (CLS) sur Divi et Elementor

Search Console signale « Problème de CLS : supérieur à 0,1 (mobile) » sur un groupe de pages. PageSpeed affiche un CLS proche de zéro sur la même URL. Vous faites défiler la page vous-même et ne voyez rien d'évident.

L'écart est normal : le labo ne mesure que le chargement, alors que les vrais visiteurs font défiler, touchent l'écran et attendent les bandeaux. Notre guide sur les données de labo et de terrain explique pourquoi. Ici, l'objectif est de prendre le décalage sur le fait et d'en supprimer la cause.

Prendre le décalage sur le fait

• Dans les DevTools, onglet Rendering, cochez Layout Shift Regions : chaque décalage clignote en bleu au moment où il se produit. Utilisez l'émulation mobile et un réseau bridé, puis faites défiler toute la page.
• Performance : dans ce panneau, enregistrez un chargement et un défilement. La piste « Layout shifts » liste chaque décalage et les éléments qui ont bougé.

new PerformanceObserver(l => l.getEntries().forEach(e => {
  if (e.hadRecentInput) return;
  console.log(e.value.toFixed(3), e.sources?.map(s => s.node));
})).observe({ type: 'layout-shift', buffered: true });

Notez l'élément et le moment : au chargement, à l'apparition d'une police, à l'ouverture d'un bandeau, pendant le défilement. Le moment désigne la cause.

Les six causes habituelles sur un site construit avec un builder

1. Les images sans dimensions. Un module image qui affiche une balise <img> sans width ni height a une hauteur nulle jusqu'à l'arrivée du fichier, puis pousse tout ce qui se trouve en dessous. Correctif : width et height sur chaque image, ce qui permet au navigateur de calculer le ratio ; ou un aspect-ratio sur le conteneur.

2. Les styles qui arrivent après le premier affichage. Les builders découpent leur CSS : un fichier global, puis des fichiers par page ou par layout. Si l'un d'eux charge tard, ou est différé par une optimisation, un élément s'affiche une fois sans ses styles, puis se remet brusquement en place. Un cas réel : sur un site Divi 5, un fil d'Ariane n'avait aucun style propre et tenait sa taille de police d'une feuille de style par layout qui arrivait après le premier affichage. Il s'étalait sur quatre lignes, puis se repliait sur une seule. CLS terrain de 0,215, invisible en labo. Donner au fil d'Ariane sa propre taille de police et sa propre hauteur de ligne dans les styles critiques inline l'a fait passer sous 0,02. Correctif : les règles qui définissent la taille de tout ce qui est au-dessus de la ligne de flottaison doivent se trouver dans le critical CSS.

3. Les polices web qui se substituent. Avec font-display: swap, le texte s'affiche d'abord dans une police de secours, puis dans la police web. Si les deux n'ont pas la même largeur, les lignes se recomposent et les blocs changent de hauteur. Correctif : préchargez le ou les deux fichiers de police utilisés au-dessus de la ligne de flottaison ; choisissez une police de secours aux métriques proches ; ou ajustez la police de secours avec size-adjust et ascent-override dans son @font-face.

4. Les en-têtes et bandeaux ajoutés par des scripts. Un en-tête fixe dont le script ajoute un padding à la page une fois qu'il l'a mesuré ; une barre supérieure ou un bandeau cookies inséré au-dessus du contenu au lieu de flotter par-dessus. Correctif : donnez à la page le décalage de son en-tête en CSS dès le départ, et faites des bandeaux des overlays (position: fixed) plutôt que des blocs qui poussent le contenu.

5. Les sliders et carrousels avant leur démarrage. Avant que son script ne tourne, un slider affiche toutes ses diapositives empilées, ou aucune, puis se réduit à une seule. Correctif : du CSS pour l'état qui précède le script, avec la hauteur finale réservée et toutes les diapositives masquées sauf la première.

6. Les contenus intégrés et les iframes. Une vidéo, une carte ou une publication de réseau social qui se charge sans taille réservée. Correctif : un conteneur avec un aspect-ratio fixe, ou un aperçu léger qui a déjà la taille finale.

Les pièges propres aux builders

• Animations d'entrée : les animations basées sur transform et opacity ne comptent pas comme décalage de mise en page ; celles qui modifient height, margin ou top, si. Préférez les premières, et évitez d'animer quoi que ce soit au-dessus de la ligne de flottaison.
• En-tête mobile différent : un en-tête mobile plus haut ou plus bas que l'espace réservé par la page décale tout, sur les téléphones seulement.
• CSS du builder périmé : après une grosse modification, régénérez le CSS statique du builder. Un fichier tronqué ou obsolète peut laisser des règles manquantes jusqu'à sa reconstruction.
• Optimisations CSS : si le CSS allégé ou différé ne contient pas la règle qui dimensionne un élément, le décalage revient. Voir notre guide sur les styles manquants.

Valider

• Rejouez le scénario : mobile, bridé, chargement, défilement jusqu'en bas, ouverture du menu. Aucun clignotement bleu au-dessus de la ligne de flottaison.
• Puis « Valider la correction » dans Search Console, et laissez passer les 28 jours de la fenêtre de terrain.

Avec Mantys Core

En résumé

• Le labo voit rarement le décalage : prenez-le sur le fait dans les DevTools en faisant défiler et en interagissant.
• Six causes : images sans dimensions, styles tardifs, substitutions de police, en-têtes et bandeaux ajoutés par des scripts, sliders avant leur démarrage, contenus intégrés.
• Chaque correctif réserve l'espace avant que le contenu n'arrive.
• Sur les builders, surveillez les animations, les en-têtes mobiles et le CSS de builder périmé.
• Validez dans Search Console et attendez 28 jours.