Résumé rapide du problème
Le CLS (Cumulative Layout Shift) mesure l'instabilité visuelle d'une page : les éléments qui bougent pendant le chargement. Sur WordPress, il vient d'images sans dimensions, de publicités, de polices web et de contenus injectés tardivement. Un bon CLS reste inférieur à 0,1.
Solution rapide
Indiquez largeur et hauteur sur toutes les images, réservez l'espace des bannières et des intégrations, et chargez les polices web avec une stratégie qui évite les sauts de texte.
Comment reconnaître ce bug
- Le contenu saute ou se réorganise pendant le chargement de la page
- On clique par erreur sur le mauvais élément à cause d'un décalage
- PageSpeed Insights affiche un CLS supérieur à 0,1
- Le texte change brusquement d'apparence quand la police web s'applique
Qu'est-ce que ce bug WordPress ?
Le CLS quantifie les mouvements imprévus des éléments visibles pendant le chargement : un bouton qui glisse au moment du clic, un texte poussé vers le bas par une image qui arrive tard. Sur WordPress, il est rarement dû à une panne, mais à des éléments dont la place n'est pas réservée à l'avance dans la mise en page.
Pourquoi ce problème apparaît-il ?
Images sans dimensions
Sans largeur ni hauteur, le navigateur ne réserve pas l'espace de l'image.
Publicités et intégrations
Bannières, vidéos et iframes apparaissent et poussent le contenu existant.
Polices web mal chargées
Le passage d'une police de secours à la police finale décale le texte.
Contenu injecté tardivement
Bandeaux de cookies ou éléments ajoutés en JavaScript déplacent la page.
Bloc de mise en page dynamique
Un carrousel ou un module chargé après coup modifie la hauteur du contenu.
Comment réparer ce bug WordPress
Repérer les éléments instables
PageSpeed Insights et l'outil de performance du navigateur identifient les éléments qui se décalent.
Dimensionner les images
Ajoutez les attributs width et height, ou un ratio en CSS, à chaque image et vidéo.
Réserver l'espace des publicités
Attribuez une hauteur fixe aux emplacements publicitaires et aux intégrations.
Stabiliser les polices
Préchargez les polices web et utilisez une stratégie d'affichage qui limite le saut de texte.
Maîtriser les éléments injectés
Placez les bandeaux de cookies en superposition plutôt qu'en poussant le contenu.
Comment éviter que ce bug revienne
- Imposez toujours des dimensions aux images et vidéos
- Réservez l'espace de tout contenu chargé après le rendu initial
- Limitez le nombre de polices web et préchargez-les
- Évitez d'insérer des éléments qui décalent la mise en page
Questions fréquentes (FAQ)
Qu'est-ce qu'un bon score CLS ?
Pourquoi mes images causent-elles du CLS ?
Le bandeau de cookies augmente-t-il le CLS ?
Les polices web peuvent-elles provoquer du CLS ?
L'équipe Mr.WordPress
Experts en dépannage WordPress
Notre équipe technique intervient chaque jour sur des sites WordPress en panne — erreurs serveur, piratages, lenteurs, conflits de plugins. Chaque guide est rédigé et vérifié à partir de cas réels d'intervention.
En savoir plus sur Mr.WordPress →