Éléments qui bougent sur WordPress : corriger les déplacements et le CLS

Stabiliser la lecture et les zones cliquables

Vous commencez à lire un article et son texte descend brusquement. Une image, une publicité ou une bannière vient de prendre sa place ; parfois le titre change de largeur lorsque sa police arrive. Le CLS, ou indicateur de décalage cumulé de mise en page, aide à mesurer cette instabilité visuelle. Son score est sans unité : ce n’est pas une durée de chargement.

Le repère d’un bon CLS est de 0,1 ou moins pour au moins 75 % des visites. Un relevé local aide à trouver une cause, sans représenter tous les visiteurs. Certains déplacements surviennent après l’ouverture initiale, notamment pendant le défilement ou à l’arrivée d’un contenu externe.

Le résultat recherché est une page dont le contenu garde une place prévisible, avec des liens et boutons accessibles. Il ne suffit pas de cacher l’élément gênant pour améliorer un chiffre. Les trois parcours de ce guide portent sur les dimensions des images, la réservation d’un emplacement et le changement de police. Choisissez celui que vos observations confirment, avant d’ajouter un outil d’optimisation.

Reproduire le déplacement sans installer d’extension

Une URL publique et Chrome suffisent pour commencer. Notez la largeur de fenêtre, l’état de connexion et le parcours : ouverture seule, défilement, apparition d’une bannière ou déploiement d’un contenu. Les cookies déjà présents peuvent modifier ce que vous voyez. Comparez une session ordinaire et une session distincte lorsque ce contexte explique le défaut.

Dans les outils de développement, le panneau Rendering, ou Rendu, peut surligner les zones déplacées. Cet affichage montre où un mouvement est détecté ; il ne désigne pas automatiquement son origine. Le résultat attendu est une reproduction datée et visible du défaut. Désactivez ensuite le surlignage et rétablissez les options réseau modifiées.

1. Ouvrez F12, puis le menu des outils de développement, More tools et Rendering. Vous pouvez aussi rechercher Rendering dans leur menu de commandes.
2. Cochez Layout Shift Regions, puis rechargez la page. Regardez les zones brièvement mises en évidence pendant que les éléments arrivent.
3. Reprenez le défilement et le parcours qui provoquent le saut, sans envoyer de formulaire ni lancer une opération commerciale.
4. Dans Performance, enregistrez ce même parcours. Ouvrez les événements de la piste Layout shifts et examinez l’animation ou les éléments signalés, ainsi que ce qui apparaît juste avant eux.

Chercher ce qui prend de la place au-dessus du contenu déplacé

Le paragraphe signalé dans un rapport peut être la victime d’un ajout situé plus haut. Examinez la capture avant et après : une zone vide devient-elle une image, un bandeau ou une intégration ? Le titre change-t-il de nombre de lignes ? Une hauteur fixée disparaît-elle lorsque le script termine son travail ?

Choisissez ensuite le parcours adapté. Une image dont la place n’était pas réservée relève d’abord des dimensions. Un contenu externe ou un widget injecté tard demande un emplacement stable. Un texte qui change de forme quand une police arrive demande une comparaison typographique. Si la cause reste incertaine, conservez le relevé et testez une seule hypothèse sur copie.

Les modifications éditoriales demandent les droits de modifier la page ; le CSS additionnel ou un modèle peut exiger des droits supplémentaires. Avant de toucher un thème ou une extension, préparez une sauvegarde et une copie aux actions sortantes neutralisées. Sur un multisite, certains menus dépendent du superadministrateur. Les différences de droits ou d’hébergement n’autorisent pas à modifier au hasard un fichier parent ou les réglages de tout le réseau.

Approche 1 : donner à l’image une place prévisible

Ce parcours convient à une image du contenu dont la zone apparaît seulement quand le fichier arrive. Il demande le droit d’éditer la page. Dans le bloc Image natif, WordPress peut fournir des dimensions à partir du média. Si le balisage possède déjà un rapport correct, cherchez aussi une règle CSS qui l’annule ou un conteneur qui change de taille.

Conservez d’abord la version actuelle de la page et le média initial. Le choix d’une proportion de présentation peut recadrer le visuel : vérifiez que rien d’utile ne disparaît. Réduire uniquement le poids du fichier peut accélérer son arrivée sans supprimer l’absence de réservation.

