First Contentful Paint (FCP) est l'une des six métriques suivies dans la section Performances du rapport Lighthouse. Chaque métrique capture un aspect de la vitesse de chargement des pages.
Lighthouse affiche le FCP en quelques secondes:
Ce que le FCP mesure
Le FCP mesure le temps nécessaire au navigateur pour afficher le premier contenu du DOM après qu'un utilisateur a accédé à votre page.
Les images, les éléments <canvas> non blancs et les SVG de votre page sont considérés comme du contenu DOM. Aucun élément situé à l'intérieur d'un iFrame n'est inclus.
Comment Lighthouse détermine votre score FCP
Votre score FCP est une comparaison de l'heure FCP de votre page et des heures FCP pour des sites Web réels, en fonction des données de l'archive HTTP. Par exemple, les sites situés dans le 99e centile affichent le FCP en 1,2 seconde environ. Si le FCP de votre site Web est de 1,2 seconde, votre score FCP est de 99. Consultez Comment les scores des métriques sont-ils déterminés pour savoir comment les seuils de score Lighthouse sont définis.
Ce tableau montre comment interpréter votre score FCP:
| Durée FCP (en secondes) |
Code couleur |
|---|---|
| 0 à 1,8 | Vert (rapide) |
| 1,8-3 | Orange (modéré) |
| Plus de 3 | Rouge (lent) |
Comment améliorer votre score FCP
Un problème particulièrement important pour FCP est le temps de chargement de la police. Consultez l'article S'assurer que le texte reste visible pendant le chargement de la police Web pour découvrir comment accélérer le chargement de la police.
Suivi du FCP sur les appareils d'utilisateurs réels
Pour savoir comment mesurer le moment où le FCP se produit réellement sur les appareils de vos utilisateurs, consultez la page Métriques de performances axées sur l'utilisateur de Google. La section Suivi FP/FCP explique comment accéder de manière programmatique aux données FCP et les envoyer à Google Analytics.
Pour en savoir plus sur la collecte de métriques d'utilisateurs réels, consultez l'article Évaluer les performances de chargement dans la vie réelle avec la navigation et le temps de ressource de Google.
Améliorer votre score global de performances
À moins que vous n'ayez une raison spécifique de vous concentrer sur une métrique en particulier, il est généralement préférable de vous concentrer sur l'amélioration de votre score de performances global.
Utilisez la section Opportunités de votre rapport Lighthouse pour déterminer les améliorations qui seront les plus intéressantes pour votre page. Plus l'opportunité est importante, plus l'impact sur votre score de performances est important. Par exemple, la capture d'écran ci-dessous de Lighthouse montre que l'élimination des ressources qui bloquent l'affichage permettra d'obtenir la plus grande amélioration:
Consultez la page de destination des audits de performances pour savoir comment saisir les opportunités identifiées dans votre rapport Lighthouse.