Lazy loading correct toepassen in WordPress

Lazy loading correct toepassen betekent dat je afbeeldingen en iframes buiten de eerste viewport pas laadt wanneer ze bijna in beeld komen. Laat de hero-afbeelding, andere waarschijnlijke LCP-afbeeldingen en essentiële content juist direct laden. Zo beperk je onnodige downloads bij de start, zonder dat de belangrijkste zichtbare content later verschijnt of je Largest Contentful Paint vertraagt.

Voor WordPress-sites is lazy loading vaak al deels aanwezig, maar controle blijft nodig. Een thema, page builder of performanceplugin kan attributen toevoegen, overschrijven of te agressief toepassen. Behandel lazy loading daarom als een gerichte optimalisatie per element, niet als een algemene schakelaar die altijd aan moet staan.

Wat is lazy loading?

Bij lazy loading stelt de browser het ophalen van een resource uit totdat die waarschijnlijk snel nodig is. Bij afbeeldingen gebruik je daarvoor meestal het HTML-attribuut loading="lazy". Bij iframes werkt hetzelfde principe.

Het doel is eenvoudig: de browser hoeft bij het eerste paginabezoek niet direct alle afbeeldingen, ingesloten video’s, kaarten en andere content verderop op de pagina op te halen. Daardoor blijven netwerkcapaciteit en verwerkingscapaciteit beschikbaar voor wat de bezoeker als eerste ziet.

Lazy loading is geen vervanging voor goede afbeeldingsoptimalisatie. Kies nog steeds het juiste bestandsformaat, lever passende afbeeldingsafmetingen aan en voorkom onnodig zware media. Lees daarvoor ook onze gids voor afbeeldingen optimaliseren in WordPress.

Wanneer lazy loading wel en niet gebruiken?

De belangrijkste regel is: laad content boven de vouw niet lazy als die nodig is om de pagina direct bruikbaar en visueel compleet te maken. Vooral de afbeelding die waarschijnlijk als Largest Contentful Paint-element geldt, verdient aandacht. Dat is vaak, maar niet altijd, de hero-afbeelding.

Element op de pagina	Aanpak	Waarom	Praktische controle
Hero-afbeelding die direct zichtbaar is	Niet lazy laden	Kan het LCP-element zijn en moet direct beschikbaar zijn	Controleer in PageSpeed Insights of DevTools welk element als LCP verschijnt
Logo in de header	Niet lazy laden	Het logo staat doorgaans direct in beeld en draagt bij aan een stabiele eerste weergave	Bekijk de broncode en controleer dat er geen loading="lazy" staat
Afbeelding midden in een lang artikel	Wel lazy laden	De bezoeker ziet deze afbeelding niet bij de eerste paginalaad	Scroll naar de afbeelding en controleer in het tabblad Network wanneer het bestand wordt opgehaald
Afbeeldingen in een product- of projectgalerij onderaan	Wel lazy laden	Ze zijn initieel buiten beeld en kunnen veel netwerkverzoeken veroorzaken	Controleer dat afbeeldingen verschijnen vóórdat de bezoeker ze nodig heeft
Ingesloten kaart, video of externe iframe onder de vouw	Wel lazy laden	Een iframe kan aanvullende scripts en externe resources laden	Controleer in Network of de iframe-resource pas later start
Video-poster of hoofdvisual direct bovenaan	Niet blind lazy laden	De poster kan bepalend zijn voor de eerste visuele indruk en LCP	Test op mobiel en desktop met een lege cache

Lazy loading en Core Web Vitals

Lazy loading kan helpen om de initiële belasting van een pagina te beperken, maar een onjuiste instelling werkt averechts. Als de browser moet wachten met het ophalen van de grootste zichtbare afbeelding, komt die afbeelding later in beeld. Dat kan de LCP verslechteren.

De relatie met de andere Core Web Vitals is indirect, maar relevant. Te veel scripts van een lazy-loadplugin, een verschuivende afbeeldingsruimte of complexe animaties rond ingeladen content kunnen de gebruikerservaring schaden. Reserveer daarom altijd ruimte voor afbeeldingen met correcte afmetingen of een geschikte aspect-ratio. Zo voorkom je dat content verspringt zodra media verschijnt.