1. Dans Pages ou Articles, ouvrez Modifier et sélectionnez l’image repérée à l’aide de la Vue en liste.
2. Vérifiez qu’il s’agit bien du bloc Image et du média voulu. Si c’est une image HTML personnalisée ou un fond, passez au contrôle du modèle concerné.
3. Dans les styles du bloc, examinez la proportion, la largeur et la hauteur. Rétablissez une proportion cohérente avec le média et une hauteur automatique lorsque rien ne justifie de la forcer.
4. Enregistrez sur la copie, puis rechargez sans cache local pour observer l’arrivée du visuel. Vérifiez la place réservée, le cadrage et la netteté sur mobile et ordinateur. Si le résultat se dégrade, restaurez les réglages et la version conservés.

Corriger les dimensions d’un balisage personnalisé

Cette variante avancée concerne un modèle qui génère une balise image sans dimensions. Elle demande l’accès au modèle d’un thème enfant existant et la confirmation du fichier réellement servi. Ne modifiez pas le cœur ni directement le thème parent. Une image gérée par un constructeur peut nécessiter son réglage propre, sans édition de ce balisage.

L’exemple montre seulement la forme attendue pour une ressource fictive de 1 200 par 800 pixels. Dans votre modèle, ajoutez ou corrigez width et height d’après le rapport réel de l’image ; conservez la source, le texte alternatif, les classes, les variantes srcset et sizes, ainsi que les autres attributs utiles. Ne remplacez pas toute la balise par cet exemple.

Une règle responsive comme une largeur maximale et une hauteur automatique peut laisser l’image s’adapter à son conteneur. Vérifiez toutefois qu’un autre style ne lui impose pas ensuite une hauteur incompatible. Le résultat attendu est une place calculable avant réception du fichier. Si le modèle devient incorrect ou si l’image est déformée, restaurez le fichier sauvegardé. Une fonction WordPress de génération d’image est préférable à un assemblage manuel lorsque le thème permet de l’utiliser correctement.

<img src="/chemin-fictif/image.jpg" width="1200" height="800" alt="Description adaptée au contenu réel">

Approche 2 : créer le conteneur du contenu tardif

Ce parcours vise une intégration ou un widget qui apparaît tardivement et repousse le texte. Il demande de modifier la page et son CSS. L’espace réservé doit contenir ce composant dès le premier affichage. Un bloc Espacement placé au-dessus ne remplit pas cette fonction : l’intégration peut encore s’ajouter à côté et augmenter la hauteur totale.

Sur la copie, identifiez les hauteurs effectivement nécessaires selon la largeur de l’écran et les états possibles. Un widget dont le contenu varie énormément peut demander un autre mode d’intégration, plutôt qu’une hauteur estimée trop petite. Pour une publicité, conservez aussi les dimensions autorisées par son service.

1. Dans l’éditeur, insérez un bloc Groupe à l’emplacement du composant. À l’aide de la Vue en liste, placez le bloc d’intégration à l’intérieur de ce groupe, sans y déplacer le texte qui suit.
2. Sélectionnez le Groupe, puis ses réglages avancés. Ajoutez reservation-widget dans Classes CSS additionnelles, en conservant les classes déjà présentes.
3. Enregistrez et vérifiez dans le HTML public que le conteneur est présent avant le chargement du widget et qu’il contient bien son emplacement.
4. Si le script injecte le contenu ailleurs, arrêtez ce parcours et corrigez son emplacement avec la personne qui maintient l’intégration. Pour annuler le regroupement, revenez à la version de page conservée.

Réserver une hauteur avec du CSS ciblé

Sur un thème classique, ouvrez Apparence, Personnaliser, CSS additionnel. Sur un thème blocs, ouvrez Apparence, Éditeur, Styles, puis le menu à trois points en en-tête et CSS additionnel. Ce dernier emplacement correspond à l’interface actuelle, déplacée depuis WordPress 6.9. Il faut les droits nécessaires à ces réglages.

