First Contentful Paint (FCP) : définition, seuils et corrections

Qu'est-ce que le First Contentful Paint (FCP) ?

Le First Contentful Paint (FCP) est le temps écoulé entre le début de la navigation et le premier affichage de contenu de la page par le navigateur : du texte, une image (y compris en arrière-plan), un SVG ou un canvas non blanc. C'est le premier signe, pour le visiteur, que la page se charge, donc un bon indicateur de la vitesse de chargement perçue.

Le FCP ne fait pas partie des Core Web Vitals, qui sont LCP, INP et CLS. web.dev le range parmi les métriques complémentaires, utiles pour diagnostiquer un Largest Contentful Paint lent : le plus grand élément ne peut pas s'afficher avant le premier contenu.

Seuils du FCP

web.dev recommande d'évaluer le 75e centile des chargements de page, séparément sur mobile et sur ordinateur. Une page est « bonne » quand au moins 75 % des visites affichent leur premier contenu en 1,8 seconde ou moins.

Exemple

Une page produit est conçue comme une application monopage. Le serveur répond vite, mais le HTML est un conteneur vide : le visiteur regarde un écran blanc jusqu'à ce qu'un gros bundle JavaScript soit téléchargé et exécuté. Le FCP attend tout cela. Si l'on rend la structure de la page côté serveur, ou si l'on intègre le CSS critique et diffère le bundle, le premier texte apparaît bien avant la fin du bundle.

Ce qui influence le FCP

• Réponse du serveur. Rien ne s'affiche avant le premier octet : un TTFB lent et les redirections fixent un plancher pour le FCP.
• Ressources bloquant le rendu. Le CSS et le JavaScript synchrone dans le head doivent être chargés avant que le navigateur affiche quoi que ce soit.
• Rendu côté client lourd. Le premier contenu attend que le JavaScript soit téléchargé, analysé et exécuté.
• Polices web qui masquent le texte. Le texte reste invisible tant que la police n'est pas arrivée.
• Charges volumineuses et longues chaînes de requêtes. L'absence de preconnect, un cache faible et un grand nombre de requêtes ajoutent du délai.

Comment mesurer le FCP

Sur le terrain, la Performance API expose le FCP comme une entrée de rendu (paint) :

new PerformanceObserver((list) => {
  for (const entry of list.getEntriesByName('first-contentful-paint')) {
    console.log('FCP:', entry.startTime);
  }
}).observe({ type: 'paint', buffered: true });

En laboratoire, Lighthouse et le panneau Performance de Chrome DevTools le rapportent. Pour les données de terrain, PageSpeed Insights affiche les valeurs du Chrome UX Report, ou vous pouvez les collecter vous-même avec la bibliothèque web-vitals. Les valeurs de laboratoire et de terrain diffèrent souvent, car les tests en laboratoire utilisent un appareil et un réseau fixes.

Comment améliorer le FCP

1. Réduire le temps de réponse du serveur avec du cache et un CDN, et supprimer les redirections.
2. Différer le CSS non critique et ajouter defer ou async aux scripts inutiles au premier affichage.
3. Intégrer en ligne le CSS critique de la partie visible.
4. Faire un preconnect vers les origines nécessaires tôt, comme ci-dessous.
5. Minifier et compresser le CSS et le JavaScript.
6. Utiliser font-display: swap pour que le texte s'affiche avec une police de secours pendant le chargement de la police web.

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Erreurs fréquentes

• Faire du FCP l'objectif. Un petit logo s'affiche tôt alors que l'image principale met des secondes. Vérifiez aussi le LCP.
• Tester seulement sur un ordinateur rapide. Évaluez mobile et ordinateur séparément, comme le recommande web.dev.
• Comparer directement laboratoire et terrain. Un bon score Lighthouse ne garantit pas de bonnes données de terrain.
• Ignorer ce qui précède le rendu. Redirections, établissement de la connexion et TTFB comptent tous dans le FCP.

Questions fréquentes : First Contentful Paint

Quel est un bon FCP ?

1,8 seconde ou moins au 75e centile des chargements de page. Entre 1,8 et 3,0 secondes, c'est à améliorer ; au-delà de 3,0 secondes, c'est mauvais.

Le FCP est-il un Core Web Vital ?

Non. Les Core Web Vitals sont LCP, INP et CLS. Le FCP est une métrique complémentaire qui aide à diagnostiquer un chargement lent.

Quelle différence entre FCP et LCP ?

Le FCP marque le premier contenu, quelle que soit sa taille, souvent du texte ou un logo. Le LCP marque le moment où le plus grand élément visible, souvent une image principale ou un titre, est affiché.

Pourquoi mon FCP est-il lent ?

Les causes habituelles : réponse lente du serveur, redirections, CSS ou JavaScript bloquant le rendu, rendu côté client et polices web qui masquent le texte. PageSpeed Insights ou un rapport Lighthouse montre laquelle domine.

Le FCP peut-il être rapide alors que la page paraît lente ?

Oui. Le FCP indique seulement que quelque chose est apparu. Un LCP lent, un délai de réaction ou des décalages de mise en page peuvent encore donner une impression de lenteur ; on lit donc le FCP avec les Core Web Vitals.

Suivre le FCP dans le temps avec LoadFocus

Utilisez le vérificateur gratuit de Core Web Vitals pour un aperçu rapide, ou la surveillance de la vitesse des pages pour suivre vos pages avec Lighthouse depuis plusieurs emplacements cloud et être alerté quand elles ralentissent. Le guide sur la surveillance des Core Web Vitals avec alertes et rapports détaille la mise en place. Inscrivez-vous gratuitement pour commencer.