Apprendre
First Contentful Paint : comprendre le FCP et l’améliorer
Le FCP indique quand l’utilisateur voit le premier vrai contenu. Ce guide explique ce qui le ralentit et les corrections prioritaires.
Lancez un audit DomainLens frais et utilisez le rapport comme liste de priorités.
Ce que mesure le FCP
First Contentful Paint (FCP) marque le moment où le navigateur rend le premier vrai contenu de la page : texte, image, SVG ou canvas. Ce n’est ni le chargement complet, ni l’élément hero principal, mais cela indique combien de temps l’utilisateur regarde un écran vide.
Un FCP rapide donne confiance dans le fonctionnement de la page. Un FCP lent donne une impression de site cassé, même si le reste finit par charger. Il mérite donc sa place dans un audit performance, même si les Core Web Vitals se concentrent surtout sur LCP, INP et CLS.
Ce qui ralentit souvent le FCP
- Une réponse serveur lente avant que le navigateur reçoive le premier HTML.
- Du CSS bloquant le rendu, à télécharger et parser avant tout affichage.
- Du JavaScript synchrone dans le head qui bloque le parsing.
- Des polices web qui retardent le texte visible ou le rendent invisible pendant le chargement.
- Un HTML lourd, des tag managers ou scripts tiers chargés avant le contenu critique.
Comment améliorer le FCP
Commencez au début de la requête. Améliorez le TTFB avec du cache, une origine plus rapide, moins de requêtes base de données et un CDN pour les assets statiques. Le navigateur ne peut pas peindre un contenu qu’il n’a pas reçu.
Réduisez ensuite le travail qui bloque le rendu. Inlinez le minimum de CSS critique utile, chargez le reste de façon asynchrone quand c’est sûr, différez le JavaScript non critique et simplifiez le HTML above the fold. Pour les polices, préchargez le fichier principal et utilisez font-display: swap.
Erreurs à éviter
- Optimiser seulement les images alors que CSS et JavaScript bloquent toujours le premier affichage.
- Charger analytics, chat et publicités avant le rendu de la page.
- Utiliser des polices personnalisées sans preload ni fallback visible.
- Mesurer uniquement desktop, où un premier affichage lent se cache plus facilement.
- Confondre FCP et LCP et corriger l’image hero alors que le délai d’écran vide reste présent.
Comment valider la correction
Lancez Lighthouse ou PageSpeed Insights avant et après, puis comparez FCP, TTFB, ressources bloquantes et travail du main thread. Une vraie correction FCP fait apparaître le premier texte ou la structure visuelle plus tôt, pas seulement un meilleur score.
Après déploiement, relancez l’audit DomainLens et regardez d’abord le mobile. Si les données terrain existent, vérifiez que les utilisateurs sur appareils et réseaux plus lents voient aussi un rendu initial plus rapide.