Conservez le CSS existant, puis ajoutez seulement la règle du groupe créé précédemment. Les valeurs ci-dessous sont fictives : elles supposent un composant de 250 pixels de haut sur grand écran et de 180 pixels sur petit écran, avec une rupture choisie à 600 pixels. Remplacez ces valeurs d’après votre intégration. Elles ne sont ni des formats publicitaires universels ni une recommandation pour tout widget.

La hauteur minimale réserve une place tout en autorisant le conteneur à grandir. Elle ne bloque donc pas un dépassement imprévu et ne stabilisera pas un contenu plus haut que prévu. Ne lui ajoutez pas overflow:hidden pour masquer ce dépassement : vous pourriez couper un bouton ou une information.

Enregistrez, puis observez l’emplacement avant et après l’arrivée du composant. Le résultat attendu est que le texte suivant garde sa position dans les états prévus. Vérifiez aussi le cas où rien ne s’affiche. Pour revenir en arrière, retirez ces seules règles et restaurez le contenu du champ si nécessaire.

.reservation-widget {
    min-height: 250px;
}

@media (max-width: 600px) {
    .reservation-widget {
        min-height: 180px;
    }
}

Prévoir les états sans contenu et les bannières

La réservation doit fonctionner lorsque le service externe tarde, ne répond pas ou n’a rien à afficher. Retirer brusquement le conteneur vide après plusieurs secondes peut provoquer un nouveau saut. Un espace conservé ou un message de remplacement stable peut être préférable, selon l’usage de la page. Choisissez ce comportement dans l’intégration elle-même et contrôlez-le sur la copie.

Une bannière insérée en haut peut pousser tout le document. Si son outil propose plusieurs présentations, comparez un emplacement réservé ou une présentation qui n’altère pas le flux du contenu. Un panneau superposé peut toutefois cacher des liens ou gêner la navigation au clavier : il faut contrôler ces effets, pas seulement le CLS.

Gardez les fonctions de consentement et les informations nécessaires accessibles. Ne supprimez pas un bandeau pour obtenir un meilleur score et ne modifiez pas sa logique de déclenchement sans comprendre son rôle. Les états avec et sans choix déjà enregistré doivent être comparés. Les mêmes vérifications valent pour un en-tête qui change de hauteur pendant le chargement, un message promotionnel et une barre de connexion : chaque zone doit garder un comportement cohérent.

Approche 3 : comparer la police d’un titre

Ce parcours convient lorsque le titre change de largeur ou de nombre de lignes à l’arrivée d’une police téléchargée. Il demande de modifier ce bloc et le CSS additionnel. Une police système déjà présente sur l’appareil permet une comparaison ciblée ; elle peut modifier l’identité visuelle et varie selon le système utilisé.

Sur la copie, sélectionnez le bloc Titre concerné. Dans ses réglages avancés, ajoutez titre-stable dans les classes CSS additionnelles, sans supprimer les autres. Ajoutez ensuite la règle ci-dessous au CSS additionnel natif décrit précédemment. Elle ne vise pas tous les titres du site.

Rechargez sans cache local et observez si le changement de lignes disparaît. Dans les styles calculés du navigateur, vérifiez que cette famille s’applique réellement. Si une règle du thème la remplace, n’ajoutez pas une série de règles prioritaires au hasard : faites ajuster le ciblage dans la copie. Le résultat attendu est une comparaison qui confirme ou écarte le changement de police comme cause.

Pour annuler, retirez seulement cette règle et cette classe. Si la comparaison est concluante mais que la police d’origine doit rester, faites rapprocher les métriques de sa police de secours ou adapter son chargement. Cette adaptation demande les vrais fichiers et mesures ; aucun pourcentage universel ne convient.

.wp-block-heading.titre-stable {
    font-family: system-ui, sans-serif;
}

Examiner les styles tardifs et les animations

Une page peut d’abord apparaître sans sa présentation finale, puis se réorganiser à l’arrivée d’une feuille CSS ou d’une optimisation. Si le défaut est apparu après un réglage de chargement différé du CSS, comparez ce seul réglage sur la copie avec sa valeur précédente. Utilisez le menu documenté de l’outil réellement installé ; un intitulé identique peut cacher des fonctions différentes selon les produits.

Conservez une capture et la valeur initiale, rétablissez ce seul réglage puis rechargez dans les mêmes conditions. Le résultat attendu est la disparition du changement de présentation si cette transformation était en cause. Si rien ne change, remettez l’état initial et poursuivez l’analyse. Ne désactivez pas toute la sécurité ou toutes les extensions pour examiner un effet de style.

