LCP (Largest Contentful Paint)

Largest Contentful Paint is de tijd vanaf het starten van de navigatie tot het grootste element in het zichtbare deel van het scherm getekend is. Dat is meestal een afbeelding, een videoposter, een achtergrondafbeelding via CSS of een groot tekstblok.

Het is een van de drie Core Web Vitals. Goed is 2,5 seconde of minder, slecht is meer dan 4 seconden. Google kijkt naar het 75e percentiel van echte bezoeken.

Op de homepage is het meestal de hero-banner. Op een productpagina de hoofdfoto. Op een categoriepagina vaak de eerste productafbeelding, of de H1 met introtekst als de foto's lazy laden. Op mobiel kan het element anders zijn dan op desktop.

Google splitst LCP op in vier delen: TTFB (tot de eerste byte HTML binnen is), resource load delay (hoe laat de browser de afbeelding ontdekt), resource load duration (hoe lang het downloaden duurt) en element render delay (hoe lang het nog duurt tot het getekend wordt). In de praktijk zit de winst vaak in de tweede stap: de browser vindt de afbeelding te laat.

Daarom is LCP op een webshop vooral een kwestie van prioriteit. De browser ontdekt bestanden in de volgorde waarin ze in de HTML staan. Staan er tien scripts, drie fonts en een tracking-pixel vóór de hoofdfoto, dan wacht die foto in de rij. Alles wat de LCP-afbeelding eerder in beeld brengt, verkort de wachttijd voor elke bezoeker.

Zet de LCP-afbeelding direct in de HTML met een normale src, geef hem fetchpriority="high" en zet er nooit loading="lazy" op. Lever het formaat dat het scherm nodig heeft via srcset, in WebP of AVIF.

In Magento Luma bouwt de Fotorama-galerij de productfoto op met JavaScript. De browser kan de echte foto daardoor pas laat tonen. Hyvä rendert de hoofdfoto gewoon in de HTML, wat direct scheelt. Daarnaast hangt LCP in Magento sterk aan TTFB: zonder full page cache-hit in Varnish verlies je de eerste halve seconde al aan PHP.

In Shopify zit de serverkant meestal goed. Let op slider-sections in de hero die eerst JavaScript nodig hebben, op afbeeldingen zonder juiste breedte in image_url, en op apps die render-blocking CSS of scripts in de head zetten.

Een carrousel als hero, waarbij de eerste slide pas verschijnt als het script klaar is. Een 'lazy loading'-plugin die ook de bovenste afbeelding uitstelt. Een hero van 3000 pixels breed voor een telefoonscherm. En een cookiebanner met een grote tekst, die zelf het LCP-element wordt en pas na een consent-script verschijnt.

Meet per paginatype. Een snelle homepage zegt niets over je productpagina's, en daar zit meestal het meeste organische verkeer.

Kijk ook naar wat er na een release verandert. Een nieuwe hero-banner van 2 MB die marketing via het CMS uploadt, kan een goede LCP in één middag onderuit halen. Een maximale bestandsgrootte of automatische conversie naar WebP in de mediapipeline voorkomt dat.