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

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

First Contentful Paint (FCP) mesure le temps entre le début du chargement d'une page et le moment où le navigateur affiche le premier contenu du DOM : du texte, une image, un canvas ou un SVG. C'est le premier instant où un visiteur voit qu'il se passe quelque chose, donc un signal clé de la vitesse de chargement perçue.

FCP est une métrique de Lighthouse et de données de terrain (CrUX). Ce n'est pas un Core Web Vital en soi, mais elle aide à diagnostiquer le Core Web Vital de chargement, Largest Contentful Paint (LCP) : un FCP lent implique presque toujours un LCP lent.

Seuils de FCP

Les données de terrain rapportent le FCP au 75e centile des utilisateurs réels. Une page n'est bonne que si 75% des visites affichent le premier contenu en 1,8s ou moins.

Ce qui influence le temps de FCP

• Time to First Byte (TTFB). Rien ne s'affiche tant que le serveur n'a pas répondu.
• Ressources bloquant le rendu. Le CSS et le JavaScript synchrones dans le head doivent être chargés et analysés avant l'affichage.
• Temps de chargement des ressources. Les gros bundles CSS et les polices bloquantes retardent le premier affichage.
• Rendu côté client. Sur les SPA, le premier affichage attend le bundle JavaScript.

Comment améliorer le FCP

1. Réduisez le TTFB

Utilisez un CDN, mettez les réponses en cache et gardez de faibles temps de réponse de l'origine.

2. Supprimez les ressources bloquant le rendu

Différez le CSS non critique et ajoutez defer ou async aux scripts.

3. Intégrez le CSS critique en ligne

Placez les styles au-dessus de la ligne de flottaison dans une balise <style> dans le head.

4. Faites un preconnect vers les origines requises

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

5. Minifiez et compressez

Minifiez le CSS et le JavaScript et servez-les avec Brotli ou gzip.

6. Évitez le texte bloqué par les polices

Utilisez font-display: swap pour que le texte s'affiche immédiatement avec une police de secours.

FAQ : First Contentful Paint

Qu'est-ce qu'un bon score FCP ?

1,8 seconde ou moins au 75e centile. De 1,8s à 3s, c'est à améliorer, et au-dessus de 3s, c'est médiocre.

FCP est-il un Core Web Vital ?

Non. Les Core Web Vitals sont LCP, INP et CLS. FCP est une métrique de chargement complémentaire.

Quelle est la différence entre FCP et LCP ?

FCP marque le premier contenu de n'importe quelle taille, souvent un logo. LCP marque le plus grand élément, généralement l'image principale.

Testez le FCP depuis des régions réelles avec LoadFocus

LoadFocus exécute des audits Lighthouse depuis plus de 25 régions et affiche les données de terrain d'utilisateurs réels. Inscrivez-vous gratuitement sur loadfocus.com/signup.