Lazy loading klinkt misschien niet direct heel positief, maar dat is het wel. Sterker nog: het is één van de eerste simpele dingen die je kunt doorvoeren om je website sneller en beter te laten presteren. Bij Elephant hebben we inmiddels veel ervaring met lazy loading. Wat zijn volgens ons de grootste voordelen, hoe kun jij dit toepassen en hoe zien wij de toekomst van lazy loading? Elephant’s front-ender Jochem neemt je mee.

Wat is lazy loading?

Laten we beginnen met uitleggen wat lazy loading precies is. Eigenlijk is het niets meer en niets minder dan ervoor zorgen dat afbeeldingen op een pagina later laden dan andere elementen én dat alleen de afbeeldingen in de viewport worden geladen. Van alles wat daarbuiten valt — de onderdelen die je pas ziet zodra je door de website scrollt — wordt de download gepauzeerd. Logischerwijs is de laadtijd daardoor korter dan wanneer alles in één keer wordt gedownload. Dat brengt een aantal voordelen met zich mee, voor zowel de beheerder als de gebruiker.

Voordeel 1: Snelheid

“Als een klant ons benadert met de vraag wat ze kunnen doen om pagespeed te optimaliseren dan zeg ik sinds kort: lazy loading inbouwen. Het is laagdrempelig, het kost weinig tijd en het is heel effectief”, aldus Jochem. Het grote voordeel van lazy loading is dat je eerste scherm direct wordt geladen omdat de browser daar prioriteit aan geeft en de gebruiker dus meteen iets kan zien of lezen. Er zit een verschil van tientallen punten in de pagespeed tussen een website met en zonder lazy loading. Het verbeteren van de pagespeed is de basis voor de volgende twee voordelen van lazy loading.

Voordeel 2: Positie in de zoekmachine (en dus meer relevant verkeer)

Pagespeed is een steeds belangrijkere indicator voor het bepalen van de ranking in de zoekmachine. Vooral op mobile ligt de focus hier op, volgens Google:

Bron: https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

Omdat lazy loading één van de makkelijkste manieren is om de pagespeed te optimaliseren, zorgt dit er indirect voor dat je website hoger in de zoekmachine komt. Hierdoor belandt er vervolgens logischerwijs meer verkeer op je website en daarmee verhoog je weer de kans om conversies te realiseren.

Voordeel 3: Gebruiksvriendelijkheid

Als bezoeker van een website wil je in principe maar één ding: dat je de inhoud van de pagina snel te zien krijgt. Als het te lang duurt of het lukt je niet om de website te laden, is de kans groot dat je meteen weer afhaakt. En dat is uiteraard zonde. Lazy loading zorgt ervoor dat de belangrijkste content direct beschikbaar is. Dus stel je internetverbinding wordt slechter, dan wordt in ieder geval de tekst geladen zodat de bezoeker op de website uit de voeten kan. Dit is trouwens ook de reden dat lazy loading belangrijker is op mobiel dan op desktop: op mobiel ben je afhankelijk van 3G of 4G en door niet alles direct in te laden maar dit gefaseerd te doen, kunnen bezoekers de belangrijkste onderdelen van de site altijd zo snel mogelijk ophalen. Dat komt de gebruikerservaring behoorlijk ten goede.

Voordeel 4: dataverbruik

Omdat lazy loaden werkt door te kijken naar “wat is er op dit moment zichtbaar op het scherm”, levert het ook een besparing op dataverbruik op. Neem als voorbeeld een reiswebsite waarin een uitgebreide kaart van 2MB grootte verborgen zit in een pop-up. In de oude situatie downloadde de browser van de gebruiker automatisch de kaart bij het laden van de volledige pagina. Na het implementeren van lazy loaden, wordt de uitgebreide kaart pas geladen op het moment dat de sitebezoeker de pop-up open klikt. De download van 2MB wordt pas gedaan als het echt nodig is.

We kunnen tot wel 70 procent data besparen op het laden van pagina’s. Dat scheelt nogal op je internetbundel!

Front-ender Jochem

Driedubbele winst

We hebben gezien dat we soms wel richting de 70 procent kunnen besparen op het laden van pagina’s en dat scheelt natuurlijk flink op je internetbundel. Bij een snelle internetverbinding merk je weinig van die besparing, maar als de verbinding trager is des te meer. Lazy loading is dus niet alleen voordelig als het aankomt op snelheid en gebruiksvriendelijkheid, maar ook als we kijken naar het dataverbruik. Wederom een belangrijk voordeel voor de gebruiker. Jochem: “Een van de dingen die wij voor gebruikers willen realiseren, is dat ze zo snel mogelijk de tekst op de pagina kunnen gaan lezen. Zonder lazy loading kan zijn dat tekst onzichtbaar blijft terwijl afbeeldingen nog gedownload worden. Door lazyloaden toe te passen zorgen we ervoor dat databundels niet worden geplunderd en dat onze bezoekers sneller bij de content kunnen komen die ze willen consumeren. En het is ook nog eens tof om te implementeren. Win-win-win!”

Onze techniek

Jochem vervolgt: “Toen het concept van lazy loading voor ons ging spelen, hebben we er bij Elephant voor gekozen dit integraal op te pakken. Het was toentertijd best wel een investering, maar inmiddels hebben we de werkwijze helemaal eigen gemaakt door het toe te voegen aan ons developer framework. Ook hebben we onze developers getraind in het toepassen van lazy loaden. Zodoende weten we inmiddels heel goed hoe we het op de juiste manier kunnen inzetten.”

De toekomst

Het lazy loaden van afbeeldingen was de eerste grote stap, maar er zijn natuurlijk nog veel meer elementen die je kunt lazy loaden. “Op de website van Elephant hebben we een draaiend olifantje ontworpen dat je als bezoeker te zien krijgt zolang de pagina nog niet volledig gedownload is. Dit zou je ook als een soort user feedback kunnen inzetten. Zo van: je bent nu even offline, probeer het straks nog een keer. Ook wil ik kijken naar het lazy loaden van CSS styles. Op dezelfde manier als afbeeldingen hoef je niet direct alle styles en scripts voor de volledige pagina te downloaden. Als een webpagina ergens onderin een slider met twintig logo’s heeft, maar de gebruiker komt maar tot de helft van de pagina voor hij doorklikt, is het vet zonde om die slider met twintig logo’s te laden. Met het lazy loaden van afbeeldingen hebben we de besparing van de twintig logo’s gerealiseerd, maar het zou nog mooier zijn als bijvoorbeeld de slider ook pas later wordt geïnitialiseerd. Dat scheelt rekenkracht en dus tijd. Lazy loaden heeft nog zoveel opties en voordelen, daar zijn we voorlopig nog niet mee klaar.”

Chat
Lazy loading toevoegen aan jouw site?

Neem dan contact op met Alen!