CLS : empêcher les images et intégrations de décaler votre page
Une page qui se décale pendant la lecture peut provoquer un mauvais clic ou faire perdre la ligne suivie. Pour réduire le CLS, réservez la place des éléments avant leur affichage, puis cherchez ce qui modifie encore la géométrie de la page après son chargement.
Identifier ce qui pousse le contenu
Le guide CLS de web.dev traite de la stabilité visuelle. Une image sans espace réservé, une police tardive ou une intégration externe peuvent déplacer les blocs déjà visibles.
| Élément | Contrôle utile |
|---|---|
| Image | Dimensions ou ratio réservés |
| Vidéo et iframe | Zone prévue avant le chargement |
| Police | Effet du changement de métrique sur les lignes |
| Bannière | Apparition qui ne pousse pas un bouton en cours d’utilisation |
Ne mesurez pas uniquement la page une fois stabilisée. Observez son arrivée avec un réseau ralenti et les états où les contenus secondaires se chargent plus tard.
Prévoir la place sans figer une hauteur inadaptée
Une réservation doit respecter le ratio et les besoins du composant. Fixer une hauteur trop faible à une vidéo ou à un formulaire peut couper le contenu sur mobile. Fixer une grande hauteur partout peut créer un vide inutile.
Exemple fictif : un aperçu client de 16:10 est intégré dans une zone qui n’a aucune hauteur avant réception. Réserver ce ratio stabilise les blocs suivants. Si l’aperçu possède ensuite une interface de navigation, prévoyez aussi sa place plutôt que de la faire apparaître sous la carte.
Tester les changements provoqués par le contenu réel
Remplacez les titres courts de maquette par les vrais titres. Vérifiez les variantes produit, messages d’erreur et traductions utilisées. Une carte stable avec un texte fictif peut s’allonger dès que le catalogue réel est chargé.
Distinguez les déplacements attendus après une action de ceux qui surprennent le visiteur. Le calcul de la métrique suit ses propres règles ; la recette doit aussi examiner les problèmes d’usage qui ne se voient pas dans le score final.
Relire les interactions après correction
Vérifiez les boutons, le focus clavier et le retour à la page précédente. Évitez de masquer du contenu important pour stabiliser le rendu. Le plan d’action doit nommer la cause observée et le composant corrigé.
Le guide sur les intégrations iframe complète les contraintes de contenu embarqué. Le LCP mesure un autre aspect : une page peut afficher vite son élément principal tout en continuant à déplacer le reste de son interface.
Questions fréquentes
Pourquoi une image fait-elle bouger le texte pendant le chargement ?
Si son espace n’est pas réservé, son arrivée peut déplacer les éléments voisins. Vérifiez les dimensions ou proportions prévues ainsi que le comportement responsive.
Comment éviter qu’une iframe décale la page ?
Réservez un espace cohérent avec le contenu attendu et ses tailles d’affichage. Testez le chargement réel de l’intégration, pas seulement une zone déjà remplie dans la maquette.
Un bon CLS garantit-il qu’aucun élément ne bouge ?
Le score mesure certains décalages selon sa définition. Contrôlez aussi les interactions réelles et les mouvements qui gênent le choix ou le clic, même s’ils ne résument pas le score.
Sources
Documentation consultée le 23 octobre 2026.