Comment j'ai atteint 100/100 sur Lighthouse (et pourquoi ça compte)

Un score Lighthouse de 100/100 n’est pas juste vanité. C’est corrélé directement avec l’engagement utilisateur, le SEO et les conversions.

Pourquoi viser 100 ?

Sur un projet e-commerce, passer de 75 à 95 sur mobile a augmenté le taux de conversion de 23%. Chaque point compte.

Google utilise les Core Web Vitals comme facteur de ranking. Un site lent = moins visible.

Performance : Les quick wins

1. Lazy loading intelligent

<!-- Images au-dessus de la fold : eager -->
<img src="hero.jpg" loading="eager" fetchpriority="high">

<!-- Images en dessous : lazy -->
<img src="footer.jpg" loading="lazy">

2. Font loading optimisé

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* Évite le FOIT */
}

3. Critical CSS inline

Inlinez le CSS critique pour le above-the-fold. Le reste en async :

<style>
  /* Critical CSS ici */
</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

4. Code splitting agressif

Divisez votre bundle. Visez <50KB initial :

// Route-based splitting
const Dashboard = lazy(() => import('./Dashboard'));
const Profile = lazy(() => import('./Profile'));

// Component-based splitting
const Chart = lazy(() => import('./Chart'));

Accessibilité : Les fondamentaux

1. Contraste des couleurs

Utilisez un outil comme Contrast Checker. Minimum 4.5:1 pour le texte normal.

2. Labels explicites

<!-- ❌ Mauvais -->
<input type="text" placeholder="Email">

<!-- ✅ Bon -->
<label for="email">Email</label>
<input type="text" id="email" name="email" aria-label="Email">

3. Navigation au clavier

Testez tout sans souris. Tab, Enter, Escape doivent suffire.

4. ARIA quand nécessaire

<button aria-label="Close modal" aria-expanded="true">
  <svg>...</svg>
</button>

Best Practices

1. HTTPS partout

Non négociable en 2024. Let’s Encrypt est gratuit.

2. Pas d’erreurs console

Chaque console.error fait perdre des points. Loggez proprement :

if (process.env.NODE_ENV === 'development') {
  console.log('Debug info');
}

3. Aspect ratio sur les images

Évitez le layout shift :

<img src="image.jpg" width="800" height="600" alt="Description">

4. CDN et cache

# Nginx config
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

SEO

1. Meta tags complets

<title>Page Title - 50-60 caractères</title>
<meta name="description" content="150-160 caractères qui donnent envie de cliquer">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://example.com/page">

2. Structured data

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Titre de l'article",
  "author": { "@type": "Person", "name": "Issam" }
}
</script>

3. Sitemap et robots.txt

Basique mais essentiel.

Les pièges qui font échouer

1. Third-party scripts

Google Analytics, chat widgets, ads… Chacun peut ruiner votre score. Chargez-les en async/defer :

<script async src="analytics.js"></script>

2. Images non optimisées

WebP ou AVIF. Compressez avec ImageOptim ou Squoosh.

3. JavaScript non utilisé

Webpack Bundle Analyzer vous montrera l’ampleur du problème. Nettoyez impitoyablement.

4. Animations coûteuses

Préférez transform et opacity (GPU) à top/left (CPU) :

/* ❌ Layout thrashing */
.box { transition: left 0.3s; }

/* ✅ Smooth */
.box { transition: transform 0.3s; }

Les outils indispensables

1. Lighthouse CI : Automatisez les tests
2. WebPageTest : Tests depuis plusieurs localisations
3. Chrome DevTools Coverage : Identifiez le code mort
4. Bundle Analyzer : Visualisez vos dépendances

Conclusion

Atteindre 100/100 demande du travail, mais c’est faisable. Sur mes projets récents :

• Temps de chargement : 1.2s → 0.4s
• Bounce rate : -35%
• Conversion : +23%

Les utilisateurs ne verront jamais votre score Lighthouse. Mais ils sentiront la différence.

Temps de lecture : 8 minutes