Le LCP (Largest Contentful Paint) est l'une des 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 LCP en quelques secondes:
Ce que le LCP mesure
Le LCP mesure le moment où le plus grand élément de contenu de la fenêtre d'affichage est affiché à l'écran. Cette méthode permet de déterminer approximativement quand le contenu principal de la page est visible par les utilisateurs. Pour en savoir plus sur la détermination du LCP, consultez la section Largest Contentful Paint défini.
Comment Lighthouse détermine votre score LCP
Lighthouse extrait les données LCP de l'outil de traçage de Chrome.
Le tableau ci-dessous indique comment interpréter votre score LCP:
| Durée LCP (en secondes) |
Codes couleur |
|---|---|
| 0-2.5 | Vert (rapide) |
| 2.5-4 | Orange (modéré) |
| Plus de 4 | Rouge (lent) |
Améliorer votre score LCP
Si le LCP est une image, la chronologie peut être divisée en quatre phases. Connaître les phases qui 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 l'outil de diagnostic "Largest Contentful Paint".
| Phase LCP | Description |
|---|---|
| Délai avant le premier octet (TTFB) | Délai 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 | Delta 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 d'affichage | Delta entre la fin du chargement de la ressource LCP et le rendu complet de l'élément LCP. |