Comment atteindre 100/100 Lighthouse : notre processus étape par étape

Un score de 100/100 Lighthouse est-il vraiment atteignable ? Oui — et non seulement atteignable, mais reproductible si on suit les bons principes dès la conception. Chez Webomax, nos sites Next.js atteignent systématiquement des scores supérieurs à 95, et régulièrement 100 sur les quatre catégories (Performance, Accessibilité, Bonnes pratiques, SEO). Voici exactement comment.

Le constat — Pourquoi la plupart des sites plafonnent à 60-70#

Lighthouse est l'outil d'audit de Google intégré dans Chrome DevTools. Il mesure six métriques de performance (Core Web Vitals + métriques complémentaires) et donne un score de 0 à 100 sur quatre axes. Ce score influence indirectement le classement Google via les signaux d'expérience utilisateur.

La plupart des sites construits sur des CMS traditionnels (WordPress, Prestashop, Shopify) plafonnent entre 40 et 70 pour plusieurs raisons structurelles :

• Trop de JavaScript : les plugins et thèmes chargent des scripts qui bloquent le rendu de la page
• Images non optimisées : JPEG lourds, pas de lazy loading, images surdimensionnées
• CSS inutile : les frameworks CSS chargés en entier, même les règles non utilisées
• Temps de réponse serveur élevé (TTFB) : serveurs mutualisés sans cache, PHP qui génère le HTML à chaque requête
• Polices mal chargées : Google Fonts bloquants, FOIT (Flash Of Invisible Text)

Ces problèmes sont souvent interdépendants et difficiles à résoudre partiellement sur une architecture qui ne les anticipe pas.

La solution — Les leviers par ordre d'impact#

1. Réduire le Largest Contentful Paint (LCP)

Le LCP mesure le temps d'apparition de l'élément visuel principal (hero image, titre principal). C'est la métrique avec le plus fort impact sur le score.

Actions prioritaires :

• Identifier l'élément LCP avec Chrome DevTools et s'assurer qu'il est priorisé
• Précharger l'image hero avec <link rel="preload"> ou l'attribut priority en Next.js
• Servir l'image hero en WebP ou AVIF, correctement dimensionnée
• Réduire le TTFB (temps de réponse initial du serveur) sous les 200ms — ce qui passe par un bon hébergement et une mise en cache efficace

2. Éliminer le JavaScript bloquant

Le rendu de la page est bloqué tant que les scripts synchrones en <head> n'ont pas fini de se charger et de s'exécuter.

Actions :

• Tous les scripts non critiques doivent être chargés avec defer ou async
• Supprimer les scripts tiers inutiles (anciens trackers, widgets non utilisés)
• Utiliser l'import dynamique (import()) en Next.js pour les composants lourds chargés uniquement si nécessaire

3. Optimiser les polices

Les Google Fonts chargées de manière standard bloquent le rendu et provoquent un FOIT ou FOUT (Flash Of Unstyled Text). Depuis Next.js 13, le composant next/font résout ce problème automatiquement : les polices sont téléchargées au build time, hébergées en local, et chargées avec font-display: swap par défaut.

4. Réduire le CSS inutilisé

Les frameworks CSS (Bootstrap, Tailwind non purgé) peuvent charger plusieurs centaines de Ko de règles dont 95 % ne sont jamais appliquées. Tailwind CSS avec le purge activé réduit le CSS final à quelques Ko. On évite également les CSS bloquants en <head> pour les styles non critiques.

5. Améliorer le Cumulative Layout Shift (CLS)

Le CLS mesure les décalages de mise en page inattendus pendant le chargement. Il est souvent causé par :

• Des images sans dimensions définies (le navigateur ne réserve pas l'espace avant que l'image soit chargée)
• Des polices qui changent la taille du texte à l'affichage
• Des publicités ou iframes sans dimensions fixes

En Next.js, le composant <Image> oblige à définir width et height, ce qui élimine ce problème sur les images.

Règle des 80/20 : optimiser les images, précharger le LCP et corriger les polices résout généralement 70 à 80 % des problèmes de score Lighthouse. Commencez par là.

Notre approche chez Webomax#

1. 01Audit initialMesure du score actuel
2. 02ImagesWebP + lazy loading
3. 03CodeTree-shaking + minification
4. 04FontsPreload + display swap
5. 05DéploiementEdge CDN + cache

Notre processus d'optimisation est intégré à chaque phase du projet, pas appliqué en finition.

En conception :

• On identifie l'élément LCP de chaque page clé avant même de commencer le développement
• On choisit des polices disponibles via next/font pour éviter les appels vers Google Fonts
• On définit un budget de performance (Performance Budget) : poids total de la page < 500 Ko en ressources compressées, LCP < 2,5s, CLS < 0,1

En développement :

• Next.js <Image> pour toutes les images sans exception
• next/font pour toutes les polices
• Import dynamique pour les composants lourds (éditeurs de texte, cartes interactives, modales complexes)
• Tailwind CSS avec purge automatique
• Vérification régulière avec Lighthouse en mode "Navigation" dans Chrome DevTools

Avant livraison :

• Audit complet Lighthouse sur toutes les pages principales (mobile et desktop)
• Test sur PageSpeed Insights (version en ligne de Lighthouse avec données réelles)
• Test TTFB avec WebPageTest depuis plusieurs localisations
• Vérification Core Web Vitals dans Google Search Console 30 jours après mise en production

Optimisations infrastructure :

• Déploiement sur Vercel ou Cloudflare Pages (CDN mondial, Edge Network, cache agressif)
• Compression Brotli activée sur tous les assets statiques
• Cache-Control approprié sur les ressources statiques (1 an pour les images et fichiers avec hash)

Pour aller plus loin sur la relation entre performance et référencement, lisez notre article sur les stratégies de rendu SSG, SSR et ISR qui impactent directement le TTFB et le LCP.

Ce qu'il faut retenir#

Atteindre 100/100 Lighthouse n'est pas une fin en soi — c'est le symptôme d'un site bien construit. Les véritables bénéfices sont :

• Un LCP < 2,5s qui satisfait Google et réduit le taux de rebond
• Un CLS < 0,1 qui offre une expérience utilisateur stable
• Un FID / INP < 200ms qui garantit la réactivité des interactions
• Un meilleur positionnement dans les résultats Google grâce aux signaux d'expérience utilisateur
• Des coûts d'hébergement réduits grâce à moins de charge serveur (statique > dynamique)

Les actions concrètes par priorité :

1. Optimiser et précharger l'image LCP
2. Migrer les polices vers next/font ou un équivalent local
3. Supprimer ou différer les scripts non critiques
4. Activer la compression et le cache sur les assets statiques
5. Déployer sur un CDN avec Edge Network

Si votre site affiche un score inférieur à 70 sur mobile, il y a des opportunités de gain rapide. Un audit de votre site peut identifier en quelques heures les actions prioritaires à mettre en place.