Définition
La performance web mesure la vitesse a laquelle un site se charge, devient visible et interactif pour l'utilisateur. Google utilise les Core Web Vitals comme facteur de classement SEO depuis 2021, rendant la performance un enjeu business direct.
Un site lent = moins de conversions, plus de rebond, moins de trafic organique.
Core Web Vitals (2024+)
Les 3 métriques essentielles mesurees par Google :
LCP (Largest Contentful Paint) — cible : < 2.5s
Le temps pour afficher le plus grand élément visible (image hero, titre principal).
INP (Interaction to Next Paint) — cible : < 200ms
Le délai entre une interaction utilisateur (clic, tap) et la mise à jour visuelle.
CLS (Cumulative Layout Shift) — cible : < 0.1
Les decalages visuels inattendus (images sans dimensions, polices qui changent).
Techniques d'optimisation
Images
<!-- Format moderne + lazy loading + dimensions -->
<img src="photo.webp" alt="Description" width="800" height="600"
loading="lazy" decoding="async" />
<!-- Responsive images -->
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="Description" />
</picture>
JavaScript
- Code splitting : ne charger que le JS nécessaire à la page courante
- Tree shaking : eliminer le code mort au build
- Defer/async : ne pas bloquer le rendu
- Bundle analysis : identifier les gros modules (webpack-bundle-analyzer)
CSS
- Critical CSS : inliner le CSS above-the-fold
- Purge : supprimer le CSS inutilise (PurgeCSS, Tailwind)
- Minification : réduire la taille
Réseau
- CDN : servir les assets au plus près de l'utilisateur
- Compression : Brotli (20% plus compact que Gzip)
- HTTP/2+ : multiplexage des requêtes
- Preload/prefetch : charger les ressources critiques en avance
Fonts
@font-face {
font-family: 'MonFont';
src: url('/fonts/monfont.woff2') format('woff2');
font-display: swap; /* Evite le FOIT */
}
Outils de mesure
| Outil | Type | Usage |
|---|---|---|
| Lighthouse | Lab | Audit complet (Chrome DevTools) |
| PageSpeed Insights | Lab + Field | Données réelles Google |
| WebPageTest | Lab | Analyse detaillee, filmstrip |
| Chrome DevTools | Lab | Network, Performance, Coverage |
| CrUX | Field | Données réelles utilisateurs |
Checklist performance
- Images en WebP/AVIF avec lazy loading
- Compression Brotli activee
- CDN pour les assets statiques
- CSS et JS minifies
- Font-display: swap
- Code splitting (dynamic imports)
- Cache headers optimises (immutable pour les assets hashes)
- Preload des ressources critiques
- Pas de third-party scripts bloquants