Performance web : Core Web Vitals et leviers concrets

Les trois métriques

Les Core Web Vitals mesurent l'expérience réelle de l'utilisateur :

Métrique	Mesure	Objectif
LCP (Largest Contentful Paint)	Temps d'affichage du plus gros élément visible	≤ 2,5 s
INP (Interaction to Next Paint)	Réactivité aux interactions	≤ 200 ms
CLS (Cumulative Layout Shift)	Stabilité visuelle	≤ 0,1

Améliorer le LCP

Prérendre les pages : un HTML statique servi depuis un cache est le plus rapide possible.
Limiter le JavaScript bloquant le premier rendu.
Charger les images sous la ligne de flottaison en loading="lazy".

Améliorer l'INP

L'INP souffre quand le fil principal est occupé. Le levier principal est donc moins de JavaScript :

garder le rendu lourd (Markdown, coloration de code) côté serveur ;
charger les bibliothèques volumineuses à la demande.

Mermaid pèse environ 350 Ko. Il est chargé par import("mermaid") uniquement sur les pages qui contiennent un diagramme, jamais au chargement initial.

Améliorer le CLS

Le décalage vient souvent des polices et des images sans dimensions.

Polices auto-hébergées avec font-display: swap et un fallback ajusté en métriques : le texte ne saute pas quand la police arrive.
Fixer width et height (ou un aspect-ratio) sur les images.
Réserver la place des éléments chargés tardivement.

Auto-héberger les polices évite aussi une connexion vers un domaine tiers.

Mesurer avant d'optimiser

bash

npm run build   # la table des routes montre ○ / ◐ / ƒ

Pour la mesure réelle : Lighthouse en laboratoire, et les données de terrain (CrUX, outils de RUM) pour ce que vivent vraiment vos visiteurs.

Un budget de performance

Fixez-vous des limites et surveillez-les :

JavaScript initial : un plafond en Ko compressés ;
aucune route de contenu qui quitte le statut ○ ;
aucune nouvelle dépendance cliente sans justification.

À retenir

Le JavaScript le moins coûteux est celui qu'on n'envoie pas.
Charger à la demande ce qui n'est pas toujours utile.
Mesurer, optimiser, re-mesurer.