Grootste Contentful Paint (LCP): complete technische gids en optimalisatiestandaard

Largest Contentful Paint (LCP) is een van de drie Core Web Vitals-statistieken van Google, ontwikkeld om de waargenomen laadsnelheid van pagina's te meten.LCP houdt de tijd bij die is verstreken vanaf het moment dat een gebruiker begint met het laden van een webpagina totdat de grootste afbeelding, videoposterframe of tekstblok binnen de aanvankelijk zichtbare viewport volledig op het scherm wordt weergegeven.

Omdat gebruikers de snelheid van webpagina's beoordelen op basis van hoe snel de hoofdinhoud zichtbaar en leesbaar wordt, wordt LCP algemeen beschouwd als de belangrijkste maatstaf voor laadprestaties.Daarom neemt Google LCP op in zijn officiële rangschikkingssignalen voor pagina-ervaring voor organisch zoeken.

Antwoord-eerste samenvatting

Largest Contentful Paint (LCP) is een Core Web Vital-metriek die de waargenomen laadsnelheid van de pagina meet door te timen wanneer het grootste zichtbare tekstblok of afbeeldingselement in de viewport klaar is met renderen.Een passerende LCP-score is 2,5 seconden of minder voor ten minste 75% van de paginabezoeken in veldgegevens van echte gebruikers (CrUX).LCP-latentie bestaat uit vier afzonderlijke subonderdelen: Tijd tot eerste byte (TTFB), Vertraging van het laden van bronnen, Duur van het laden van bronnen en Element Render Delay.Het optimaliseren van LCP vereist het vooraf laden van hero-middelen, het inzetten van edge-caching, het comprimeren van afbeeldingen naar WebP/AVIF-formaten en het elimineren van render-blocking CSS en JavaScript.

LCP-scorebeoordelingsschaal en kernwaarden voor webvitaliteit

Om gebruikers een snelle en boeiende ervaring te bieden, moeten webpagina's voldoen aan de door Google vastgestelde Core Web Vitals-drempels voor Largest Contentful Paint:

LCP-weergavetijd	Prestatiebeoordeling	Gebruikersimpact en signaal voor Google-zoekrangschikking
$\le 2.5\text{ seconden}$	Goed (Groen)	Snelle waargenomen belasting;voldoet volledig aan de Core Web Vitals-beoordeling van Google.
$> 2.5\text {s} $ en $\le 4.0\text {s} $	Verbetering nodig (oranje)	Merkbare laadvertraging;potentiële daling van de conversiepercentages voor mobiel en de zoekresultaten.
$> 4,0\text{ seconden}$	Slechte (Rood)	Ernstige visuele laadvertraging;hoge bouncepercentages voor gebruikers en strafpunten in de zoekresultaten.

Om te slagen voor de Core Web Vitals-beoordeling moet een website een LCP-score behalen in de categorie Goed ($\le 2,5\text{ seconden}$) voor ten minste 75% van de paginabezoeken, beoordeeld op cohorten van desktop- en mobiele apparaten in praktijkgegevens.

Welke DOM-elementen komen in aanmerking voor LCP-evaluatie?

Volgens de officiële W3C Largest Contentful Paint-specificatie bewaakt de browser specifieke zichtbare DOM-elementen die zich in de initiële viewport bevinden:

Standaard <img> elementen (inclusief afbeeldingen weergegeven in responsieve <picture> tags).
<image> elementen ingebed in een <svg> vectorcontainer.
Videoposterafbeeldingen (het kenmerk poster op een <video> element).
Elementen met een CSS-achtergrondafbeelding geladen via de functie url().
HTML-containers op blokniveau die tekstknooppunten of onderliggende tekstelementen bevatten (zoals <h1> tot en met <h6> koppen, <p> paragrafen of <div> blokken).

LCP deconstrueren: de vier subonderdelen

Om langzame Largest Contentful Paint-scores effectief te kunnen diagnosticeren en optimaliseren, splitsen prestatie-ingenieurs de LCP-latentie op in vier verschillende subonderdelen:

