SparkCore
Lazy load werkt beter met kleinere bronbestanden
Lazy loading stelt het laden uit; compressie zorgt dat wat wél laadt sneller klaar is.
In het kort
- Lazy loading stelt het laden van afbeeldingen buiten beeld uit.
- Laad de eerste afbeelding in beeld juist direct.
- Met width en height voorkom je dat de pagina verspringt.
Samen sterker
Geen trucje dat zware bestanden verbergt: we maken ze echt kleiner.
Hoe werkt lazy load in WordPress?
Lazy loading betekent dat de browser een afbeelding pas ophaalt als die bijna in beeld komt. Dat is native browsergedrag via het attribuut loading="lazy". WordPress voegt dit attribuut automatisch toe aan afbeeldingen in je content. Je hebt er dus geen aparte plugin voor nodig. Bezoekers die niet naar beneden scrollen, downloaden de onderste afbeeldingen nooit. Dat bespaart data en maakt de eerste weergave sneller. Vooral lange pagina's met veel foto's profiteren hiervan.
Welke afbeeldingen laad je niet lazy?
De eerste afbeelding boven de vouw is vaak het LCP-element. Laad je die lazy, dan start de browser later met ophalen. Je LCP wordt dan trager. Een goede LCP is 2,5 seconden of minder. Houd de afbeeldingen die direct zichtbaar zijn dus buiten lazy loading. Alles daaronder mag wel lazy. Kijk in de paginabron of je hero niet loading="lazy" heeft. Controleer dit ook bij je thema en je paginabouwer.
- De hero of header-afbeelding
- De eerste productfoto op een productpagina
- Het logo bovenaan de pagina
Hoe voorkom je layoutverschuiving met width en height?
Een afbeelding zonder afmetingen heeft geen vaste plek. De browser weet pas hoe hoog hij is als het bestand binnen is. Daarna springt de tekst naar beneden. Dat meet Google als CLS. Een goede score is 0,1 of lager. Geef elke afbeelding daarom width en height mee. De browser reserveert dan direct de juiste ruimte. Bij afbeeldingen uit de mediabibliotheek gaat dit meestal vanzelf goed. Let extra op bij handmatig geplakte HTML.
Maakt lazy load kleinere bestanden overbodig?
Nee. Lazy loading stelt alleen uit en verkleint niets. Zodra een afbeelding in beeld komt, moet het hele bestand nog steeds binnen. Een zware foto blijft zwaar, ook als hij later laadt. Op mobiel merk je dat tijdens het scrollen. Combineer lazy loading daarom met compressie. Spark Media Optimizer comprimeert op de achtergrond in een wachtrij en haalt tot 94 procent uit de bestandsgrootte. Zo laadt ook wat later komt snel.
- Lazy load: minder bestanden bij de start
- Compressie: een kleiner bestand per afbeelding
- Moderne formaten: WebP en AVIF waar de browser ze snapt
Veelgestelde vragen
Meestal niet. WordPress zet loading="lazy" automatisch op afbeeldingen en browsers ondersteunen dat native. Een extra plugin is alleen nodig voor wat core niet dekt, zoals achtergrondafbeeldingen in CSS. Controleer eerst of je thema of cache-plugin het al doet.
Waarschijnlijk is ook je hero lazy geladen. De browser wacht dan met ophalen tot de layout klaar is. Haal loading="lazy" weg bij de eerste afbeelding boven de vouw. Test daarna opnieuw. Streef naar een LCP van 2,5 seconden of minder.
Nee, het kan het zelfs veroorzaken. Zonder width en height heeft een lazy afbeelding geen plek, en de pagina springt zodra hij laadt. Geef daarom altijd afmetingen mee. Dan blijft je CLS onder de 0,1.