La métrique "Largest Contentful Paint" (LCP) fait partie de celles 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 LCP en secondes:
Ce que mesure le LCP
Le LCP mesure le moment où le plus grand élément de contenu de la fenêtre d'affichage est affiché à l'écran. Il s'agit d'une approximation du moment où le contenu principal de la page est visible par les utilisateurs. Pour en savoir plus sur la détermination du LCP, consultez la section Définition de Largest Contentful Paint.
Comment Lighthouse détermine-t-il votre score LCP ?
Lighthouse extrait les données LCP de l'outil de traçage de Chrome.
Le tableau suivant vous explique comment interpréter votre score LCP sur mobile:
| Temps LCP (en secondes) |
Codes couleur |
|---|---|
| 0-2,5 | Vert (rapide) |
| 2.5-4 | Orange (modéré) |
| Plus de 4 | Rouge (lent) |
L'initiative Web Vitals recommande d'utiliser les mêmes seuils quel que soit l'appareil, ce qui revient essentiellement à utiliser les seuils pour les appareils mobiles. Toutefois, comme Lighthouse est un outil de laboratoire, il peut être utile d'être plus strict lors des tests sur des appareils de bureau plus rapides, car il utilise des seuils différents.
Le tableau suivant vous explique comment interpréter votre score LCP sur ordinateur:
| Temps LCP (en secondes) |
Codes couleur |
|---|---|
| 0-1.2 | Vert (rapide) |
| 1.2-2.4 | Orange (modéré) |
| Plus de 2,4 | Rouge (lent) |
Améliorer votre score LCP
Si le LCP est une image, le timing peut être divisé en quatre phases. Savoir quelles phases prennent le plus de temps peut vous aider à optimiser votre LCP. Lighthouse affiche l'élément LCP ainsi que la répartition des phases dans le diagnostic "Élément Largest Contentful Paint".
| Phase LCP | Description |
|---|---|
| Temps de latence du premier octet (TTFB) | Délai écoulé entre le moment où l'utilisateur lance le chargement de la page et le moment où le navigateur reçoit le premier octet de la réponse du document HTML. En savoir plus sur le TTFB |
| Délai de chargement | Différence entre le TTFB et le moment où le navigateur commence à charger la ressource LCP. |
| Temps de chargement | Temps nécessaire pour charger la ressource LCP elle-même. |
| Délai de rendu | Différence entre le moment où la ressource LCP a fini de se charger et le moment où l'élément LCP est entièrement affiché. |
Ressources
- Code source de l'audit Largest Contentful Paint
- Largest Contentful Paint (Largest Contentful Paint)
- API Largest Contentful Paint