Quatre cercles verts affichant 100 : c'est l'objectif que je fixe à chaque site que je livre. Lighthouse, l'outil d'audit intégré à Chrome, évalue une page sous quatre angles : performance, accessibilité, bonnes pratiques et SEO. Atteindre 100 partout n'est pas une fin en soi, mais c'est un excellent indicateur de la qualité technique d'un site. Voici comment l'outil calcule ses scores, quelles optimisations comptent vraiment, et comment éviter que le score ne se dégrade après la mise en ligne.
Comprendre ce que mesure Lighthouse
Lighthouse est un outil de laboratoire : il charge la page dans des conditions simulées, par défaut un smartphone de milieu de gamme sur une connexion mobile lente. Il est disponible dans l'onglet Lighthouse des outils de développement de Chrome, sur PageSpeed Insights et en ligne de commande.
C'est différent des données de terrain, mesurées auprès des vrais visiteurs, que Google utilise pour ses Core Web Vitals. Un score de 100 en laboratoire est un très bon signe, mais ce sont les données de terrain qui comptent pour le référencement.
Le calcul du score de performance
Le score de performance est une moyenne pondérée de cinq métriques, selon la documentation de Chrome for Developers :
| Métrique | Poids |
|---|---|
| Total Blocking Time (TBT) | 30 % |
| Largest Contentful Paint (LCP) | 25 % |
| Cumulative Layout Shift (CLS) | 25 % |
| First Contentful Paint (FCP) | 10 % |
| Speed Index | 10 % |
Atteindre 100 en performance
Réduire le JavaScript au strict nécessaire
Chaque script coûte : téléchargement, analyse, exécution. Supprimez les bibliothèques inutilisées, chargez les scripts avec defer, retardez les scripts tiers non essentiels et évitez les frameworks lourds pour des pages qui n'en ont pas besoin.
Soigner l'élément LCP
L'élément LCP est souvent l'image principale ou le titre du premier écran. Pour qu'il s'affiche vite :
- préchargez l'image avec
fetchpriority="high"et ne la chargez jamais en différé (lazy loading) ; - servez-la dans un format moderne, comme le format AVIF ou le WebP, aux dimensions affichées ;
- évitez qu'elle dépende d'un script ou d'une feuille de style chargée tardivement.
Supprimer les ressources bloquantes
Le CSS indispensable à l'affichage du premier écran peut être intégré directement dans la page, le reste étant chargé ensuite. Les polices auto-hébergées et préchargées évitent une connexion vers un domaine tiers.
Viser un CLS de zéro
Indiquez systématiquement les dimensions des images et des vidéos, réservez l'espace des éléments chargés dynamiquement (bannières, encarts) et ajustez les polices de secours pour éviter les décalages au chargement.
Accélérer le serveur
Un temps de réponse serveur lent retarde toutes les autres métriques. Un cache HTTP bien réglé, OPcache pour PHP et un hébergement correctement dimensionné font une grande différence.
Atteindre 100 en accessibilité
Les audits automatiques de Lighthouse vérifient notamment :
- les contrastes de couleurs ;
- les alternatives textuelles des images ;
- les étiquettes des champs de formulaire ;
- les noms accessibles des boutons et des liens ;
- l'ordre logique des titres ;
- la langue déclarée de la page.
Attention : 100 en accessibilité ne signifie pas qu'un site est accessible. Lighthouse ne contrôle qu'une partie des critères ; un véritable audit RGAA, avec tests au clavier et au lecteur d'écran, reste indispensable.
Atteindre 100 en bonnes pratiques
Cette catégorie vérifie entre autres :
- l'utilisation de HTTPS sur toutes les ressources ;
- l'absence d'erreurs dans la console du navigateur ;
- l'absence de bibliothèques JavaScript connues pour leurs failles ;
- des images affichées avec un rapport largeur/hauteur correct et une résolution suffisante ;
- la présence de headers de sécurité, comme la Content Security Policy, signalée dans les audits.
Les erreurs de console viennent souvent d'un script tiers ou d'une ressource introuvable (erreur 404 sur une image ou une police) : elles sont faciles à corriger une fois repérées.
Atteindre 100 en SEO
Les contrôles SEO de Lighthouse sont des fondamentaux techniques :
- une balise
titleet une meta description sur chaque page ; - une page indexable, sans
noindexinvolontaire ni blocage dans le fichier robots.txt ; - des liens avec un texte descriptif (pas de « cliquez ici ») et explorables ;
- un code de réponse HTTP valide ;
- une balise
canonicalcorrecte et un attributlangsur la page.
Ces points sont nécessaires mais pas suffisants : le contenu, sa pertinence et les liens qui pointent vers lui restent déterminants pour le classement. Mon audit SEO technique en 15 points va plus loin.
Tester dans de bonnes conditions
Les scores varient d'un test à l'autre. Pour des résultats fiables :
- testez en navigation privée, sans extensions de navigateur qui injectent leurs propres scripts ;
- lancez plusieurs mesures et retenez la médiane ;
- testez les gabarits importants, pas seulement la page d'accueil : un article, une page de liste, un formulaire ;
- testez la version mobile, plus exigeante que la version ordinateur.
Garder le score dans la durée
Un site qui obtient 100 le jour de sa livraison peut descendre à 70 six mois plus tard : un nouveau script marketing, une vidéo intégrée sans précaution, une image de 3 Mo envoyée depuis l'administration… Pour éviter cela :
- Automatisez les tests : Lighthouse CI s'intègre dans une chaîne d'intégration continue et bloque une mise en ligne qui ferait chuter les scores sous un seuil défini ;
- Optimisez automatiquement les images envoyées par les rédacteurs ;
- Validez chaque ajout de script tiers avec un test avant et après ;
- Surveillez les données de terrain dans la Search Console.
Sur les sites que je réalise, j'associe ces tests à une validation W3C du code HTML, pour garantir un code propre et durable. Si vous voulez savoir où se situe votre site et ce qu'il faudrait corriger pour atteindre 100, je propose un audit de performance détaillé.