Pour une animation, déplacer un élément avec des transformations peut éviter certains calculs de mise en page, mais cela ne garantit pas une bonne expérience. Une animation peut encore masquer un bouton ou gêner une personne sensible au mouvement. Ne convertissez pas toutes les animations par une règle globale. Corrigez le composant identifié et gardez le respect de la préférence de réduction des mouvements.

Tester aussi après le premier affichage

Reprenez le parcours qui déclenchait le défaut : attendez l’arrivée du widget, faites défiler la page et ouvrez les parties prévues de l’interface. Dans le panneau Performance, enregistrez ces étapes après le chargement initial. Le surlignage des régions déplacées peut compléter ce relevé.

Une ouverture volontaire d’accordéon peut déplacer le contenu de manière attendue. Certains déplacements proches d’un clic ou d’une frappe, dans une fenêtre de 500 millisecondes, sont exclus du calcul du CLS. Cela ne signifie pas que tout déplacement suivant une interaction est ignoré. Le défilement n’est pas une entrée discrète équivalente à un clic pour cette règle.

Contrôlez donc le comportement visible au-delà du score. Un composant qui répond lentement puis repousse le texte peut rester gênant. Si une copie ne charge pas le même service externe que la production, notez cette différence : une page stable parce que son widget ne fonctionne plus ne valide pas la correction. Pour un formulaire ou une boutique, limitez-vous aux parcours de test prévus, sans soumission ni paiement réel.

Comparer la bonne page et le bon contexte

Un test au chargement et des données de visiteurs peuvent différer parce qu’ils ne couvrent pas la même durée. Une page stable pendant quelques secondes peut encore bouger lors d’un défilement plus tardif. Les contenus personnalisés, les cookies et les formats de publicité expliquent aussi des écarts entre visites.

Dans PageSpeed Insights, distinguez les données de cette URL de celles de toute l’origine, c’est-à-dire de l’ensemble du site concerné. Si les données de l’URL sont absentes, un résultat global ne prouve pas que cette page particulière a le même défaut. Conservez le rapport local qui reproduit votre symptôme.

Les contenus dans des cadres intégrés peuvent également compliquer la mesure. Un relevé JavaScript du document principal ne voit pas nécessairement tous les déplacements internes d’un cadre externe. Transmettez au prestataire une capture du parcours et l’intégration en cause, plutôt que d’ajouter du code de mesure qui prétendrait couvrir automatiquement tous ces cas. L’important reste de reproduire le problème réel dans les conditions où les visiteurs le rencontrent.

Valider le résultat et garder un retour arrière simple

Après chaque correction, comparez plusieurs ouvertures sur mobile et ordinateur, avec les mêmes réglages de fenêtre, réseau et cache. Rejouez aussi le parcours tardif. Notez le déplacement visé, le contenu conservé et les différences observées ; ne retenez pas uniquement la meilleure valeur.

Vérifiez que les images gardent leur sens, que le contenu ne dépasse pas horizontalement et que les commandes restent visibles. Agrandissez le texte et testez la navigation au clavier, notamment pour les bannières ou panneaux superposés. Une hauteur estimée peut devenir insuffisante avec un texte plus long ou un autre affichage.

Si le résultat est mauvais, annulez uniquement le changement testé : réglages d’image, balisage du modèle, règles CSS ou classe du bloc. Les copies conservées permettent ce retour sans restaurer toute la base de production. Si vous avez modifié un composant dynamique, confirmez ensuite que son fonctionnement et ses états vides sont revenus au comportement prévu.

Prévenir les déplacements lors des prochaines modifications

Gardez une fiche avec la page, la largeur d’écran, le parcours et la cause corrigée. Notez pourquoi une place est réservée et sur quelles dimensions elle repose. Reprenez le contrôle après un changement de média, de police, de bannière ou d’intégration externe : un emplacement adapté aujourd’hui peut devenir insuffisant avec un nouveau format.

Les outils du navigateur, les blocs natifs et un CSS limité au composant suffisent aux parcours proposés ici. Une extension de cache ou de compression n’est pas un correcteur automatique de mise en page ; ajouter plusieurs optimisations sans relevé peut rendre la cause plus difficile à retrouver.

