Lazy loading
Wat betekent lazy loading?
Lazy loading is een techniek waarbij je website afbeeldingen en video's pas laadt wanneer een bezoeker ernaartoe scrolt. Zo hoeft de browser bij het openen alleen te laden wat direct in beeld staat, waardoor de pagina sneller zichtbaar is.
Veelgestelde vragen over lazy loading
Hoe zet ik lazy loading aan in WordPress?
Waarschijnlijk staat het al aan. Sinds versie 5.5 geeft WordPress afbeeldingen automatisch het attribuut loading="lazy" mee. Wil je meer controle, bijvoorbeeld over video's of uitzonderingen, gebruik dan een snelheidsplugin:
- WP Rocket: ga naar Media en vink LazyLoad aan voor afbeeldingen en voor iframes en video's. Je kunt YouTube-video's daar ook vervangen door een voorbeeldafbeelding.
- LiteSpeed Cache: ga naar Page Optimization, tabblad Media Settings, en zet Lazy Load Images aan.
Laat lazy loading door één plugin regelen. Twee systemen tegelijk zorgen vaak voor problemen.
Moet ik de bovenste afbeelding op mijn pagina ook lazy loaden?
Nee, dat is een veelgemaakte fout. Afbeeldingen die direct in beeld staan, zoals je logo of grote headerfoto, moet je juist meteen laden. Lazy loading vertraagt ze en dat verslechtert je LCP (Largest Contentful Paint: hoe snel het grootste element zichtbaar is). Google gebruikt die meting om de snelheid van je pagina te beoordelen.
Recente WordPress-versies slaan de eerste afbeelding vaak al over, maar thema's en pagebuilders doen dat niet altijd. Sluit zo'n afbeelding daarom handmatig uit, bijvoorbeeld via het uitsluitingsveld in WP Rocket of LiteSpeed Cache.
Is lazy loading slecht voor mijn vindbaarheid in Google?
Niet als het goed is ingesteld. Google ondersteunt het standaard attribuut loading="lazy" en ziet die afbeeldingen gewoon. Problemen ontstaan vooral bij oudere scripts die afbeeldingen pas laden na een klik of andere actie van de bezoeker. Google voert die acties niet uit en mist dan je afbeeldingen.
Controleer het zo:
- Open Google Search Console.
- Gebruik URL-inspectie op een pagina met veel afbeeldingen.
- Test de live URL en bekijk de geteste pagina.
- Controleer in de HTML of je afbeeldingen erin staan.
Hoe controleer ik of lazy loading echt werkt?
Dat zie je het snelst in je browser:
- Open je pagina in Chrome en druk op F12.
- Ga naar het tabblad Network en filter op Img.
- Herlaad de pagina en bekijk welke afbeeldingen meteen laden.
- Scrol langzaam naar beneden. Verschijnen er nu nieuwe afbeeldingen in de lijst, dan werkt het.
Test daarnaast je pagina in PageSpeed Insights. Kijk bij de diagnose van LCP of je grootste afbeelding lazy wordt geladen. Is dat zo, sluit die afbeelding dan uit van lazy loading.
Waarom laden mijn afbeeldingen niet meer na lazy loading?
Meestal komt dat door een conflict tussen plugins of scripts. Loop deze stappen door:
- Leeg de cache van je plugin, je hosting en je browser.
- Kijk of je thema, pagebuilder en snelheidsplugin allemaal lazy loading doen. Zet het op één plek aan en op de rest uit.
- Stel je JavaScript uit (in WP Rocket heet dat Delay JavaScript execution)? Dan kan het lazy loading-script geblokkeerd raken. Sluit het uit.
- Sluit sliders en achtergrondafbeeldingen uit, die gaan vaak mis.
- Test opnieuw in een privévenster.