Lazy loading lost ook geen interactieproblemen op die door zware JavaScript-taken ontstaan. Pak die apart aan in de browser, het thema en gebruikte plugins. Bij een bredere herziening van ontwerp en performance kan een strategisch creatief webdesigntraject helpen om techniek, inhoud en conversie samen te beoordelen.

Afbeeldingen correct lazy laden met HTML

Voor een afbeelding buiten beeld is browser-native lazy loading meestal de eenvoudigste basis:

<img src="teamfoto.webp"
     alt="Het team van het accountantskantoor"
     width="1200"
     height="800"
     loading="lazy">

De attributen width en height zijn hierbij belangrijk. Ze geven de browser vooraf informatie over de benodigde ruimte. Dat verkleint het risico op layoutverschuivingen.

Voor een afbeelding die direct zichtbaar en belangrijk is, laat je het lazy-attribuut weg of markeer je de afbeelding expliciet als eager:

<img src="hero.webp"
     alt="Adviseur in gesprek met ondernemer"
     width="1600"
     height="900"
     loading="eager"
     fetchpriority="high">

Gebruik fetchpriority="high" doelgericht voor een belangrijke afbeelding die direct zichtbaar is. Geef dit niet aan allerlei afbeeldingen tegelijk: dan verdwijnt de prioriteit waar je die juist nodig hebt. Controleer bovendien altijd of de betreffende afbeelding werkelijk het LCP-element is. Een CSS-achtergrond, tekstblok of video-poster kan in jouw ontwerp belangrijker blijken.

Lazy loading instellen in WordPress

WordPress kan voor afbeeldingen en iframes automatisch loading-attributen toevoegen. Hoe dat op jouw site uitpakt, hangt echter af van de manier waarop media wordt ingevoegd en van je thema, page builder en optimalisatieplugins. Sommige oplossingen voegen eigen lazy-loadscripts toe naast de browser-native aanpak. Dat kan leiden tot dubbele logica of tot het ongewenst uitstellen van belangrijke media.

Stappenplan: lazy loading veilig implementeren

1. Maak een inventarisatie van zichtbare media. Open de homepage en belangrijke landingspagina’s op mobiel en desktop. Noteer welke afbeelding, video-poster, logo en iframe direct zichtbaar zijn.
2. Bepaal het vermoedelijke LCP-element. Gebruik PageSpeed Insights of Chrome DevTools om te zien welk element als Largest Contentful Paint wordt gemeten. Ga niet alleen af op de naam ‘hero-afbeelding’.
3. Sluit belangrijke zichtbare media uit. Verwijder loading="lazy" van het LCP-element en van andere essentiële boven-de-vouwmedia. Stel waar passend loading="eager" in.
4. Laat media onder de vouw lazy laden. Pas loading="lazy" toe op artikelafbeeldingen, galerijen en ingesloten content die pas later wordt bekeken.
5. Controleer je WordPress-stack. Zoek in de instellingen van thema, page builder, cacheplugin en performanceplugin naar functies voor lazy loading. Zorg dat niet meerdere oplossingen dezelfde taak uitvoeren.
6. Reserveer afmetingen. Controleer of afbeeldingen een breedte en hoogte meekrijgen, of dat CSS een betrouwbare aspect-ratio vastlegt.
7. Test zonder cache. Leeg site-, browser- en eventuele CDN-cache. Test vervolgens als niet-ingelogde bezoeker, omdat de frontend voor beheerders kan afwijken.
8. Herhaal na templatewijzigingen. Een nieuw hero-blok, een andere page-builderwidget of een pluginupdate kan het laadgedrag opnieuw veranderen.

Hero-afbeelding en LCP-afbeelding uitzonderen

Een veelgemaakte fout is dat een optimalisatieplugin elke afbeelding van loading="lazy" voorziet. Dat lijkt efficiënt, maar de eerste grote afbeelding op de pagina mag meestal niet wachten totdat de browser een lazy-loaddrempel bereikt.

Zoek daarom naar instellingen waarmee je specifieke afbeeldingen, CSS-klassen, URL-patronen of de eerste zichtbare afbeeldingen kunt uitsluiten. De precieze instelling verschilt per plugin en page builder. Kies niet zonder controle voor een algemene optie zoals ‘eerste afbeelding uitsluiten’: op een pagina met een logo, icoon en hero-afbeelding is de eerste afbeelding in de HTML niet per se de LCP-afbeelding.

