Le First Meaningful Paint (FMP) 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 la FMP en secondes :
Ce que mesure FMP
Le FMP mesure quand le contenu principal d'une page est visible par l'utilisateur. Le score brut du FMP correspond au temps en secondes entre le moment où l'utilisateur lance le chargement de la page et le moment où la page affiche le contenu principal au-dessus de la ligne de flottaison. Le FMP indique essentiellement le moment où la plus grande modification de la mise en page au-dessus de la ligne de flottaison se produit. Pour en savoir plus sur les détails techniques de la FMP, consultez l'article Google Time to First Meaningful Paint: a layout-based approach.
Le First Contentful Paint (FCP) et le FMP sont souvent identiques lorsque le premier contenu affiché sur la page inclut le contenu au-dessus de la ligne de flottaison. Toutefois, ces métriques peuvent différer lorsque, par exemple, un iFrame contient du contenu au-dessus de la ligne de flottaison. Le FMP est enregistré lorsque le contenu de l'iFrame est visible par l'utilisateur, tandis que le FCP n'inclut pas le contenu de l'iFrame.
Comment Lighthouse détermine votre score FMP
Comme le FCP, le FMP est basé sur des données réelles sur les performances des sites Web provenant de HTTP Archive.
Lorsque le FMP et le FCP sont identiques, leurs scores le sont également. Si le FMP se produit après le FCP (par exemple, lorsqu'une page contient du contenu iframe), le score FMP sera inférieur au score FCP.
Par exemple, supposons que votre FCP est de 1,5 seconde et votre FMP de 3 secondes. Le score FCP serait de 99, mais le score FMP serait de 75.
Le tableau suivant explique comment interpréter votre score FMP :
| Métrique FMP (en secondes) |
Codes couleur | Score FMP (pourcentage FCP HTTP Archive) |
|---|---|---|
| 0–2 | Vert (rapide) | 75–100 |
| 2–4 | Orange (modéré) | 50–74 |
| Plus de 4 | Rouge (lent) | De 0 à 49 |
Améliorer votre score FMP
Consultez Améliorer le Largest Contentful Paint sur votre site. Les stratégies d'amélioration du FMP sont en grande partie les mêmes que celles permettant d'améliorer le Largest Contentful Paint.
Suivre le FMP sur les appareils des utilisateurs réels
Pour savoir comment mesurer le FMP sur les appareils de vos utilisateurs, consultez la page Google sur les métriques de performances axées sur l'utilisateur. La section Suivre le FMP à l'aide d'éléments héros décrit comment accéder aux données FCP de manière programmatique et les envoyer à Google Analytics.
Pour en savoir plus sur la collecte de métriques utilisateur réelles, consultez Évaluer les performances réelles de chargement avec les API Navigation Timing et Resource Timing de Google. L'audit Lighthouse "Marques et mesures User-Timing" vous permet d'afficher les données User-Timing dans votre rapport.
Améliorer votre score de performances global
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 de performances global.
Utilisez la section Diagnostics de votre rapport Lighthouse pour déterminer les améliorations les plus intéressantes pour votre page. Plus l'opportunité est importante, plus elle aura d'effet sur votre score de performances. Par exemple, la capture d'écran Lighthouse suivante montre que l'élimination des ressources bloquant le rendu permettra d'obtenir la plus grande amélioration :
Consultez les audits de performances pour savoir comment saisir les opportunités identifiées dans votre rapport Lighthouse.