FCP (First Contentful Paint)

Definition

Moment où le navigateur affiche le premier contenu visible (texte, image, SVG). Indique quand l'utilisateur perçoit que la page commence à charger.

Analogie

Le moment où la première image apparaît quand on allume une vieille télévision à tube.

Exemple de code

// Performance Observer for FCP
new PerformanceObserver((entries) => {
  const fcp = entries.getEntriesByName('first-contentful-paint')[0];
  console.log(`FCP: ${fcp.startTime}ms`); // Target: < 1.8s
}).observe({ type: 'paint', buffered: true });

Cas d'usage

Mesurer le temps de perception initial et identifier les blocages de rendu (CSS/JS bloquants).

Termes lies