Er is een categorie snelheidsadvies die klinkt alsof er geen nadeel aan zit. Lazy loading hoort daarbij. Laad afbeeldingen pas als de bezoeker eraan toe is, dan hoeft de browser minder te doen bij het openen van de pagina. Dat klopt ook, tot op zekere hoogte. Maar wij zien geregeld sites waar het aanzetten van lazy loading de gemeten prestaties juist verslechterde, en waar de eigenaar niet begreep waarom.
Het venijn zit in de details: wát u uitstelt, en of u het per ongeluk twee keer doet. In dit artikel leest u wat lazy loading in WordPress precies is, waar de winst zit, en in welke situaties u het beter uitzet.
Wat lazy loading doet
Normaal begint een browser met het downloaden van alle afbeeldingen zodra hij de HTML tegenkomt, ook die van foto’s die pas na vijf keer scrollen in beeld komen. Op een lange pagina met veel beeld betekent dat: een berg verkeer waar de bezoeker het grootste deel nooit van ziet.
Lazy loading verandert dat. De browser slaat een afbeelding over tot die bijna in beeld komt, en haalt hem dan pas op. De pagina is daardoor eerder klaar met laden en verbruikt minder data. Vooral op mobiel, waar bezoekers zelden verder komen dan de eerste twee schermen, is de besparing groot.
WordPress doet dit sinds versie 5.5 standaard. Elke afbeelding in de inhoud krijgt automatisch het kenmerk loading=”lazy” mee. U hebt er dus geen plugin voor nodig. Dat is het eerste dat veel mensen niet weten, en het verklaart meteen de meest voorkomende fout.
Waar het averechts werkt
De grootste afbeelding boven aan uw pagina, meestal de sfeerfoto of de productfoto, is bijna altijd het element dat Google gebruikt om te bepalen wanneer uw pagina zichtbaar klaar is. Dat heet de Largest Contentful Paint. Als u juist die afbeelding lui laat laden, dan begint de browser er pas aan nadat hij de rest van de pagina heeft verwerkt. Uw belangrijkste beeld verschijnt dus later dan nodig.
Dit is geen theoretisch punt. Wij hebben sites gezien waar het uitzetten van lazy loading op alleen de headerafbeelding de LCP met bijna een seconde verbeterde. Hoe u dat aanpakt, staat uitgebreider in ons artikel over het verbeteren van de LCP in WordPress.
Er zijn nog drie situaties waarin uitstellen niet helpt:
- Kleine afbeeldingen. Een pictogram van 3 kB uitstellen kost meer aan rekentijd en netwerkonderhandeling dan het bespaart.
- Korte pagina’s. Past alles binnen twee schermhoogtes, dan komt vrijwel elke afbeelding toch direct in beeld. U verplaatst het werk alleen maar.
- Logo’s en elementen in de bovenbalk. Die staan per definitie in beeld. Een logo dat na een halve seconde inploft, oogt slordig.
Het dubbele-plugin-probleem
Omdat WordPress het zelf al doet, ontstaat er iets vervelends zodra u een plugin installeert die het óók doet. Cacheplugins, afbeeldingsplugins en zogeheten speed boosters hebben vrijwel allemaal een lazy-loading-schakelaar. Staat er meer dan één aan, dan krijgt de browser tegenstrijdige instructies.
Wat u dan ziet: afbeeldingen die pas na scrollen verschijnen en dan met een schok inklappen, of afbeeldingen die helemaal wegblijven bij bezoekers met een trage verbinding. Soms werkt het in Chrome prima en niet in Safari. Dat maakt het lastig te herkennen, want u test waarschijnlijk in de browser waar het wel goed gaat.
De regel is simpel: kies één plek waar lazy loading geregeld wordt en zet het overal elders uit. Meestal is dat de standaardfunctie van WordPress zelf, met eventueel een uitzondering voor het bovenste beeld. Zit u met meerdere optimalisatieplugins naast elkaar, lees dan ons stuk over wat er gebeurt als u optimalisatieplugins stapelt.
Wat u zelf kunt controleren
U hebt hier geen technische kennis voor nodig, alleen een browser en tien minuten.
- Open uw homepage en druk op F12 om de ontwikkelaarstools te openen. Kies het tabblad Netwerk en filter op Afbeeldingen.
- Ververs de pagina zonder te scrollen. Tel hoeveel afbeeldingen er binnenkomen. Zijn dat er twintig terwijl er maar vier in beeld staan, dan werkt lazy loading niet of onvoldoende.
- Scroll nu langzaam naar beneden. Ziet u nieuwe afbeeldingen binnendruppelen, dan doet het zijn werk.
- Klik met de rechtermuisknop op uw headerafbeelding en kies Inspecteren. Staat daar loading=”lazy”, dan is dat waarschijnlijk een verbeterpunt.
- Test op een langzame verbinding. In hetzelfde paneel kunt u de snelheid terugschroeven naar iets als 3G. Verschijnen er dan lege vlakken die pas laat opvullen, dan stelt u te veel uit.
Kijk ook naar verspringende elementen. Als een afbeelding zonder opgegeven afmetingen lui laadt, schuift de tekst eronder weg zodra het beeld arriveert. Dat is hinderlijk voor de bezoeker en telt mee als negatieve score. Zorg dat elke afbeelding een breedte en hoogte in de HTML heeft.
Lazy loading voor iframes en video
Afbeeldingen zijn maar de helft van het verhaal. Een ingesloten YouTube-video of Google Maps-kaart haalt bij het laden al snel een halve megabyte aan scripts binnen, ook als de bezoeker nooit tot die sectie komt. WordPress past lazy loading sinds versie 5.7 ook toe op iframes, maar dat helpt alleen bij het uitstellen, niet bij het verkleinen.
Voor video’s werkt een andere aanpak vaak beter: toon een statische voorbeeldafbeelding met een afspeelknop en laad de echte speler pas bij een klik. Dat scheelt bijna alles, want de meeste bezoekers klikken niet. Verschillende plugins bieden dit; sommige thema’s hebben het ingebouwd.
Een voorbeeld uit de praktijk
Een reisbureau uit Breda had een homepage met een grote sfeerfoto, drie ingesloten video’s en een fotogalerij van veertig beelden. De pagina scoorde slecht op mobiel en de eigenaar had daarom in twee plugins lazy loading aangezet, in de veronderstelling dat meer beter was.
Wat wij deden: één van de twee plugins uitgezet, de sfeerfoto uitgezonderd van uitstel en voorzien van een prioriteitskenmerk, de video’s vervangen door voorbeeldafbeeldingen met klikfunctie, en de galerij ongemoeid gelaten. De pagina werd meer dan een seconde eerder zichtbaar en het dataverbruik bij het openen daalde van 4,1 naar 1,3 megabyte. Er is niets bij geïnstalleerd.
Wanneer u hulp inschakelt
Zolang het bij vinkjes blijft, kunt u dit prima zelf. Het wordt lastiger als uw thema of paginabouwer een eigen mechanisme meebrengt dat de standaard van WordPress overschrijft, of als u afbeeldingen via CSS als achtergrond laadt. Die laatste worden namelijk helemaal niet automatisch uitgesteld.
Merkt u dat u instellingen aan het proberen bent zonder dat de cijfers bewegen, dan is het efficiënter om een keer goed te laten meten waar de tijd werkelijk verdwijnt. Dat is doorgaans onderdeel van een eenmalige snelheidsoptimalisatie, waarbij lazy loading slechts één van de knoppen is.
Kort samengevat
Lazy loading is nuttig voor alles wat onder de vouw staat en zinloos tot schadelijk voor wat er direct in beeld hoort. Stel het één keer in, op één plek, en maak een uitzondering voor uw belangrijkste beeld. Uw volgende stap: open uw homepage, inspecteer de bovenste afbeelding en kijk of daar loading=”lazy” staat. Zo ja, dan hebt u binnen tien minuten uw eerste winst te pakken.
