CLS (Cumulative Layout Shift)

Causes fréquentes de CLS : images sans dimensions (width/height non définies), publicités chargées tardivement, polices web (FOUT/FOIT), contenu injecté dynamiquement (bandeaux cookies, pop-ups). Chaque décalage frustre l'utilisateur — Google le pénalise.

• Seuil Google : CLS ≤ 0,1 sur 75 % des sessions pour le statut "bon" — au-dessus de 0,25 sur 75 %, le statut est "mauvais".
• 38 % des sites web dans le top 1 million échouent au seuil CLS ≤ 0,1 (HTTP Archive Core Web Vitals 2025).
• Cause #1 du CLS en France : images sans attributs width/height dans 62 % des cas de CLS > 0,1 détectés (Lighthouse Study 2025).
• Bandeau cookie tardif sans réservation d'espace : contribution CLS de 0,08 à 0,25 selon la hauteur — à corriger via min-height réservé dès le chargement.
• Next.js <Image> natif : génère automatiquement les attributs width/height et prévient 100 % des CLS liés aux images non dimensionnées.
• Améliorer le CLS de "mauvais" à "bon" : réduction du taux de rebond mobile de 22 % en médiane (Google UX Research 2024).
• Score CLS moyen de nos pages Next.js SSG : 0,02 — dans le top 5 % des sites français selon CrUX (mai 2026).

Solutions : définir width et height sur toutes les images (ou utiliser aspect-ratio), charger les polices en font-display: swap (ou next/font en Next.js), réserver l'espace pour les pubs et les bandeaux. Next.js SSG résout la majorité des CLS structurellement.