Comment atteindre un score Lighthouse de 100/100 en 2025

Atteindre un score parfait sur Lighthouse n'est plus un luxe, c'est une nécessité. Google utilise les Core Web Vitals comme facteurs de classement, et vos utilisateurs attendent des sites ultra-rapides.

Les métriques clés à optimiser

• LCP (Largest Contentful Paint) : Doit être inférieur à 2.5 secondes
• FID (First Input Delay) : Doit être inférieur à 100 millisecondes
• CLS (Cumulative Layout Shift) : Doit être inférieur à 0.1

1. Optimisation des images

Les images représentent souvent 60-70% du poids total d'une page. Voici comment les optimiser :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy" decoding="async">
</picture>

2. Stratégie de cache avancée

Utilisez les Service Workers pour un contrôle total sur votre stratégie de cache :

// Service Worker avec stratégie Cache First
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});