Staat je hero als CSS-achtergrondafbeelding? Dan werkt het loading-attribuut op een img-element niet. Beoordeel in dat geval of een semantisch img-element beter past, of zorg op een andere manier dat de belangrijke achtergrondafbeelding tijdig wordt ontdekt en geladen. Test dit altijd in de daadwerkelijke paginaopbouw.

Lazy loading voor iframes en video’s

Een iframe met een kaart, video of formulier van een externe aanbieder kan extra bronnen laden. Staat de iframe onder de vouw, dan is lazy loading doorgaans passend:

<iframe src="https://voorbeeld.nl/kaart"
        title="Locatiekaart"
        loading="lazy"></iframe>

Gebruik een duidelijke title en test de ingebedde content op mobiel. Een kaart of video direct in de eerste viewport kan functioneel essentieel zijn. Behandel die dan niet automatisch als uitstelbare content. Let bij video’s ook op de posterafbeelding: die kan zichtbaar zijn voordat een bezoeker op afspelen klikt.

Lazy loading controleren met DevTools en PageSpeed Insights

Een instelling is pas geslaagd als het daadwerkelijke gedrag klopt. Controleer daarom zowel de HTML als de netwerkverzoeken.

1. Open de pagina in een privévenster of met een lege browsercache.
2. Klik met de rechtermuisknop op de relevante afbeelding en kies ‘Inspecteren’ om het img-element te bekijken.
3. Controleer of een afbeelding onder de vouw loading="lazy" heeft en of de belangrijke boven-de-vouwafbeelding dit attribuut juist niet heeft.
4. Open het tabblad Network in Chrome DevTools en herlaad de pagina. Bekijk wanneer afbeeldingen en iframes worden opgevraagd.
5. Scroll gecontroleerd door de pagina. Content onder de vouw moet beschikbaar komen voordat de bezoeker die nodig heeft, zonder opvallende lege vlakken.
6. Test de URL in PageSpeed Insights en controleer welk LCP-element wordt gemeld. Vergelijk dit met je gekozen uitzondering.
7. Herhaal de controle op mobiel en desktop. De eerste viewport en daarmee het relevante zichtbare element kunnen verschillen.

Veelgemaakte fouten

• Alles lazy laden: ook het logo, de hero en andere direct zichtbare media worden uitgesteld.
• Alleen de broncode controleren: een attribuut kan goed lijken, terwijl scripts of een plugin het echte laadgedrag veranderen.
• Meerdere lazy-loadoplossingen combineren: thema, page builder en plugin kunnen elkaar overlappen.
• Geen ruimte reserveren: afbeeldingen verschijnen wel, maar veroorzaken layoutverschuivingen.
• CSS-achtergronden vergeten: deze vallen buiten de normale img-controle.
• Geen regressietest uitvoeren: na een nieuw template of pluginupdate kan een eerdere uitzondering verdwijnen.

Wanneer technische hulp inschakelen?

Schakel technische hulp in wanneer je LCP-afbeelding ondanks een uitzondering laat wordt geladen, wanneer verschillende plugins lazy loading tegelijk beheren, of wanneer de zichtbare content verspringt. Ook een site met een complex WordPress-thema, veel externe embeds of een page builder vraagt vaak om controle in de gegenereerde HTML, CSS en scripts.

Controleer bij technische wijzigingen ook of afbeeldingen, embeds en scripts geen foutieve URL’s of verwijderde bronnen aanroepen. Onze gids over 404- en soft-404-fouten oplossen helpt bij het herkennen van dat soort technische signalen.

Conclusie

Lazy loading is nuttig voor media die buiten beeld staat, maar schadelijk wanneer je het toepast op de content die een bezoeker als eerste moet zien. Begin met het identificeren van je echte LCP-element, sluit dat zorgvuldig uit en test daarna het werkelijke laadgedrag in de browser. Zo gebruik je lazy loading als gerichte performance-optimalisatie in plaats van een blind aangezette standaardfunctie.

Wil je de prestaties, techniek en conversiekracht van je WordPress-site in samenhang verbeteren? Bekijk de diensten van LYNX Media of bespreek je website of online groeikansen met LYNX Media.