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 de la page.
Lighthouse affiche la FMP en secondes:
Données mesurées par la FMP
FMP mesure quand le contenu principal d'une page est visible par l'utilisateur. Le score brut de la FMP correspond au temps, en secondes, écoulé entre le début du chargement de la page par l'utilisateur et l'affichage du contenu principal au-dessus de la ligne de flottaison. Le FMP indique essentiellement le moment de la peinture après lequel le plus grand changement de 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 Time to First Meaningful Paint: an approach based on layout (Temps de chargement de la première peinture significative : une approche basée sur la mise en page) de Google.
Le First Contentful Paint (FCP) et le FMP sont souvent identiques lorsque le premier élément de 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, du contenu se trouve au-dessus de la ligne de flottaison dans un iFrame. FMP s'enregistre lorsque le contenu de l'iFrame est visible par l'utilisateur, tandis que FCP n'inclut pas le contenu de l'iFrame.
Comment Lighthouse détermine-t-il votre score FMP ?
Tout comme FCP, FMP est basé sur des données réelles sur les performances des sites Web de l'Archive HTTP.
Lorsque les valeurs de FMP et de FCP sont identiques, leurs scores le sont aussi. Si le FMP se produit après le FCP (par exemple, lorsqu'une page contient du contenu en iframe), le score FMP est inférieur au score FCP.
Par exemple, supposons que votre FCP soit de 1,5 seconde et votre FMP de 3 secondes. Le score FCP est de 99, mais le score FMP est de 75.
Ce tableau vous explique comment interpréter votre score FMP:
| Métrique FMP (en secondes) |
Codes couleur | Score FMP (FCP HTTP Archive percentile) |
|---|---|---|
| 0 à 2 | Vert (rapide) | 75 à 100 |
| 2–4 | Orange (modéré) | 50 à 74 ans |
| Plus de 4 | Rouge (lent) | De 0 à 49 |
Améliorer votre score FMP
Découvrez comment améliorer la métrique Largest Contentful Paint sur votre site. Les stratégies d'amélioration de la FMP sont en grande partie les mêmes que celles d'amélioration de la plus grande peinture de contenu.
Suivre la durée de visionnage avant abandon sur les appareils d'utilisateurs réels
Pour savoir comment mesurer le moment où le FMP 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 des FMP à l'aide d'éléments héros 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. L'audit Lighthouse sur les repères et mesures de la durée utilisateur vous permet d'afficher les données de durée utilisateur dans votre rapport.
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.