Time to First Byte (TTFB): de tijd die verstrijkt vanaf het moment dat de gebruiker de pagina opvraagt totdat de browser de eerste byte van het HTML-documentantwoord van de server ontvangt.Doel: $< 800\text {ms} $ ($40%$ van LCP-budget).
Vertraging bij het laden van bronnen: de vertraging tussen het moment waarop het HTML-document klaar is met het ontvangen van responsbytes en het moment waarop de browser de LCP-bron (zoals een hero-afbeelding) ontdekt en begint op te halen.Doel: $< 200\text {ms} $ ($10%$ van LCP-budget).
Bronlaadduur: de tijd die de browser nodig heeft om de LCP-afbeelding of het lettertype-item via het netwerk te downloaden.Doel: $< 800\text {ms} $ ($40%$ van LCP-budget).
Elementweergavevertraging: de tijd tussen het moment waarop de LCP-bron klaar is met downloaden en het moment waarop de browser de lay-outberekeningen voltooit en het element op het scherm tekent.Doel: $< 200\text {ms} $ ($10%$ van LCP-budget).

Wiskundig gezien is de totale LCP-latentie de som van deze vier subonderdelen:

$$\text {LCP} = \text {TTFB} + \text{Resource Load Vertraging} + \text{Resource Load Duur} + \text{Element Render Vertraging}$$

Bewezen technieken om LCP te optimaliseren

Elimineer vertraging bij het laden van bronnen: voeg <link rel="preload" as="image" href="..."> of fetchpriority="high" toe aan uw hero-afbeeldingstag, zodat de browser het downloaden van afbeeldingen onmiddellijk initieert tijdens het parseren van HTML.
Optimize Server Response (TTFB): Implementeer edge caching via CDN, optimaliseer de prestaties van databasequery's en gebruik HTTP/2- of HTTP/3-server push-multiplexing.
Afbeeldingen comprimeren en moderniseren: Presenteer hero-afbeeldingen met moderne WebP- of AVIF-formaten met responsieve srcset-formaten die zijn afgestemd op de schermafmetingen van mobiele apparaten en desktops.
Reduceerblokkerende bronnen beperken: kritieke CSS inline in de <head> tag en niet-kritieke JavaScript uitstellen met behulp van defer of async scriptkenmerken.
Optimaliseer het laden van weblettertypen: gebruik font-display: swap of font-display: optional in CSS @font-face regels om ervoor te zorgen dat tekstblokken onmiddellijk zichtbaar blijven terwijl weblettertypen via het netwerk worden gedownload.

LCP versus First Contentful Paint (FCP) versus snelheidsindex

Hoewel LCP, FCP en Speed Index allemaal de laadprestaties meten, registreren ze verschillende aspecten van de voortgang van het laden van pagina's:

First Contentful Paint (FCP): Meet wanneer het allereerste DOM-element (zoals een achtergrondkleur, spinner of koptekst) klaar is met weergave op het scherm.
Grootste Contentful Paint (LCP): Meet wanneer het primaire visuele inhoudselement (heldbanner of hoofdparagraafblok) de weergave voltooit.
Snelheidsindex: meet hoe snel visuele inhoud het kijkvenster in de loop van de tijd vult tijdens visuele voortgangsregistratie.

LCP krijgt het hoogste gewicht onder de laadstatistieken in het Lighthouse-score-algoritme van Google (momenteel 25% van de totale prestatiescore), omdat dit het meest aansluit bij de perceptie van echte gebruikers over de voltooiing van het laden van pagina's.

Continue LCP-bewaking met SimpleOps

SimpleOps automatiseert de tracking van de grootste Contentful Paint door synthetische Lighthouse-labaudits en Chrome UX Report (CrUX)-velddatasetstatistieken vast te leggen in één uniform monitoringdashboard.SimpleOps verzendt direct proactieve waarschuwingen wanneer de LCP van uw site in het 75e percentiel uw prestatiebudget van 2,5 seconden overschrijdt, waardoor uw team conversies en zoekresultaten kan beschermen.