Home › Kennisbank › WordPress
Wat is lazy loading en hoe stel ik het in op mijn WordPress-website?
Direct antwoord
Lazy loading betekent dat afbeeldingen, video’s en ingesloten inhoud (iframes) pas worden geladen als de bezoeker ernaartoe scrolt; WordPress doet dit voor afbeeldingen al automatisch. Voor video’s, YouTube-insluitingen en extra instellingen gebruik je een plugin zoals WP Rocket of Autoptimize. Zet afbeeldingen die direct in beeld staan, zoals je logo, niet op lazy loading.
Wat heb je nodig?
- Een inlog voor het WordPress-dashboard met de rol Beheerder
- Een recente back-up van je website. Lees hoe je een back-up van je WordPress-website maakt
- Een pagina met veel afbeeldingen of een video, om het effect te kunnen zien
- Een snelheidsmeting van die pagina in Google PageSpeed Insights van voor je begint
Stappenplan12 stappen
- 1Controleer wat je website al doet
- 2Maak een back-up
- 3Kies één plugin voor lazy loading
- 4Installeer de plugin
- 5Zet lazy loading aan in Autoptimize
- 6Zet lazy loading aan in WP Rocket
- 7Maak YouTube-video’s lichter
- 8Sluit afbeeldingen bovenaan de pagina uit
- 9Voeg lazy loading toe aan eigen HTML
- 10Leeg de cache
- 11Test je website
- 12Meet opnieuw
Wat is lazy loading en waarom helpt het?
Zonder lazy loading downloadt de browser bij het openen van een pagina alle afbeeldingen en video’s tegelijk, ook die helemaal onderaan staan. De bezoeker wacht op bestanden die hij misschien nooit ziet.
Met lazy loading laadt de browser eerst alleen wat in beeld staat. De rest volgt zodra de bezoeker ernaartoe scrolt. De pagina staat sneller op het scherm, de server verstuurt minder data en vooral op een telefoon met een trage verbinding merk je het verschil. Het bespaart bovendien dataverkeer voor je bezoekers.
Doet WordPress dit niet al zelf?
Ja, voor afbeeldingen. WordPress voegt sinds versie 5.5 automatisch het kenmerk loading="lazy" toe aan afbeeldingen in je berichten en pagina’s. Nieuwere versies doen dat ook voor ingesloten iframes met vaste afmetingen. De browser regelt het laden dan zelf, zonder plugin. Dit heet native lazy loading.
Native lazy loading is voor zoekmachines de veiligste vorm: het adres van de afbeelding staat gewoon in de HTML, dus Google hoeft niets uit te voeren om de afbeelding te vinden. Geef een afbeelding wel altijd een breedte en hoogte mee (width en height). Zonder vaste afmetingen verspringt de pagina zodra een afbeelding binnenkomt. Google meet dat verspringen als CLS, een van de Core Web Vitals; goed is een waarde tot 0,1.
Een plugin heb je nodig voor video’s, voor een lichte voorbeeldafbeelding in plaats van een zware YouTube-speler, voor achtergrondafbeeldingen uit CSS en voor extra instellingen, zoals het uitsluiten van bepaalde afbeeldingen.
Stappenplan 12 stappen
Stap 1: Controleer wat je website al doet
Open een pagina met veel afbeeldingen in je browser. Klik met de rechtermuisknop op een afbeelding onderaan de pagina en kies Inspecteren (in sommige browsers Element inspecteren). Staat in de code van die afbeelding loading="lazy", dan werkt lazy loading voor afbeeldingen al.
Wil je ook video’s en iframes uitgesteld laden, of afbeeldingen uitsluiten, ga dan verder. Oudere versies van PageSpeed Insights gaven hiervoor de melding Afbeeldingen buiten het scherm uitstellen; die melding bestaat sinds eind 2025 niet meer.
Stap 2: Maak een back-up
Maak een back-up van je website voordat je een plugin installeert of instellingen wijzigt. Lees hoe je een back-up van je WordPress-website maakt.
Stap 3: Kies één plugin voor lazy loading
Gebruik je al WP Rocket of Autoptimize, gebruik dan die plugin. Anders kies je het gratis Autoptimize of het betaalde WP Rocket, dat ook caching en het verkleinen van code verzorgt.
Let op: zet lazy loading nooit in twee plugins tegelijk aan. Afbeeldingen blijven dan leeg of laden dubbel.
Stap 4: Installeer de plugin
Ga in het WordPress-dashboard naar Plugins > Plugin toevoegen. Typ Autoptimize in het zoekveld rechtsboven, klik op Nu installeren en daarna op Activeren. Voor WP Rocket klik je op Plugin uploaden, kies je het zipbestand van de maker en klik je op Nu installeren en Activeren.
Stap 5: Zet lazy loading aan in Autoptimize
Ga naar Instellingen > Autoptimize en open het tabblad voor afbeeldingen. Zet het vinkje aan bij de optie om afbeeldingen lazy te laden. Klik onderaan op de knop om de wijzigingen op te slaan. Gebruik je WP Rocket, sla deze stap dan over.
Stap 6: Zet lazy loading aan in WP Rocket
Open de instellingen van WP Rocket via Instellingen > WP Rocket en ga naar het onderdeel Media. Zet onder LazyLoad de optie aan voor afbeeldingen en de optie voor iframes en video’s. Zet ook de optie aan om een YouTube-iframe te vervangen door een voorbeeldafbeelding. Klik op de knop om de wijzigingen op te slaan. Gebruik je Autoptimize, sla deze stap dan over.
Stap 7: Maak YouTube-video’s lichter
Een ingesloten YouTube-video laadt standaard de complete videospeler van YouTube, ook als niemand op afspelen klikt. Met de optie uit de vorige stap toont WP Rocket alleen een voorbeeldafbeelding en laadt de speler pas na een klik. Gebruik je Autoptimize, installeer dan via Plugins > Plugin toevoegen de plugin WP YouTube Lyte van dezelfde maker. Die vervangt YouTube-insluitingen door een lichte voorvertoning.
Stap 8: Sluit afbeeldingen bovenaan de pagina uit
Zoek in de instellingen van je plugin het veld met uitzonderingen voor lazy loading. In Autoptimize staat dat op het tabblad voor afbeeldingen, in WP Rocket onder Media. Typ daar de bestandsnaam van je logo en van de grote afbeelding bovenaan je homepage, elk op een eigen regel. Sla op.
Stap 9: Voeg lazy loading toe aan eigen HTML
Deze stap is alleen nodig als je zelf afbeeldingen plaatst via het blok Aangepaste HTML of in de code van je thema. Voeg aan de afbeelding het kenmerk loading="lazy" toe, bijvoorbeeld <img src="foto.jpg" alt="Omschrijving" width="600" height="400" loading="lazy">. Vul bij width en height de echte afmetingen van de afbeelding in pixels in. Afbeeldingen die je via het blok Afbeelding of de mediabibliotheek plaatst, krijgen dit kenmerk al automatisch.
Stap 10: Leeg de cache
Klik in de instellingen van je cachingplugin op de knop om de cache te legen. Anders zien bezoekers nog de oude versie van je pagina’s, zonder lazy loading.
Stap 11: Test je website
Open de testpagina in een venster waarin je niet bent ingelogd en scrol langzaam naar beneden. Afbeeldingen horen in beeld te komen zonder dat je op lege vlakken wacht. Klik op een YouTube-video en controleer dat die afspeelt. Controleer ook sliders en fotogalerijen.
Stap 12: Meet opnieuw
Voer de test in PageSpeed Insights opnieuw uit voor dezelfde pagina en vergelijk de LCP met je eerste meting. De LCP mag niet slechter zijn geworden. Is hij slechter, dan wordt de afbeelding bovenaan waarschijnlijk uitgesteld geladen: sluit die uit zoals in stap 8.
Verwacht van lazy loading geen grote sprong in de score. Het belangrijkste effect is dat bezoekers minder data hoeven te downloaden. Lees hoe je je WordPress-website verder sneller maakt.
Controleer of het gelukt is
Scrol je door een pagina, dan verschijnen afbeeldingen en video’s pas als je ze bijna bereikt. In de code van een afbeelding onderaan de pagina zie je loading="lazy" of een kenmerk van je plugin. Je logo en de afbeelding bovenaan de pagina staan nog direct in beeld, en in PageSpeed Insights is de LCP niet slechter dan bij je eerste meting.
Wat moet ik niet uitgesteld laden?
Alles wat direct in beeld staat als de pagina opent: je logo, de grote afbeelding bovenaan de pagina en de eerste productfoto’s in een webshop. Laad je die uitgesteld, dan verschijnen ze juist later. Google meet dat als een slechtere LCP, de tijd tot het grootste onderdeel van de pagina zichtbaar is. Zet die afbeeldingen daarom op de uitzonderingenlijst van je plugin.
Op de meeste pagina’s is het grootste onderdeel bovenaan een afbeelding, vaak de grote foto in de header. Google meet de LCP als goed tot 2,5 seconde. Laat het kenmerk loading="lazy" bij die afbeelding weg en geef haar eventueel fetchpriority="high" mee, zodat de browser haar als eerste ophaalt.
Nieuwere WordPress-versies laden de eerste afbeeldingen van een pagina zelf direct, maar thema’s en paginabouwers met een eigen headerblok of slider doorbreken dat geregeld. Controleer in PageSpeed Insights welk onderdeel als LCP wordt gemeten; dat is niet altijd de afbeelding die je verwacht.
Werkt het niet?
Afbeeldingen blijven leeg of verschijnen niet
Meestal is lazy loading in twee plugins tegelijk actief, of botst het met een slider of fotogalerij. Zet lazy loading in één plugin uit en leeg de cache. Blijft het probleem bij een slider of galerij, voeg die afbeeldingen dan toe aan de uitzonderingen.
De grote afbeelding bovenaan de pagina laadt trager dan eerst
Die afbeelding wordt nu ook uitgesteld geladen. Voeg de bestandsnaam toe aan de uitzonderingen in je plugin, sla op en leeg de cache. Doe hetzelfde voor je logo.
Een YouTube-video toont alleen een afbeelding
Dat is de bedoeling: de videospeler laadt pas als de bezoeker op de afbeelding klikt. Wil je dat niet, zet dan in WP Rocket de optie voor de voorbeeldafbeelding uit of deactiveer WP YouTube Lyte.
Achtergrondafbeeldingen laden niet uitgesteld
Afbeeldingen die via CSS als achtergrond zijn ingesteld, laadt de browser niet zelf uitgesteld. WP Rocket heeft onder Media een aparte optie voor achtergrondafbeeldingen uit CSS. Zonder die optie laat je deze afbeeldingen gewoon direct laden.
Een afbeelding onderaan de pagina laadt nog steeds direct
Controleer of je de cache hebt geleegd en of de afbeelding van je eigen website komt. Afbeeldingen die via scripts van andere diensten worden geladen, zoals een chatvenster of een kaart, kan je plugin niet uitstellen.
De pagina verspringt als afbeeldingen binnenkomen
De afbeeldingen hebben geen vaste breedte en hoogte, waardoor de browser vooraf geen ruimte vrijhoudt. Geef elke afbeelding width en height mee, ook in een paginabouwer, waar je de afmetingen bij de instellingen van de afbeelding vindt. Werk je met ViRank, dan zie je problemen met snelheid en Core Web Vitals onder Techniek.
Tekst of afbeeldingen die pas na scrollen of klikken laden, staan niet in Google
Google bekijkt je pagina in een heel hoog venster, maar scrolt niet en klikt nergens op. Inhoud die een script pas na scrollen of een klik ophaalt, ziet Google dus niet. Dat gebeurt bij oudere scripts die het adres van een afbeelding alleen in een kenmerk zoals data-src bewaren, zonder terugval voor als het script niet draait. Het gebeurt ook bij tabbladen of uitklapblokken die hun tekst pas na een klik laden.
Kies voor afbeeldingen het native kenmerk loading="lazy" en zet tekst gewoon in de HTML; laat het tabblad of uitklapblok alleen de weergave regelen. Ook gestructureerde data hoort al in de HTML te staan.
Controleer het zo: plak het adres van de pagina in de URL-inspectie van Google Search Console, test de live URL en bekijk de HTML van de geteste pagina. Staan je afbeeldingen en tekstblokken erin, dan ziet Google ze. Zoek daarnaast in Google op site:jouwdomein.nl met een letterlijke zin uit de uitgesteld geladen tekst; vind je niets, dan is die tekst waarschijnlijk niet opgenomen. Herhaal deze controle na een thema-update of als je een andere plugin gaat gebruiken.
Een overzichtspagina met oneindig scrollen toont in Google maar een deel van de producten of berichten
Bij oneindig scrollen laadt de pagina nieuwe items pas als de bezoeker naar beneden scrolt, en dat doet Google niet. Bied daarom ook gewone paginering aan, waarbij elke vervolgpagina een eigen adres heeft, bijvoorbeeld /page/2/. Zo kan Google ook de producten of berichten verderop in de lijst vinden.
Veelgestelde vragen
Heb ik een plugin nodig voor lazy loading?
Voor afbeeldingen niet. WordPress regelt dat zelf. Een plugin is nodig voor video’s, lichte YouTube-voorvertoningen, achtergrondafbeeldingen en het uitsluiten van afbeeldingen.
Is lazy loading slecht voor mijn vindbaarheid in Google?
Nee, Google leest afbeeldingen met het kenmerk loading="lazy" gewoon. Laad alleen de afbeeldingen bovenaan de pagina direct en geef elke afbeelding een alternatieve tekst. Lees hoe je afbeeldingen optimaliseert voor zoekmachines.
Werkt lazy loading in elke browser?
Alle moderne browsers op computer en telefoon ondersteunen het kenmerk loading="lazy". In een verouderde browser die het niet kent, laadt de afbeelding gewoon direct.
Werkt lazy loading ook in Elementor of een andere paginabouwer?
Ja, de afbeeldingen die een paginabouwer plaatst, krijgen in de regel het kenmerk van WordPress mee. Controleer het met de controle uit stap 1. Voor achtergrondafbeeldingen en video’s in een paginabouwer heb je wel een plugin zoals WP Rocket nodig.
Bespaart lazy loading ook data voor mijn bezoekers?
Ja. Afbeeldingen en video’s die een bezoeker niet bereikt, worden niet gedownload. Dat scheelt vooral op een telefoon met een databundel.
Werkt lazy loading ook voor video’s die ik zelf upload?
Het kenmerk loading="lazy" werkt voor afbeeldingen en iframes, zoals YouTube-insluitingen en kaarten, maar niet voor een eigen video-element. Geef een eigen video preload="none" en een voorbeeldafbeelding mee, zodat de browser de video pas ophaalt als de bezoeker op afspelen klikt. In het WordPress-blok Video vind je beide in de blokinstellingen rechts in de editor.
Verschijnen uitgesteld geladen afbeeldingen in Google Afbeeldingen?
Met het native kenmerk loading="lazy" wel, want het adres van de afbeelding staat gewoon in de HTML. Bij scripts die het echte adres in een data-kenmerk bewaren, kan de afbeelding buiten Google vallen als het script niet goed wordt uitgevoerd.
Telt lazy loading mee voor mijn positie in Google?
Niet rechtstreeks. Google beoordeelt het resultaat: de laadsnelheid en de Core Web Vitals. Goed ingesteld helpt lazy loading die metingen; op de afbeelding bovenaan de pagina werkt het juist tegen je.
Hulp nodig?
Schakel de helpdesk van ViVortis in als:
- afbeeldingen leeg blijven of niet verschijnen na het inschakelen van lazy loading
- je website er anders uitziet na het instellen en je niet weet welke instelling de oorzaak is
- je niet weet of je thema of paginabouwer al lazy loading toepast
- je wilt dat ViVortis de afbeeldingen en video’s van je website optimaliseert
Dien een ticket in via de helpdesk van ViVortis en voeg waar mogelijk een screenshot toe.
Lukt het niet?
Dien een ticket in met een screenshot van wat je ziet. De helpdesk reageert meestal binnen één werkdag.
Verder lezen
- Hoe maak ik mijn WordPress-website sneller?
- Hoe optimaliseer ik mijn afbeeldingen voor zoekmachines?
- Hoe minimaliseer ik CSS, JavaScript en HTML voor snellere laadtijden?
- Hoe sluit ik een YouTube-video of andere media in op mijn WordPress-website?
Meer van ViVortis