Comprendre et mesurer le FCP (First Contentful Paint)
Comprenez le First Contentful Paint, ses seuils et les outils pour le mesurer, afin d'offrir une page qui s'affiche vite et rassure vos visiteurs.
Le First Contentful Paint (FCP) mesure le temps écoulé entre l’instant où l’utilisateur arrive sur la page et le moment où le premier contenu s’affiche à l’écran. Ce contenu peut être du texte, une image (y compris une image de fond), un élément SVG ou un canvas non blanc. C’est le premier repère visuel qui indique au visiteur qu’il se passe quelque chose, ce qui le rassure et l’encourage à patienter.
Pour le SEO, le FCP est précieux : une page qui affiche rapidement son premier contenu donne une impression de rapidité, réduit le taux de rebond et améliore la perception de qualité. Le FCP est aussi une métrique de diagnostic utile, car il précède le Largest Contentful Paint (LCP) et aide à comprendre où le chargement perd du temps.
Le FCP est un signal de diagnostic que je garde toujours à portée de main, même s’il ne fait pas partie des Core Web Vitals. Quand le LCP est mauvais, c’est souvent le FCP qui me dit si le problème vient du serveur ou de l’affichage du contenu principal. Ne le négligez pas : il oriente la suite de l’enquête et vous évite de chercher au mauvais endroit.
Ce que le FCP prend en compte
Il est important de noter que le FCP inclut tout ce qui précède le premier rendu : le déchargement de la page précédente, la configuration de la connexion, les éventuelles redirections et le délai avant le premier octet (TTFB). Ce dernier, le délai avant le premier octet (TTFB), peut peser lourd lorsqu’il est mesuré sur le terrain, ce qui explique en partie les écarts observés entre les données de laboratoire et les données réelles.
Il faut aussi distinguer le FCP, qui marque le premier contenu affiché, du LCP, qui vise à mesurer le moment où le contenu principal de la page est rendu. Une page peut afficher très tôt un premier élément, mais mettre bien plus longtemps à présenter son contenu le plus important.
Les seuils du FCP selon Google
Pour offrir une expérience de qualité, Google recommande de viser un FCP de 1,8 seconde ou moins. Afin que cet objectif soit tenu pour la majorité des visiteurs, mesurez le 75e centile des chargements de page, en distinguant les sessions sur mobile et sur ordinateur.
| Évaluation | Valeur du FCP | Signification |
|---|---|---|
Bon |
1,8 seconde ou moins |
Affichage rapide du premier contenu, expérience fluide |
À améliorer |
Entre 1,8 et 3 secondes |
Affichage perfectible, marges d’optimisation |
Médiocre |
Plus de 3 secondes |
Attente trop longue avant le premier rendu |
Avec quels outils mesurer le FCP
Le FCP se mesure aussi bien sur le terrain (données d’utilisateurs réels) qu’en laboratoire (environnement contrôlé). Les deux approches sont complémentaires : le terrain reflète l’expérience vécue, le laboratoire facilite le diagnostic et la reproduction des problèmes, comme pour les autres Core Web Vitals.
| Outil | Type de mesure | Usage |
|---|---|---|
PageSpeed Insights |
Terrain et laboratoire |
Vue d’ensemble rapide à partir d’une URL |
Rapport sur l’expérience utilisateur Chrome (CrUX) |
Terrain |
Données réelles agrégées |
Search Console (rapport sur la vitesse) |
Terrain |
Suivi à l’échelle du site |
Lighthouse |
Laboratoire |
Audit détaillé et pistes d’amélioration |
Outils pour développeurs Chrome |
Laboratoire |
Analyse fine du chargement |
Bibliothèque JavaScript web-vitals |
Terrain |
Mesure dans le code, sur vos utilisateurs |
Mesurer le FCP en JavaScript
Pour mesurer le FCP dans le navigateur, vous pouvez vous appuyer sur l’API Paint Timing en créant un PerformanceObserver qui écoute l’entrée first-contentful-paint. Attention toutefois : cette entrée brute ne couvre pas tous les cas (onglets en arrière-plan, restauration depuis le cache, pages préaffichées). En pratique, la bibliothèque web-vitals gère ces subtilités à votre place et reste la solution la plus fiable.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});Un FCP moyen flatteur peut masquer une part importante d’utilisateurs en zone médiocre. Mesurez toujours le 75e centile des chargements, en séparant mobile et ordinateur, pour refléter l’expérience réelle de vos visiteurs et éviter les fausses bonnes nouvelles.
À faire
- viser 1,8 seconde ou moins
- segmenter mobile et ordinateur
- utiliser la bibliothèque web-vitals pour des mesures fiables
- croiser FCP et TTFB pour localiser les ralentissements
À éviter
- se fier à une moyenne
- ignorer les ressources qui bloquent l’affichage
- confondre FCP et LCP
- tester uniquement en laboratoire sans données de terrain
Points clés à retenir
- Visez un FCP de 1,8 seconde ou moins au 75e centile
- Distinguez les mesures mobile et ordinateur
- Combinez outils de terrain et de laboratoire
- Réduisez les ressources bloquant l'affichage et le TTFB
- Préférez la bibliothèque web-vitals pour mesurer dans le code
Le FCP marque l’apparition du premier contenu et conditionne la perception de rapidité.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Que mesure exactement le First Contentful Paint (FCP) ?
- Le temps écoulé jusqu'à l'affichage du premier contenu, texte, image, SVG ou canvas non blanc
- Le temps jusqu'à l'affichage du plus grand élément visible de la page
- Le temps jusqu'à la première interaction de l'utilisateur
Le FCP marque l’apparition du premier contenu à l’écran : texte, image (y compris de fond), élément SVG ou canvas non blanc. Le LCP, lui, vise le plus grand élément visible.
-
Quel seuil Google recommande-t-il pour le FCP ?
- 0,8 seconde ou moins, sur l'ensemble des visites
- 2,5 secondes ou moins, mesuré en moyenne
- 1,8 seconde ou moins, mesuré au 75e centile, en distinguant mobile et ordinateur
Google recommande un FCP de 1,8 seconde ou moins. Pour que l’objectif tienne pour la majorité, on mesure le 75e centile des chargements en séparant mobile et ordinateur.
-
Le FCP est-il une métrique Core Web Vitals ?
- Oui, c'est l'une des trois métriques Core Web Vitals
- Non, mais c'est un excellent indicateur de la vitesse perçue
- Oui, il a remplacé le LCP dans les Core Web Vitals
Le FCP ne fait pas partie des Core Web Vitals, mais il reste un bon indicateur de la perception de rapidité, car il marque l’apparition du premier contenu.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Votre page met trop de temps à afficher son premier contenu ? Identifions ensemble les freins qui pèsent sur votre FCP.