SparkCore
Core Web Vitals verbeteren via lichtere media
LCP en CLS hangen vaak aan zware afbeeldingen. Kleinere bestanden en vaste afmetingen helpen direct.
In het kort
- Goed is: LCP 2,5 seconden of sneller, INP 200 milliseconden of sneller, CLS 0,1 of lager.
- Afbeeldingen raken vooral LCP en CLS, INP hangt meer aan JavaScript.
- Lazy load nooit je eerste grote beeld en geef elk beeld width en height.
Quick wins
- Comprimeer hero en productfoto’s
- Gebruik moderne formaten
- Vermijd oversized uploads
Wat zijn Core Web Vitals en welke scores zijn goed?
Core Web Vitals meten hoe een pagina aanvoelt voor bezoekers. LCP meet hoe snel het grootste zichtbare element verschijnt. INP meet hoe snel de pagina reageert op klikken en tikken. CLS meet hoeveel de lay-out verspringt tijdens het laden. Een goede score is LCP van 2,5 seconden of minder, INP van 200 milliseconden of minder en CLS van 0,1 of lager. Meet bij voorkeur met echte bezoekersdata, niet alleen met een labtest.
- LCP: 2,5 seconden of minder
- INP: 200 milliseconden of minder
- CLS: 0,1 of lager
Hoe verbeter je LCP op WordPress?
Op veel pagina's is het LCP-element een groot beeld, zoals een hero of een productfoto. Maak dat bestand dus zo klein mogelijk en serveer het in een modern formaat. Laad het niet lazy: het staat direct in beeld en moet meteen beginnen. Een snelle server en paginacache korten de wachttijd voor het eerste byte, en ook dat telt mee voor LCP. Upload bovendien geen beeld dat veel groter is dan de plek waar het staat.
- Comprimeer de hero en productfoto's
- Gebruik WebP of AVIF met een fallback
- Zet geen lazy loading op het eerste beeld
Hoe voorkom je layoutverschuiving (CLS) met afbeeldingen?
Layoutverschuiving ontstaat als de browser de grootte van een beeld niet kent. De tekst springt dan omlaag zodra het beeld binnenkomt. Geef daarom elk beeld een width en een height. De browser reserveert dan de juiste ruimte vóór het laden. WordPress voegt deze attributen meestal zelf toe aan beelden uit de mediabibliotheek. Controleer wel je eigen blokken, thema-onderdelen en code. Reserveer ruimte ook voor banners, advertenties en lettertypen die later laden.
Wat kun je doen aan INP en waar helpt caching?
INP hangt vooral af van JavaScript. Zware scripts van thema's, plugins en trackers houden de hoofdthread bezig. Verwijder wat je niet gebruikt en stel het laden van de rest uit. Afbeeldingen spelen hier een kleine rol. Caching helpt vooral bij LCP. Een gecachte pagina is sneller klaar, en een CDN brengt bestanden dichter bij de bezoeker. Meet na elke wijziging opnieuw en pas één ding tegelijk aan, anders weet je niet wat werkte.
Veelgestelde vragen
Meestal LCP, omdat het grootste element vaak een beeld is. Comprimeer dat bestand, kies een modern formaat en laad het niet lazy. Daarna is CLS aan de beurt: geef elk beeld width en height.
Nee. Lazy loading is bedoeld voor beelden onder de vouw. WordPress zet loading lazy automatisch op afbeeldingen. Het eerste grote beeld, vaak het LCP-element, laad je juist direct, anders wordt je LCP trager.
Afbeeldingen zijn maar een deel van het verhaal. Trage hosting, zware scripts, ongecachte pagina's en verspringende lay-out wegen ook mee. Kijk in je rapport per metriek welk element of script de oorzaak is.