Performance Web
Qu’est-ce que FCP (First Contentful Paint) ?
Moment où le premier contenu texte ou image est peint à l’écran après navigation — première étape lisible du chargement perçu, avant le bloc principal (LCP) et la stabilité de mise en page (CLS).
Définition simple
C'est comme la première phrase affichée sur un tableau d’affichage : ce n’est pas encore toute l’annonce, mais le passant sait que quelque chose arrive. Le FCP se situe après le [TTFB](/lexique/ttfb-time-to-first-byte) et les premiers octets HTML/CSS ; il précède souvent le [LCP](/lexique/lcp-largest-contentful-paint) (élément principal visible). Il complète la lecture des [Core Web Vitals](/lexique/core-web-vitals) avec INP et CLS pour une vision complète — même si le signal Google « vitales » met surtout LCP/INP/CLS en avant pour le classement.
Comment ça marche ?
Navigateur parse HTML ; applique CSS bloquant ; affiche premier texte/image ; JS différé diminue blocage. Optimisations : inline critique léger, préchargement fonts, réduction bundles, [SSR](/lexique/ssr-server-side-rendering)/[SSG](/lexique/ssg-static-site-generation) pour HTML utile tôt.
Impact business
Un FCP tardif renforce impression « page vide » même si le site finit par charger — les utilisateurs mobiles abandonnent souvent avant LCP si rien n’apparaît plusieurs secondes ; améliorer FCP via HTML critique, fonts et moins de JS bloquant récupère une partie du chemin vers bonnes métriques globales.
Bonnes pratiques
- Mesurer trace Lighthouse ; distinguer FCP vs LCP ; réduire chaîne critique ; tester devices bas de gamme.
Erreurs communes
- Optimiser hero image (LCP) en ignorant que aucun texte n’apparaît avant (FCP mauvais). Fonts web bloquantes sans `font-display`.
Prompt IA
Contexte : landing [FCP 2,4 s mobile]. Liste trois actions prioritaires (fonts, CSS critique, JS) avec impact attendu qualitatif sur FCP vs LCP.
SERVICE LIÉ
Passer de la définition à un projet concret.
Création de site internet
Approfondir ce sujet dans le cadre d’un accompagnement adapté à votre contexte.
À LIRE AUSSI
Guides plus complets sur le blog.
QUESTIONS FRÉQUENTES
Aller plus loin sur FCP (First Contentful Paint).
Les rapports Lighthouse/PageSpeed continuent d’afficher FCP utile diagnostic même si les trois vitales officielles sont LCP, INP, CLS — à lire ensemble.
FP peut être une couleur de fond sans contenu ; FCP exige du contenu utile — préférer FCP comme signal utilisateur.
Coquille vide prolonge FCP si tout est client ; SSR/SSG ou streaming HTML améliore premiers affichages.