CLS : pourquoi votre page bouge au chargement, et comment l'éviter
1 point = 1 site
Source : Étude Elozeo, 670 sites de PME dans 7 villes, septembre 2026
Le CLS (Cumulative Layout Shift) mesure combien la page bouge pendant son chargement. Pour les images, la correction est simple : donnez à chaque image ses dimensions, width et height : le navigateur lui réserve sa place avant qu'elle arrive, et la page ne bouge plus.
Qu'est-ce que le CLS (Cumulative Layout Shift) ?
Sans dimensions, le navigateur ne sait pas quelle place garder à l'image. Quand elle arrive, tout le texte en dessous saute. Le visiteur perd sa ligne, ou clique sur un autre bouton que celui qu'il visait.
Google mesure ce décalage dans ses Core Web Vitals, les indicateurs d'expérience de page (web.dev). C'est un petit point du classement. Le vrai gain est pour vos visiteurs sur mobile.
Quel est un bon score CLS ?
Un score CLS de 0,1 ou moins est bon, selon Google (web.dev). Au-dessus de 0,25, l'expérience est jugée mauvaise.
Comment corriger le CLS causé par les images ?
En donnant à chaque image sa largeur et sa hauteur (les étapes sont plus bas). Ce n'est pas urgent : notre audit le classe en point mineur. C'est souvent vite corrigé, car le thème du site le règle pour toutes les pages à la fois.
Comment vérifier en deux minutes ?
Ouvrez la page sur votre téléphone avec une connexion lente. Si le texte saute quand une image apparaît, c'est ce problème. Dans le code, chaque balise <img> listée doit porter width et height.
Faut-il des tailles fixes ?
Non. Les attributs donnent le rapport largeur/hauteur ; le CSS peut ensuite adapter l'image à l'écran (web.dev). Une règle aspect-ratio en CSS fonctionne aussi.
Comment le corriger
Les mêmes étapes que dans l’audit Elozeo. Les pages « concernées » sont celles que votre audit signale, une par une, avec la preuve.
Les étapes
- Ajoutez les attributs width et height à chaque image concernée (ou un ratio d'aspect en CSS), pour que la page ne saute pas pendant le chargement.
Pour vérifier
Chaque balise <img> concernée doit avoir width et height.
Le corriger avec votre assistant IA
Copiez ce texte dans ChatGPT, Claude ou Mistral. Il reprend nos étapes et demande à l’assistant de les adapter à votre site, une étape à la fois, en commençant par une sauvegarde. Remplacez « [l’adresse de votre site] » par la vôtre.
Tu es mon assistant pour corriger un problème de référencement sur mon site [l’adresse de votre site]. Je ne suis pas développeur : guide-moi pas à pas. LE PROBLÈME (relevé par un audit Elozeo, preuve à l’appui) Des images n'ont pas de dimensions (la page bouge au chargement) La page se décale pendant le chargement, et le visiteur clique parfois au mauvais endroit. Guide de référence (lis-le si tu peux ouvrir une page web) : https://www.elozeo.com/ressources/problemes/dimensions-images/ MON SITE TOURNE SUR : je ne sais pas, demande-le-moi d’abord. LES ÉTAPES VÉRIFIÉES POUR LE CORRIGER 1. Ajoutez les attributs width et height à chaque image concernée (ou un ratio d'aspect en CSS), pour que la page ne saute pas pendant le chargement. COMMENT JE VEUX QUE TU M’AIDES - Adapte ces étapes à ma configuration exacte, sans en inventer d’autres. Si ce que je vois ne correspond pas, demande-moi une description ou une capture avant de continuer. - Une étape à la fois : attends que je te dise « fait » avant de passer à la suivante. - Commence par me demander comment j’accède à mon site (outil, version, accès). - Avant toute modification, fais-moi faire une sauvegarde. - Ne touche à rien qui puisse retirer une page de Google (robots.txt, balise noindex, redirections) sans ma confirmation explicite. - Explique sans jargon, en français. POUR FINIR, VÉRIFIONS ENSEMBLE Chaque balise <img> concernée doit avoir width et height. Ensuite, je relancerai la vérification dans Elozeo.
Comment Elozeo vous aide ?
Elozeo repère les images sans largeur ni hauteur sur chaque page qu'il lit, avec l'adresse de chacune. L'audit gratuit lit votre page d'accueil. Avec Elozeo Marketeur, chaque audit mensuel lit jusqu'à 100 pages et dit qui peut corriger, en combien de temps ; avec Analyste, vous avez aussi les étapes pour votre outil, et Elozeo relit la page une fois la correction faite.
Chiffre issu de l'étude Elozeo sur 670 sites de PME (contrôles automatiques, sans IA). Les étapes sont celles de l'audit Elozeo. L'IA a aidé à la rédaction ; Vladislav Ceperkovic a vérifié chaque source et validé le guide.