Lazy loading voor een snellere website

Wat is lazy loading?

Je bent het vast wel eens tegengekomen op websites, misschien niet bewust, want meestal merk je er nauwelijks iets van. Bij lazy loading wordt alleen het deel van een website dat je als gebruiker kan zien geladen. Dit is in veel gevallen van toepassing op afbeeldingen. Deze worden dan pas ingeladen op het moment dat het nodig is. Dus de afbeeldingen die onderaan op de webpagina staan worden simpelweg nog niet aangeroepen. Dat scheelt vaak laadtijd en voorkomt het onnodig downloaden van afbeeldingen. 

De reden dat veel websites alleen lazy loading toepassen op afbeeldingen is vrij duidelijk. Afbeeldingen bevatten vaak de grootste bestandsgrootte op een pagina. Dit kan invloed hebben op de laadtijd van de website of webshop. Immers moeten de afbeeldingen gedownload worden voor het voltooien van pagina’s.

Het toepassen van de lazy loading techniek zorgt er dus voor dat niet-zichtbare - en op dat moment overbodige - afbeeldingen pas worden geladen als ze in beeld komen (in de viewport). In eerste instantie zullen alleen de afbeeldingen die above the fold staan geladen worden, in plaats van alle afbeeldingen op de pagina. Naast dat het positief is voor de laadtijd, verbetert het ook de gebruikerservaring.  

Wat zijn de voordelen van lazy loading?

Het concept is leuk maar wat heb je er aan? Lazy loading biedt veel voordelen. Het worden er bovendien ook steeds meer aangezien de techniek én de browsers blijven veranderen en verbeteren. Op dit moment zijn vier grote voordelen te onderscheiden: laadtijd, databesparing, energiebesparing en zoekmachineoptimalisatie.

Laadtijd

In de wereld van het web betekent sneller vrijwel altijd beter. Door lazy loading wordt de laadsnelheid van de webpagina beter. Uit onderzoeken blijkt dat op snellere sites minder mensen afhaken en meer conversies (verkopen of aanvragen bijvoorbeeld) worden gerealiseerd.

De tevredenheid van de gebruikers stijgt wat erg belangrijk is voor de gebruikerservaring. Dit wordt ook wel de user experience of UX genoemd. Tevreden gebruikers en fijne ervaringen zorgen voor een positieve merkassociatie wat op zijn beurt ook weer goed is voor het imago van je bedrijf.

De laadtijd van een pagina is ook gebonden aan de bounce rate, oftewel het percentage bezoekers die niet meer dan één pagina bekijken en dan de site direct weer verlaten. Stel je voor: je bent op zoek naar kleding en komt in een webshop terecht. Het duurt lang voordat de items op de pagina geladen worden. Wacht je geduldig óf ga je naar een andere website? Dit laatste is iets wat de meeste gebruikers doen, omdat ze niet snel genoeg vinden wat ze zoeken. Als je de laadtijd van een pagina verbetert, zal de bounce rate dus ook dalen wat een positief effect heeft op het conversiepercentage.

Databesparing

Als er bijvoorbeeld zes nieuwsberichten op één pagina staan, met elk een afbeelding erbij, dan kan dat soms wel 2 MB zijn. Een gebruiker die deze pagina op zijn telefoon laadt, moet  iedere keer bij het bezoeken van de pagina, 2 MB van zijn eigen databundel gebruiken. En dit terwijl de afbeelding misschien niet eens in de viewport wordt weergegeven en je deze dus helemaal niet te zien krijgt. Zonde dus!

Door middel van lazy loading worden deze zware elementen van de website pas geladen als het écht nodig is. Naast databesparing scheelt het de gebruikers, met een beperkte databundel, ook nog eens wat geld.

Energiebesparing

Het laden van een pagina met zware afbeeldingen kost veel rekenkracht. De processor van je apparaat moet op dat moment hard werken. Bij de toepassing van lazy loading is de webpagina minder zwaar en is er minder rekenkracht nodig om afbeeldingen te laden bij de eerste weergave van de pagina aan de gebruiker. In het geval dat de gebruiker niet naar beneden scrollt, is er in totaal ook minder rekenkracht nodig. Hierdoor laadt de pagina sneller en bespaar je ook nog eens batterij van je telefoon of laptop. Hoef je deze ook weer  minder snel op te laden.

