First Contentful Paint (FCP)

metriques intermediaire

Définition

Metrique mesurant le temps entre le debut de navigation et le premier affichage de contenu visible (texte, image ou SVG).

Le First Contentful Paint (FCP) mesure le temps ecoule entre le moment ou un utilisateur accede a une page et le moment ou le premier element de contenu est rendu visible a l'ecran. Ce contenu peut etre du texte, une image, un canvas ou un SVG. Le FCP est un indicateur important de la vitesse percue par l'utilisateur car il marque le premier signe que la page commence a se charger. Google recommande un FCP inferieur a 1,8 seconde. Un FCP lent est souvent cause par des polices de caracteres bloquantes, un CSS non optimise, un TTFB eleve ou des redirections multiples. Le FCP est distinct du LCP : le FCP marque le debut de l'affichage, le LCP marque l'affichage de l'element principal.

FCP Premier affichage de contenu First Contentful Paint Lighthouse

Points clés à retenir

  • Premier signe visible de chargement de la page pour l'utilisateur
  • Seuil recommande : inferieur a 1,8 seconde (bon), superieur a 3 secondes (mauvais)
  • Different du LCP : FCP = premier contenu affiche, LCP = plus grand element affiche

Exemples concrets

Police bloquante

Un site utilisant Google Fonts sans font-display:swap affiche un FCP de 3,2s a cause de l'attente du telechargement de la police. L'ajout de font-display:swap reduit le FCP a 1,1s.

Impact des redirections

Une chaine de 3 redirections (HTTP > HTTPS > www > /fr/) ajoute 1,5s au FCP. La reduction a une seule redirection ameliore le FCP de 4,1s a 2,6s.

Questions fréquentes

Le FCP mesure l'apparition du premier contenu visible (souvent un texte ou une icone), tandis que le LCP mesure l'apparition du plus grand element visible (souvent une image hero ou un bloc de texte principal). Le FCP arrive toujours avant ou en meme temps que le LCP.

Optimisez le TTFB du serveur, eliminez les CSS et JavaScript bloquants, utilisez font-display:swap pour les polices, preloadez les ressources critiques et reduisez les redirections inutiles.

Termes liés

Aller plus loin avec LemmiLink

Découvrez comment LemmiLink peut vous aider à mettre en pratique ces concepts SEO.

Dernière mise à jour : 2026-02-07