📋 Objectifs
- Compresser les images (WebP, TinyPNG)
- Minifier CSS et JS
- Ajouter le lazy loading aux images
- Auditer avec Lighthouse (score ≥ 90)
Check-list optimisation
- ✅ Images en WebP + fallback JPG (taille < 200 Ko)
- ✅ loading="lazy" sur toutes les images
- ✅ CSS minifié (supprimer espaces et commentaires)
- ✅ JS minifié (ou au moins bien organisé)
- ✅ Police Google Fonts chargée avec display=swap
- ✅ Pas de ressources bloquantes
- ✅ Audit Lighthouse : Performance ≥ 90, Accessibilité ≥ 90
Lazy loading natif
<img src="projet.webp" loading="lazy" alt="...">
Une ligne, et l'image ne se charge que quand elle approche du viewport. Énorme gain de performance, surtout pour les galeries.
💡 Avant/Après compression
Photo 2 Mo JPG → 80 Ko WebP. Gain : 96% de poids en moins. Sur 10 images, le site passe de 20 Mo à 800 Ko.