Wat is lazy loading?
Lazy loading, letterlijk 'lui laden', betekent dat je browser beeld en video pas ophaalt op het moment dat de bezoeker er bijna bij is met scrollen. Zonder lazy loading probeert de browser bij het openen van de pagina alles tegelijk te downloaden, ook de afbeeldingen die pas helemaal onderaan staan en die de bezoeker misschien nooit ziet.
Het idee is simpel en logisch. Waarom zou je twintig afbeeldingen downloaden als de bezoeker er in eerste instantie maar drie ziet? Door de rest uit te stellen tot ze nodig zijn, is de pagina veel sneller klaar met het belangrijkste: het scherm dat de bezoeker meteen ziet.
Voor een gemiddelde MKB-site met een blog, een portfolio of een webshop scheelt dit vaak fors in laadtijd en dataverbruik. Zeker op mobiel, waar de verbinding trager is en elke bespaarde megabyte telt, is het effect goed merkbaar.
Waarom het je Core Web Vitals helpt
Google meet de gebruikerservaring van je site via de Core Web Vitals. Lazy loading raakt daar twee van, zij het op verschillende manieren, en dat is precies waarom je moet begrijpen wat je doet.
De belangrijkste is LCP (Largest Contentful Paint): hoe snel het grootste zichtbare element in beeld staat. Door al het beeld onder de vouw uit te stellen, houdt de browser bandbreedte over om het bovenste, zichtbare deel sneller te laden. Dat verlaagt je LCP, mits je het slim toepast. Meer daarover in LCP verlagen.
Er is ook een verband met CLS (Cumulative Layout Shift), het verspringen van de layout. Als een lazy-geladen afbeelding binnenkomt zonder dat er ruimte voor was gereserveerd, springt de content. Moderne browsers lossen dit op als je breedte en hoogte op je afbeeldingen zet, dus doe dat altijd.
Native lazy loading versus plugin
Vroeger had je een JavaScript-plugin nodig voor lazy loading. Tegenwoordig kunnen browsers het zelf. Er zijn grofweg drie routes, en voor de meeste WordPress-sites is de eerste al genoeg.
Native via loading='lazy'
Alle moderne browsers ondersteunen het `loading='lazy'`-attribuut op afbeeldingen en iframes. WordPress voegt dit sinds een aantal versies automatisch toe aan afbeeldingen in je content. Voor veel sites hoef je hier dus letterlijk niets voor te doen.
Via een cache- of speed-plugin
Plugins zoals LiteSpeed Cache bieden uitgebreidere lazy loading, inclusief opties voor achtergrondafbeeldingen en iframes, plus een nette placeholder terwijl het beeld laadt. Handig als je meer controle wilt dan de native variant biedt.
Handmatig in je thema
Bouw je zelf templates, dan zet je het attribuut handmatig op je afbeeldingen en iframes. Zorg dan dat je de bovenste, boven-de-vouw beelden juist uitsluit. Meer daarover hieronder.
De valkuil: je LCP-afbeelding lazy-loaden
Dit is de fout die we het vaakst zien, en die het meest averechts werkt. Als je álle afbeeldingen lazy-load, inclusief die ene grote hero-afbeelding bovenaan, dan vertraag je juist wat je wilde versnellen.
Waarom? Die bovenste afbeelding is vaak het Largest Contentful Paint-element: het grootste ding dat de bezoeker meteen ziet. Zet je daar lazy loading op, dan wacht de browser even voor die begint te laden, en dat kost je kostbare milliseconden precies op de metric die telt.
Concreet voorbeeld: een fotograaf zet lazy loading op zijn hele homepage, inclusief de paginabrede openingsfoto. Zijn LCP loopt op van ongeveer 2 seconden naar bijna 3,5 seconde, ruim boven de grens van 2,5 seconde die Google als 'goed' aanmerkt. De fix is simpel: sluit die ene bovenste afbeelding uit van lazy loading, geef 'm juist voorrang, en de LCP zakt weer terug. De regel: alles onder de vouw lui laden, alles boven de vouw juist niet.
Video en iframes lazy laden
Video's en ingesloten iframes (een YouTube-embed, een Google Maps-kaart) zijn vaak de zwaarste onderdelen van een pagina. Juist daar valt de meeste winst te halen. Een paar richtlijnen.
- YouTube-embeds: een standaard-embed laadt een hoop scripts, ook als niemand op play drukt. Gebruik een 'facade' die pas de echte speler laadt bij een klik. Veel speed-plugins bieden dit als optie.
- Iframes: zet `loading='lazy'` op iframes die onder de vouw staan, zoals een kaart onderaan je contactpagina.
- Zelf-gehoste video: gebruik het `preload='none'`-attribuut zodat de browser de video pas ophaalt bij interactie.
- Achtergrondvideo's: wees terughoudend. Een automatisch spelende achtergrondvideo bovenaan je pagina is bijna altijd slecht voor je laadtijd, hoe mooi het ook oogt.
Lazy loading in WordPress instellen
In WordPress is lazy loading grotendeels een kwestie van aanzetten en één ding uitsluiten. Een praktische volgorde die vrijwel altijd werkt.
- Vertrouw op de native laag. WordPress voegt `loading='lazy'` standaard toe aan afbeeldingen. Voor veel sites is dit de basis.
- Zet je speed-plugin bij. In LiteSpeed Cache activeer je lazy loading voor afbeeldingen en iframes, en zet je de YouTube-facade aan.
- Sluit boven-de-vouw beeld uit. Vrijwel elke plugin heeft een instelling om de eerste X afbeeldingen of specifieke afbeeldingen over te slaan. Gebruik die voor je hero.
- Zet altijd width en height op je afbeeldingen om layout shift (CLS) te voorkomen.
- Combineer met WebP-afbeeldingen voor het grootste snelheidseffect: kleinere bestanden die ook nog eens lui laden.
Testen of het werkt
Aangezet is niet hetzelfde als werkend. Controleer altijd na een wijziging, want een verkeerd ingestelde lazy loading kan meer kwaad dan goed doen.
De snelste check: open PageSpeed Insights en kijk naar je LCP en naar de aanbevelingen. Zie je een waarschuwing als 'Largest Contentful Paint image was lazily loaded', dan weet je dat je bovenste afbeelding ten onrechte lazy is. Leer je rapport lezen met PageSpeed Insights lezen en gebruiken.
Een tweede check doe je met het netwerk-tabblad van je browser: scroll langzaam naar beneden en kijk of afbeeldingen pas binnenkomen als je er bijna bent. Zo niet, dan laadt er nog te veel ineens. Twijfel je over je totale snelheidsscore, dan geeft onze gratis site-check je snel een beeld.
Wat lazy loading niet oplost
Lazy loading is een prima techniek, maar het is een pleister, geen fundament. Als je bronbestanden gigantisch zijn, laad je met lazy loading nog steeds veel te zware afbeeldingen, alleen wat later. De echte winst zit in het combineren met andere fixes.
Comprimeer je afbeeldingen en zet ze om naar een modern formaat. Draai op snelle hosting die de bestanden vlot uitserveert. Ruim overbodige scripts op. Lazy loading versnelt de volgorde waarin dingen laden, maar verkleint de bestanden zelf niet. Bekijk de bredere aanpak in WordPress speed-optimalisatie.
Onze nuchtere kijk: lazy loading hoort erbij, maar het is één van de twaalf dingen die samen een snelle site maken. Wie alleen lazy loading aanzet en de rest laat liggen, lost het echte probleem niet op.
Lazy loading is als een kelner die gerechten pas brengt als je aan die gang toe bent. Fijn voor het ritme, maar als de keuken traag is, help je er de avond niet mee. Snelle hosting en lichte bestanden zijn de keuken.