Performance Web - Guide pratique
Les 3 métriques essentielles
- LCP (Largest Contentful Paint) : < 2.5s (temps de chargement principal)
- FID (First Input Delay) : < 100ms (réactivité)
- CLS (Cumulative Layout Shift) : < 0.1 (stabilité visuelle)
Outils de mesure et audit
1. Google Lighthouse (Gratuit et intégré)
# Via Chrome DevTools : F12 > Lighthouse
# Ou en CLI
npm install -g lighthouse
lighthouse https://monsite.com
2. Unlighthouse (Version boostée)
Scanne tout votre site automatiquement (lighthouse multiple)
npx unlighthouse --site https://monsite.com
3. Extensions utiles
- Web Vitals : Monitoring en temps réel (Chrome Extension)
- Screaming Frog : Audit SEO technique complet
Optimisations Images
Formats recommandés (par ordre de préférence)
- WebP : -25% à -35% vs JPEG
- AVIF : -50% vs JPEG (support limité)
- JPEG optimisé : Qualité 80-85%
Techniques
<!-- Responsive + formats modernes -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
Outils d'optimisation
- Squoosh.app (Google) - Interface web
- ImageOptim (Mac) / TinyPNG (Web)
- Sharp (Node.js) pour automatiser
Optimisations Code
CSS
/* Minification automatique via build tools */
JavaScript
// Code splitting automatique
// Tree shaking pour virer le code mort
// Minification + compression gzip/brotli
Lazy Loading
<!-- Images -->
<img src="image.jpg" loading="lazy" alt="">
<!-- Scripts -->
<script src="script.js" defer></script>
Stratégies de Cache 💾
Cache Browser
<!-- Cache statique (1 an) -->
<meta http-equiv="Cache-Control" content="max-age=31536000">
Service Worker (Cache programmable)
// Cache-first pour assets statiques
// Network-first pour contenu dynamique
CDN + Edge Caching
- Cloudflare (gratuit de base)
- AWS CloudFront (par exemple)
- Vercel Edge (auto avec Next.js)
Outils accessibilité bonus
- WAVE : Audit accessibilité automatique
- IBM Accessibility Checker : Tests plus poussés
- axe DevTools : Extension Chrome/Firefox
Ressources avancées
- The Ultimate Guide to Web Performance - Vidéo complète
- Web.dev Performance - Google