Devsource

FCP : définition et optimisation du First Contentful Paint

Le FCP est une métrique de performance qui marque la première étape de la perception visuelle du chargement pour l’utilisateur.

Définition

Le First Contentful Paint (FCP) mesure le temps écoulé entre le début de la navigation et le moment où le navigateur affiche le premier élément de contenu du DOM (texte, image, logo ou élément <canvas>). Un bon score FCP doit être inférieur à 1,8 seconde pour garantir une expérience fluide.

→ Prendre RDV pour votre projet maintenant

Bonnes pratiques

  • Implémenter progressivement : Optimiser d’abord les polices de caractères (avec font-display: swap) et minifier le CSS critique pour accélérer l’apparition des premiers textes.
  • Mesurer avant/après : Utiliser Lighthouse ou PageSpeed Insights pour identifier les ressources qui bloquent le rendu initial.
  • Documenter les changements : Suivre l’impact de la mise en cache serveur ou de l’utilisation d’un CDN sur la réduction du TTFB, qui influence directement le FCP.

À éviter

  • Modifications non mesurées : Ajouter des scripts tiers (analytics, chat) de manière synchrone, ce qui retarde l’affichage du contenu principal.
  • Raccourcis techniques risqués : Surcharger le <head> avec trop de directives de préchargement non prioritaires, créant un goulot d’étranglement réseau.
  • Ignorer l’intention utilisateur : Afficher une page blanche trop longtemps, ce qui augmente considérablement le taux de rebond, même si le reste de la page charge vite.

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

Le FCP est une métrique de performance qui mesure le temps nécessaire avant l’affichage du premier élément visible d’une page web.

Il permet d’évaluer la rapidité avec laquelle un utilisateur perçoit qu’une page commence à se charger.

Le FCP est déclenché dès l’apparition d’un contenu visible, comme un texte, une image ou un élément graphique.

Un FCP rapide donne une impression de réactivité et améliore la perception de performance du site.

Il est recommandé d’optimiser les ressources critiques, de réduire les blocages de rendu et d’accélérer la réponse du serveur.

Le FCP mesure l’affichage du premier contenu visible, tandis que le LCP mesure le temps nécessaire pour afficher l’élément principal de la page.

Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K