Largest Contentful Paint (LCP) is een van de statistieken die worden bijgehouden in het gedeelte Prestaties van het Lighthouse-rapport. Elke statistiek legt een bepaald aspect van de laadsnelheid van de pagina vast.
Lighthouse geeft LCP in seconden weer:
Wat LCP meet
LCP meet wanneer het grootste inhoudselement in de viewport op het scherm wordt weergegeven. Dit is bij benadering het moment waarop de hoofdinhoud van de pagina zichtbaar is voor gebruikers. Zie Grootste contentvolle verf gedefinieerd voor meer details over hoe LCP wordt bepaald.
Hoe Lighthouse uw LCP-score bepaalt
Lighthouse haalt LCP-gegevens uit de traceringstool van Chrome .
De volgende tabel laat zien hoe u uw LCP-score op mobiel interpreteert:
| LCP-tijd (in seconden) | Kleurcodering |
|---|---|
| 0-2,5 | Groen (snel) |
| 2,5-4 | Oranje (matig) |
| Meer dan 4 | Rood (langzaam) |
Het Web Vitals-initiatief beveelt dezelfde drempels aan, ongeacht het apparaat, voor de drempels, waarbij in principe de mobiele drempels worden gebruikt. Omdat Lighthouse echter een laboratoriumtool is, kan het nuttig zijn om strenger te zijn bij het testen op snellere desktopapparaten, waarbij verschillende drempels worden gebruikt.
In de volgende tabel ziet u hoe u uw LCP-score op de desktop interpreteert:
| LCP-tijd (in seconden) | Kleurcodering |
|---|---|
| 0-1,2 | Groen (snel) |
| 1.2-2.4 | Oranje (matig) |
| Meer dan 2,4 | Rood (langzaam) |
Hoe u uw LCP-score kunt verbeteren
Als het LCP een beeld is, kan de timing in vier fasen worden opgesplitst. Als u weet welke fasen het langst duren, kunt u uw LCP optimaliseren . Lighthouse geeft het LCP-element samen met de fase-uitsplitsing weer in de diagnose "Grootste contentvolle verfelement".
| LCP-fase | Beschrijving |
|---|---|
| Tijd tot eerste byte (TTFB) | De tijd vanaf het moment waarop de gebruiker begint met het laden van de pagina tot het moment waarop de browser de eerste byte van het HTML-documentantwoord ontvangt. Meer informatie over TTFB . |
| Vertraging laden | Het verschil tussen TTFB en het moment waarop de browser de LCP-bron begint te laden. |
| Laad tijd | De tijd die nodig is om de LCP-resource zelf te laden. |
| Rendervertraging | Het verschil tussen het moment waarop de LCP-bron klaar is met laden totdat het LCP-element volledig is weergegeven. |