FCP (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.

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.

ㅤ