Performance Web

#Performance WebCopier le lien

Mesurez avant d’optimiser. Surveillez LCP (plus grand élément visible), INP (interactivité), CLS (stabilité) et tracez une ligne de base sur des appareils réalistes. Budgétez les octets et le JavaScript: compressez (Brotli), servez des images adaptées (srcset) avec lazy‑loading, extrayez le CSS critique et différez le reste, chargez le JS en defer et éliminez le code mort.

Le chemin de rendu critique doit rester court. Réduisez les ressources bloquantes, préconnectez (preconnect) vers les origines nécessaires et gardez un œil sur les dépendances tierces qui alourdissent la page et dégradent l’INP. Le coût d’hydratation compte autant que le poids initial: un rendu côté serveur sans sur‑hydratation peut améliorer la réactivité perçue.

#Feuille de route (du labo au terrain)Copier le lien

#Animation: cycle critique de renduCopier le lien

#Diagramme: chemin de requêtesCopier le lien

#Mini‑labsCopier le lien

1. Images: servez la même image en AVIF/WebP/JPEG (qualité visuelle comparable) et comparez les tailles. Utilisez srcset/sizes pour adapter à l’écran; vérifiez le gain réel en réseau lent.

2. Fonts: ajoutez font-display: swap puis mesurez l’impact sur LCP; comparez avec optional si la police est non critique.

3. Préconnexion: ajoutez link rel="preconnect" vers votre CDN d’assets et observez l’effet sur la première requête d’asset (réduction du coût TCP/TLS). Ne pas en abuser: gardez‑le pour 1–2 origines critiques.

4. JS: scinde un gros bundle en routes et utilisez defer; mesurez INP avant/après et le coût d’hydratation; supprimez les dépendances inutiles.