La première peinture avec contenu (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 de la page.
Lighthouse affiche le FCP en secondes:
Ce que mesure le FCP
Le FCP mesure le temps nécessaire au navigateur pour afficher le premier élément de contenu 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. Tout ce qui se trouve dans une iFrame n'est pas inclus.
Comment Lighthouse détermine-t-il votre score FCP ?
Votre score FCP est une comparaison du temps FCP de votre page et des temps FCP de sites Web réels, en fonction des données de l'archive HTTP. Par exemple, les sites qui se situent au 99e centile affichent le FCP en environ 1,2 seconde. Si le FCP de votre site Web est de 1,2 seconde, votre score FCP est de 99. Consultez Comment les scores de métriques sont déterminés pour découvrir comment les seuils de score Lighthouse sont définis.
Ce tableau vous explique comment interpréter votre score FCP:
| Durée du FCP (en secondes) |
Codes couleur |
|---|---|
| 0 à 1,8 | Vert (rapide) |
| 1.8–3 | Orange (modéré) |
| Plus de 3 | Rouge (lent) |
Améliorer votre score FCP
Le temps de chargement des polices est un problème particulièrement important pour FCP. Consultez l'article S'assurer que le texte reste visible pendant le chargement des polices Web pour découvrir comment accélérer le chargement des polices.
Suivre les conversions après facturation 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 Statistiques de performances axées sur l'utilisateur de Google. La section Suivi des 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 sur les utilisateurs réels, consultez Évaluer les performances réelles de chargement avec les API Navigation Timing et Resource Timing.
Améliorer votre score global de performances
Sauf si vous avez une raison spécifique de vous concentrer sur une métrique particulière, il est généralement préférable de vous concentrer sur l'amélioration de votre score global de performances.
Utilisez la section Diagnostics de votre rapport Lighthouse pour déterminer quelles améliorations seront les plus utiles pour votre page. Plus l'opportunité est importante, plus elle aura d'impact sur votre score de performances. Par exemple, la capture d'écran Lighthouse suivante montre que l'élimination des ressources bloquant le rendu apportera la plus grande amélioration:
Consultez les audits des performances pour découvrir comment exploiter les opportunités identifiées dans votre rapport Lighthouse.