Hoe afbeeldingen Core Web Vitals beïnvloeden - en hoe je het oplost
Afbeeldingen zijn verantwoordelijk voor de meeste LCP-problemen (Largest Contentful Paint). Staan je Core Web Vitals op rood, dan liggen je afbeeldingen er waarschijnlijk aan. Zo los je het precies op.
Probeer het nu - gratis, zonder account.
Afbeeldingen slim comprimeren →Afbeeldingen en LCP (Largest Contentful Paint)
LCP meet wanneer het grootste zichtbare element klaar is met laden. Op de meeste pagina's is dat een afbeelding. Google wil een LCP onder de 2,5 seconden.
Zo verbeter je LCP:
- Gebruik WebP/AVIF: 25-50% kleinere bestanden = sneller downloaden. Nu omzetten.
- Verklein afbeeldingen: lever de juiste grootte voor het vak. Hier verkleinen.
- Hero-afbeeldingen vooraf laden:
<link rel="preload" as="image" href="hero.webp"> - Gebruik een CDN: lever afbeeldingen vanaf edge-servers dicht bij je gebruikers.
- Stel fetchpriority in:
<img fetchpriority="high">voor afbeeldingen boven de vouw.
Afbeeldingen en CLS (Cumulative Layout Shift)
CLS meet onverwachte verschuivingen in de lay-out. Afbeeldingen zonder afmetingen laten de pagina verspringen zodra ze laden.
Zo verbeter je CLS:
- Stel altijd width en height in:
<img width="800" height="600"> - Gebruik CSS aspect-ratio:
aspect-ratio: 16/9;als modern alternatief - Geen lazy loading boven de vouw: zet geen
loading="lazy"op je hero-afbeelding
Checklist voor snelle verbeteringen
- Slim comprimeren van alle afbeeldingen (automatisch optimale kwaliteit)
- Verkleinen tot de werkelijke weergavegrootte
- Width/height-attributen toevoegen aan alle
<img>-tags - Je LCP-afbeelding vooraf laden
- Alles onder de vouw lazy laden
- Opnieuw testen in PageSpeed Insights
Veelgestelde vragen
Wat is een goede LCP-score?
Onder de 2,5 seconden is "Goed" (groen). 2,5-4 seconden is "Verbetering nodig" (geel). Boven de 4 seconden is "Slecht" (rood). Alleen al afbeeldingen optimaliseren brengt je vaak van rood naar groen.
Moet ik alle afbeeldingen lazy laden?
Nee! Laad afbeeldingen boven de vouw (vooral je hero/LCP-afbeelding) niet lazy. Laad alleen afbeeldingen lazy die eerst buiten beeld staan. Te veel lazy loading schaadt juist je LCP.
Klaar? 100% gratis, werkt in je browser.
Afbeeldingen slim comprimeren →