SEO

Zoekmachineoptimalisatie; misschien wel dé belangrijkste reden om voor lazy loading te kiezen. Het is alweer drie jaar geleden dat Google aankondigde dat zij, naast de al bestaande SEO factoren, ook op de laadsnelheid van pagina’s zouden gaan letten bij de ranking in de zoekmachine. Sindsdien is de performance van websites, en het effect daarvan op de user experience, steeds belangrijker geworden.

Dat we zo’n 15 jaar geleden een laadtijd van 10 seconden acceptabel vonden, kunnen we ons nu haast niet meer voorstellen. Tegenwoordig adviseert google een laadtijd van minder dan 3 seconden. Zit een webpagina boven die grens dan zal dit invloed hebben op het bounce rate- en conversiepercentage wat weer negatieve gevolgen heeft voor de user experience. Bovendien heb je kans dat een trage laadtijd je ranking in Google verslechtert.

Een snelle laadtijd daarentegen bevorderd juist de ranking in Google waardoor je webpagina meer bezoekers aan kan trekken. En laat lazy loading nou een uitermate geschikt middel zijn om je laadtijd te verbeteren.

Hoe werkt lazy loading?

Lazy loading was tot nog niet zo lang geleden een tijdrovend proces. Dit omdat het alleen te implementeren was door middel van Javascript. Sinds 2019 kan het allemaal een stuk sneller. Door middel van een stukje HTML code bij de afbeelding wordt lazy loading toegepast, dit wordt ook wel native lazy loading genoemd. Zo weet de browser dat de afbeelding dus pas later geladen moet worden.

Het is trouwens niet zo dat native lazy loading functioneel is in alle soorten browsers. Het is alleen nog maar mogelijk met moderne browsers zoals Chrome, Firefox en Edge. In Safari kan deze vorm van lazy loading daarentegen nog niet worden gebruikt.

Op tijd afbeeldingen laden

Alle afbeeldingen boven de vouw van de webpagina zijn direct zichtbaar en worden dus normaal geladen. Het is alleen niet efficiënt als afbeeldingen pas geladen worden als deze in het beeld van de gebruiker komen. Zij zien dan dat de afbeelding aan het laden is en haken eerder af omdat dit voor hun gevoel te veel tijd in beslag neemt. Daarom is het mogelijk om afbeeldingen in te laden als deze zich op een bepaalde afstand van de viewport bevinden.

Dit moet je je als volgt voorstellen: onder de viewport bevindt zich een marge van een bepaalde hoeveelheid pixels. Chrome gebruikt op snelle verbindingen, zoals 4G, een afstand van 1250 pixels. Als de gebruiker naar beneden scrolt en een afbeelding komt binnen deze marge terecht, dan zal de afbeeldingen geladen worden. Op langzamere verbindingen zoals 3G worden afbeeldingen op een afstand van 2500px al geladen omdat dit meer tijd in beslag neemt. Deze grens van de afstand in pixels waarbij afbeeldingen worden ingeladen noemt men ook wel de distance-from-viewport threshold. Hierdoor is de kans veel groter dat de afbeelding geladen is als deze in beeld komt bij de gebruiker.

Lazy loading toepassen

Omdat de snelheid van websites steeds belangrijker wordt voor de vindbaarheid, wordt ook de toegevoegde waarde van lazy loading steeds groter. Het is bewezen dat afbeeldingen één van de zwaarste elementen zijn binnen een website en door lazy loading toe te passen wordt je site dus ook beduidend sneller. Naast goede vindbaarheid zal ook de gebruikservaring een boost krijgen.

Logisch dus dat wij ons hierin verdiepen en dit graag mee willen nemen in toekomstige projecten. Ook op bestaande sites kan deze techniek worden toegepast waardoor je snel en eenvoudig je website een boost kunt geven. Wil jij dat nou ook? Wij helpen je graag!