Atteindre 100/100 sur Lighthouse (Performance, Accessibility, Best Practices, SEO) impressionne dans une présentation client. Mais surtout, ça impacte directement votre SEO (depuis 2021 Google utilise les Core Web Vitals comme facteur de ranking) et votre conversion (étude Akamai : -100ms de LCP = -7% de conversion). Cet article décrit la méthode pratique pour viser 90-100 sur les 4 axes Lighthouse, applicable sur 80% des sites WordPress et Next.js sans réécrire votre code. C'est ce qu'on applique en standard sur tous les projets Krealabs.
01Comprendre les 4 catégories Lighthouse
**Performance** mesure les Core Web Vitals (LCP, INP, CLS) + des métriques annexes (FCP, TBT, SI). C'est la plus dure à optimiser. **Accessibility** vérifie WCAG 2.1 (contraste, labels, navigation clavier, ARIA). Souvent à 95+ par défaut si vous codez proprement, 100 demande quelques ajustements. **Best Practices** vérifie HTTPS, l'absence de vulnérabilités JS, les console errors, l'usage d'APIs dépréciées. Généralement à 100 si rien n'est cassé. **SEO** vérifie les méta tags, mobile-friendliness, descriptions de pages, robots.txt, lien internal. 100 facile à atteindre. Voir [notre lexique Lighthouse](/lexique/lighthouse).
02Performance : les 5 leviers à activer en priorité
(1) **Images en AVIF/WebP** avec lazy loading natif. Next.js Image les fait par défaut, sur WordPress utiliser Imagify ou ShortPixel. (2) **Preload des fonts critiques** : `<link rel="preload" as="font" type="font/woff2" crossorigin>` sur les 1-2 fonts utilisées au-dessus de la ligne de flottaison. (3) **Tree-shaking et lazy loading JS** : les composants lourds (charts, vidéo embeds) en dynamic import. (4) **CDN edge** : Vercel ou Cloudflare devant le serveur - divise LCP par 2-3 sur les visiteurs lointains géographiquement. (5) **Critical CSS inline** : pour les sites WordPress, des plugins comme WP Rocket ou Autoptimize automatisent.
03LCP < 2.5s : la métrique-reine
Le **LCP** (Largest Contentful Paint) est typiquement votre image hero ou votre titre H1. Pour le faire passer sous 2.5s : (a) preload l'image hero avec `<link rel="preload" as="image" href=...>` dans le `<head>`, (b) utiliser `priority` sur le Next.js `<Image>` correspondant, (c) servir l'image en AVIF (40% plus léger que WebP, supporté par 95% des navigateurs en 2026), (d) déclarer width et height explicites pour éviter CLS, (e) si l'hero est une vidéo, basculer en image statique avec play-on-click. Sur les sites WordPress avec page builders : c'est souvent le LCP qui plante à 4-7s. Migration vers thème custom = LCP qui passe à 1.2-1.8s.
04INP < 200ms : la métrique INSidieuse
L'**INP** (Interaction to Next Paint, remplace FID depuis 2024) mesure la réactivité aux clics, taps, frappe clavier. Les coupables habituels : (1) scripts tiers qui bloquent le main thread (Hotjar, Clarity, Tag Manager mal configuré), (2) animations CSS coûteuses sur des éléments interactifs, (3) re-renders React inutiles, (4) plugins WordPress lourd (Elementor, Divi). Solutions : audit Performance dans Chrome DevTools > onglet Lighthouse, identifier les long tasks (> 50ms), defer/async les scripts non-critiques, mémoiser les composants React lourds (React.memo, useMemo), supprimer les plugins WordPress JS-bloated. Voir notre [lexique INP](/lexique/inp).
05CLS < 0.1 : éviter le "contenu qui saute"
Le **CLS** (Cumulative Layout Shift) mesure les changements de mise en page qui surviennent après le premier rendu. Causes typiques : (1) images sans `width` ou `height` qui poussent le contenu après chargement, (2) fonts custom qui changent les dimensions du texte au load (utiliser `font-display: optional` ou `swap` + `size-adjust`), (3) ads/embeds (YouTube, Twitter) qui s'insèrent sans réserver l'espace, (4) animations qui shift d'autres éléments. Solutions : toujours déclarer width/height sur les images, réserver l'espace pour les embeds avec `aspect-ratio` CSS, préload les fonts, éviter les animations qui pushent d'autres éléments.
06Accessibility : 5 fixes pour gagner 5-10 points
(1) **Contraste suffisant** : minimum 4.5:1 pour le texte normal, 3:1 pour le large. Tester avec Chrome DevTools > Lighthouse ou WebAIM Contrast Checker. (2) **Labels sur tous les inputs** : `<label for="email">` ou `aria-label`. (3) **Alt sur toutes les images** : descriptif si l'image porte du sens, `alt=""` si décorative. (4) **Skip-to-content link** au début du body pour la navigation clavier (WCAG 2.4.1). (5) **HTML sémantique** : `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>` au lieu de `<div>` partout. Ces 5 fixes appliqués = score Accessibility 95-100 sur 90% des sites.
07SEO : 100/100 quasi-automatique en 2026
Le score SEO Lighthouse est le plus facile à viser 100. Les checks de base : meta description présente (50-160 chars), title unique par page, viewport meta tag, robots.txt accessible, links rel=canonical, contenu indexable (pas bloqué par robots). Sur Next.js 16, le Metadata API gère tout ça nativement. Sur WordPress, Yoast SEO ou RankMath le font. Bonus pour passer à 100 : page mobile-friendly (responsive), images avec attribut alt, links descriptifs (pas "cliquez ici"), absence de plugins qui bloquent l'indexation.
08Best Practices : éviter les pièges 2026
Le score Best Practices descend généralement à cause de : (1) **Console errors** en production (logs oubliés, erreurs JS non catchées) → wrapper les erreurs avec try/catch. (2) **APIs JS dépréciées** (anciennes méthodes jQuery, document.write, Geolocation sans HTTPS) → moderniser le code legacy. (3) **HTTPS forcé** non configuré (Vercel le fait par défaut, sur OVH ça peut manquer). (4) **Mixed content** (image http sur une page https) → tout en HTTPS. (5) **Cookies sans SameSite** → ajouter SameSite=Lax ou Strict. Cinq fixes pour rester à 100.
Atteindre 90-100 sur les 4 axes Lighthouse n'est pas réservé aux experts. Avec 6-12h de travail méthodique sur un site WordPress moyen (et nettement moins sur un Next.js récent), vous passez d'un Lighthouse 50-70 à 95+. L'impact mesurable : +5-15% de trafic SEO en 2-4 mois, +5-10% de conversion. C'est ce qu'on applique en standard sur tous les projets Krealabs avant livraison. Pour auditer votre site existant, contactez-nous - premier diagnostic offert. Voir aussi notre article sur Core Web Vitals 2026, notre méthode d'audit Lighthouse, et nos services Performance & SEO.
Écrit par
Maxime Dubois
Fondateur · Krealabs
Découvrir l'équipe