Si le défaut persiste, fournissez à la personne qui maintient le site l’URL, le contexte, l’enregistrement et les captures avant et après. Précisez l’élément qui bouge et celui qui semble prendre de la place. Cette distinction permet de corriger l’image, le conteneur ou le style responsable sans réorganiser tout le site.

Comparez le même chargement avec et sans dimensions

La recette locale ouvre deux pages WordPress qui affichent la même image. Le serveur attend 700 millisecondes avant d’envoyer le fichier. Dans les deux pages, le CSS affiche l’image à la largeur du conteneur avec une hauteur automatique. Dans la première, le navigateur dispose des dimensions seulement à la réception du fichier. Dans la seconde, les attributs HTML donnent la largeur et la hauteur intrinsèques dès le premier affichage. Sur une fenêtre de 390 pixels de large, le bloc suivant a descendu de 179 pixels dans la première version et gardé sa position dans la seconde. Le test sur une fenêtre de 1 024 pixels a donné respectivement 320 et 0 pixels.

Sur une copie de votre page, choisissez un repère dans la zone visible juste après l’image, comme un titre. Dans Chrome, ouvrez les outils de développement, puis Performance. Fixez la même largeur et la même vitesse réseau pour les deux essais. Enregistrez un chargement avant la correction et repérez le moment où le titre bouge dans la piste des déplacements de mise en page. Contrôlez dans Éléments les dimensions du fichier réellement affiché. Après correction dans le bloc ou le modèle qui produit l’image, enregistrez de nouveau la même page. Vérifiez à la fois que le titre garde sa position et que l’image conserve ses proportions.

Si le nouveau réglage étire ou recadre l’image de façon indésirable, remettez la valeur ou la révision précédente sur la copie. Vérifiez ensuite les proportions du fichier sélectionné à cette largeur avant de modifier de nouveau le balisage. Un recadrage différent sur mobile peut demander des dimensions cohérentes avec l’image mobile.

Mesurez l’effet du conteneur lorsque le bloc arrive en retard

Dans le second essai, un module de 160 pixels de haut apparaît après le premier affichage. Son insertion a repoussé de 160 pixels le début de la section suivante aux deux largeurs testées. Avec une hauteur minimale de 160 pixels appliquée au conteneur présent dès le départ, la section suivante a gardé sa position. Chrome a relevé des événements de déplacement dans les deux variantes sans réservation. Le score observé pour les variantes corrigées était de zéro pendant la fenêtre d’essai.

Pour tester votre module, ouvrez la copie du modèle ou de la page et identifiez l’élément présent avant l’arrivée du contenu. Dans l’éditeur de blocs, placez le module dans un Groupe qui existe dès le rendu et attribuez-lui la classe utilisée par votre règle de CSS. Choisissez une hauteur à partir du contenu affiché sur vos tailles d’écran cibles. Rejouez le chargement avec le même repère placé après le groupe. Vérifiez aussi l’état vide, l’échec de chargement et un contenu plus long si ces cas existent sur votre site. Le groupe doit pouvoir s’agrandir si le contenu dépasse sa hauteur minimale. Si un grand espace vide gêne la lecture, retirez la seule règle ajoutée et reprenez les mesures sur ces états.

Notez ce que couvre chaque enregistrement

Pour conserver un relevé reproductible, notez l’adresse de la copie, la largeur de la fenêtre, l’action réalisée, les réglages de réseau et la durée d’observation. Gardez le même repère visuel et les mêmes conditions avant et après chaque modification. Comparez les résultats par largeur. Un module au bas de l’écran peut déplacer peu de contenu visible sur ordinateur et affecter une zone plus importante sur téléphone.

Le déplacement en pixels situe ce qui bouge. Le CLS tient aussi compte de la surface visible touchée et regroupe les événements en fenêtres de mesure. Dans le banc, Chrome relève les événements sans saisie récente sur un chargement contrôlé. Utilisez les chiffres de ce type pour comparer deux versions d’un même scénario. Pour évaluer les parcours réels, examinez séparément les données de terrain disponibles et rejouez les écrans ou états qui se chargent après le premier affichage.