Op een gemiddelde pagina staan vijftien afbeeldingen. Je bezoeker ziet er bij het openen twee. De overige dertien worden wel opgehaald, netjes op de achtergrond, terwijl niemand ze bekijkt. Bij de helft van je bezoekers wordt er nooit ver genoeg gescrold. Die dertien komen dus nooit in beeld.
Dat is werk waar niemand iets aan heeft. Het kost je bezoeker tijd en data, en het kost jou bezoekers die afhaken.
Lazy loading draait dat om. Je haalt een afbeelding pas op zodra hij bijna in beeld komt. Voor de bezoeker is dat onzichtbaar, want er zit altijd een marge in.
Bij een opruimronde is dit een van de eerste dingen die ik nakijk. Het kost weinig moeite en het effect is direct meetbaar. Zeker op pagina’s met veel beeld, zoals een portfolio.
Pas laden wat je bezoeker daadwerkelijk gaat zien.
Wat is lazy loading?
Lazy loading is het uitstellen van het laden van onderdelen tot ze nodig zijn. Meestal gaat het om afbeeldingen, maar het werkt ook voor video, kaarten en ingesloten vensters.
De browser weet hoe ver je gescrold bent. Zodra een afbeelding in de buurt komt, wordt hij opgehaald. Bereik je hem nooit, dan wordt hij ook nooit geladen.
Waar de winst zit
In alles onder de vouw. Wat direct in beeld staat, moet gewoon meteen geladen worden. Alles daaronder is uitstelbaar.
Dat scheelt niet alleen laadtijd maar ook dataverbruik. Bij een bezoeker met een beperkte bundel telt dat mee, ook al ziet hij het niet.
Hoe je het aanzet
Sinds een paar jaar zit het in de browser zelf. Je zet een enkel kenmerk op een afbeelding en de rest gaat vanzelf.
In WordPress gebeurt dat automatisch voor afbeeldingen in je inhoud. Je hoeft daar dus niets voor te installeren, in tegenstelling tot een paar jaar geleden.
Waar het misgaat zijn achtergrondafbeeldingen en beeld dat via een paginabouwer wordt geplaatst. Die vallen buiten de automatische regeling en moeten apart worden ingesteld.
Wanneer je het niet gebruikt
Dit is het deel dat vaker misgaat dan het aanzetten zelf.
Drie plekken waar je het uitzet
De afbeelding in je hero, want die staat direct in beeld.
Zet je het daar wel aan, dan werkt het averechts. De browser wacht dan met het belangrijkste beeld van je pagina. Precies dat wordt gemeten als je grootste zichtbare element.
Kost het je vindbaarheid?
Bij de moderne aanpak niet. Google voert scripts uit en scrolt door je pagina, dus je afbeeldingen worden gewoon gevonden.
Bij oudere oplossingen met eigen scripts lag dat anders. Stond het echte adres pas na het scrollen in de code? Dan miste een zoekmachine je afbeelding.
Gebruik dus de ingebouwde methode en niet een plugin uit 2016. Meer over hoe je pagina wordt opgebouwd lees je bij frontend.
Video en kaarten
Juist daar valt de meeste winst te halen. Een videospeler kan zwaarder wegen dan je hele pagina.
Bij een ingesloten venster werkt een plaatshouder nog beter. Eerst een afbeelding met een afspeelknop, pas na een klik de echte speler.
Wat je zelf kunt controleren
Open de ontwikkelaarstools van je browser, ga naar het netwerkverkeer en scroll langzaam naar beneden.
Zie je afbeeldingen pas binnenkomen terwijl je scrolt? Dan werkt het. Staat alles er direct, dan valt er winst te halen.
Let op je paginabouwer
Achtergrondafbeeldingen en beeld dat via een bouwer wordt geplaatst, vallen buiten de automatische regeling van WordPress.
Die moeten apart worden ingesteld. Dat wordt bij oplevering regelmatig vergeten, juist omdat het bij gewone afbeeldingen wel vanzelf gaat. Dat scheelt laadtijd en het lost meteen je toestemmingsvraag op. Meer daarover lees je bij iframe en bij embedden.
Combineer het geheel met een cache, dan hoeft dat werk niet bij elk bezoek opnieuw. Hoeveel het precies oplevert, lees je bij pagespeed.
Meer vragen over Lazy loading
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is lazy loading?
Hoe zet je lazy loading aan in WordPress?
Wanneer moet je lazy loading juist niet gebruiken?
Is lazy loading slecht voor je vindbaarheid?
Werkt lazy loading ook voor video’s en kaarten?
Hoeveel scheelt lazy loading in laadtijd?
Wat is lazy loading?
In de meeste gevallen hoef je niets te doen. Sinds een paar jaar zit het in de browser zelf ingebouwd.
Je zet een enkel kenmerk op een afbeelding en de rest gaat vanzelf. WordPress doet dat automatisch voor afbeeldingen in je inhoud.
Dat scheelt een plugin. Een paar jaar geleden had je daar nog wel iets voor nodig, en die adviezen staan nog overal op internet.
Waar het misgaat zijn achtergrondafbeeldingen en beeld dat via een paginabouwer wordt geplaatst. Die vallen buiten de automatische regeling.
Controleer dat dus na oplevering. Open de ontwikkelaarstools van je browser, kijk bij het netwerkverkeer en scroll langzaam naar beneden. Zie je afbeeldingen pas binnenkomen terwijl je scrolt, dan werkt het.
Vraag je bouwer of dit ook geldt voor je achtergrondafbeeldingen. Die vallen buiten de automatische regeling en worden daardoor het vaakst vergeten. Vraag ook of het bij je paginabouwer goed staat, want die regelt het los.
Hoe zet je lazy loading aan in WordPress?
Lazy loading is het uitstellen van het laden van onderdelen tot ze nodig zijn. Meestal gaat het om afbeeldingen, maar het werkt ook voor video, kaarten en ingesloten vensters.
Op een gemiddelde pagina staan vijftien afbeeldingen. Je bezoeker ziet er bij het openen twee. De overige dertien worden wel opgehaald, terwijl niemand ze bekijkt.
Bij de helft van je bezoekers wordt er nooit ver genoeg gescrold om ze in beeld te krijgen. Dat is werk waar niemand iets aan heeft.
Met lazy loading haal je een afbeelding pas op zodra hij bijna in beeld komt. De browser weet hoe ver je gescrold bent en handelt daarnaar.
Voor de bezoeker is dat onzichtbaar, want er zit altijd een marge in. Hij ziet het beeld gewoon staan zodra hij er is. Meer over de winst lees je bij pagespeed.
Kijk eens naar een eigen pagina met veel beeld. Hoeveel afbeeldingen staan erop, en hoeveel daarvan ziet iemand voordat hij besluit te blijven of weg te gaan?
Wanneer moet je lazy loading juist niet gebruiken?
Dit gaat vaker mis dan het aanzetten zelf, en het effect is averechts.
Zet het uit bij de afbeelding in je hero, want die staat direct in beeld. Zet het uit bij je logo in de header. En zet het uit bij alles wat boven de vouw staat op een telefoon.
Doe je dat niet, dan wacht de browser met het belangrijkste beeld van je pagina. Hij moet eerst uitrekenen of het wel in beeld komt.
Dat kost je precies daar tijd waar het zwaarst weegt. Google meet namelijk hoe snel je grootste zichtbare element verschijnt.
De vuistregel is simpel. Alles wat je ziet zonder te scrollen, laadt direct. Alles daaronder mag wachten. Meer daarover lees je bij hero.
Controleer dit specifiek voor je homepage. Daar staat je zwaarste beeld bovenaan, en juist daar werkt uitstellen averechts. Test het daarna op een telefoon, want daar valt de vouw hoger dan je denkt.
Is lazy loading slecht voor je vindbaarheid?
Bij de moderne aanpak niet. Google voert scripts uit en scrolt door je pagina, dus je afbeeldingen worden gewoon gevonden en opgenomen.
Bij oudere oplossingen lag dat anders. Die werkten met eigen scripts die het echte adres van een afbeelding pas invulden na het scrollen.
Een zoekmachine zag dan een lege verwijzing en nam de afbeelding niet op. Dat kostte je posities in Google Afbeeldingen.
Gebruik dus de ingebouwde methode en niet een plugin uit 2016. Draait er nog zo’n oude oplossing op je site, dan is dat een goede reden om hem eruit te halen.
Controleer daarna of je afbeeldingen nog gevonden worden. Zoek op je eigen bedrijfsnaam in Google Afbeeldingen en kijk of je werk erbij staat.
Zoek eens op je eigen bedrijfsnaam in Google Afbeeldingen. Staat je werk er niet bij, dan is dat een aanwijzing dat er iets misgaat met het laden. Draait er nog een oude plugin voor dit doel? Haal die er dan uit.
Werkt lazy loading ook voor video's en kaarten?
Juist daar valt de meeste winst te halen. Een videospeler kan zwaarder wegen dan je hele pagina.
Een ingesloten venster laadt een complete andere website met eigen scripts en opmaak. Staan er drie op een pagina, dan merkt je bezoeker dat direct op zijn telefoon.
Bij video werkt een plaatshouder nog beter dan uitstellen. Je toont een afbeelding met een afspeelknop, en pas na een klik wordt de echte speler geladen.
Dat scheelt niet alleen laadtijd. Het lost meteen je toestemmingsvraag op, want er gaat pas iets naar de andere partij als je bezoeker dat wil.
Zo sla je twee vliegen in een klap. Meer daarover lees je bij iframe.
Tel het aantal ingesloten vensters op je drukste pagina. Meer dan een is bijna altijd te veel, zeker op mobiel internet. Vervang de rest door een afbeelding met een afspeelknop, dat scheelt het meeste. Dat is de snelste winst op een pagina met video erop.
Staan er veel afbeeldingen op je website en laadt hij traag? Stuur me de link via het formulier hieronder. Ik kijk of je beeld pas laadt wanneer het nodig is, en of het juist niet is uitgesteld waar dat wel moet. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Uitgesteld laden, luiladen, vertraagd laden
