Definition
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 metriques essentielles mesurees par Google :
LCP (Largest Contentful Paint) — cible : < 2.5s
Le temps pour afficher le plus grand element visible (image hero, titre principal).
INP (Interaction to Next Paint) — cible : < 200ms
Le delai entre une interaction utilisateur (clic, tap) et la mise a 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 necessaire a 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 : reduire la taille
Reseau
- CDN : servir les assets au plus pres de l'utilisateur
- Compression : Brotli (20% plus compact que Gzip)
- HTTP/2+ : multiplexage des requetes
- 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 | Donnees reelles Google |
| WebPageTest | Lab | Analyse detaillee, filmstrip |
| Chrome DevTools | Lab | Network, Performance, Coverage |
| CrUX | Field | Donnees reelles 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