Performance web — comment passer de 50 à 100 sur Lighthouse en 2026
Le score Lighthouse médian d'un site WordPress mobile est de 38/100. AVIF compresse 50 % mieux que JPEG avec 95 % de support navigateur. Les 103 Early Hints améliorent le LCP de 30 %. Ce guide décompose la route de 50 à 100 en quick wins, optimisations moyennes et techniques avancées — avec des études de cas avant/après.
Comprendre le scoring pour l'attaquer efficacement
| Métrique | Pondération | Cible pour 100 |
|---|---|---|
| TBT | 30 % | < 200 ms |
| LCP | 25 % | < 1,2 s (desktop) |
| CLS | 25 % | < 0,1 |
| FCP | 10 % | < 1,0 s |
| Speed Index | 10 % | < 1,3 s |
Distribution log-normale : le P25 = score 50, le P8 = score 90. Passer de 50 à 75 est facile. Passer de 90 à 100 demande des optimisations chirurgicales.
Quick wins : +15-25 points immédiatement
fetchpriority="high"sur l'image LCP + supprimerloading="lazy"du above-the-fold (+4 % LCP selon Etsy)- AVIF/WebP avec
<picture>et fallbacks : -50 % de poids image - CSS critique inline + chargement différé du stylesheet complet
async/defersur tous les scripts non critiques
<picture>
<source srcset="hero-800.avif 800w, hero-1200.avif 1200w" type="image/avif"
sizes="(max-width: 800px) 100vw, 50vw">
<source srcset="hero-800.webp 800w" type="image/webp">
<img src="hero-1200.jpg" alt="Description" width="1200" height="800"
fetchpriority="high" decoding="async">
</picture>Polices et JavaScript : les gains sous-estimés
Polices : WOFF2 + variable fonts + subsetting = une seule requête au lieu de 4-5. Self-hosting obligatoire (contrôle cache, pas de GDPR issue). Outils : glyphhanger pour le subsetting, next/font pour les fallback metrics.
JavaScript : imports nommés (import debounce from 'lodash/debounce'), code splitting avec React.lazy() → -30-50 % bundle initial. Remplacer Moment.js (289 KB) par Day.js (2 KB). Server Components : zéro JS envoyé pour les composants non interactifs.
CSS avancé : content-visibility et containment
.below-fold-section {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}Impact mesuré : temps de rendu de 232 ms → 30 ms (7× amélioration). CSS Layers (@layer) organisent la spécificité et évitent le bloat.
103 Early Hints et edge computing
103 Early Hints : le serveur envoie des hints de préchargement pendant le traitement de la requête.
# Nginx
location / {
add_header Link "</css/style.css>; rel=preload; as=style" always;
add_header Link "</fonts/inter.woff2>; rel=preload; as=font; crossorigin" always;
}Impact réel : +30 % LCP chez Akamai. Edge computing (Vercel Edge, Cloudflare Workers) : TTFB < 50 ms globalement.
Partytown déplace les scripts tiers dans un Web Worker — Builder.io atteint 100/100 Lighthouse avec cette technique.
Études de cas avant/après
- Builder.io : 100/100 mobile avec Partytown + Qwik (99 % de JS éliminé)
- Site avec Partytown + GTM : 69 → 93 Lighthouse mobile
- Blog Eleventy : 48 → 96 (subsetting polices + lite-youtube + optimisation images)
- Akamai Early Hints : 30 % d'amélioration LCP en données réelles
- KYTIPO : tous nos sites Next.js livrent un score 95+ sur mobile — AVIF natif, SSG, CSS critique inline, zéro script bloquant