Snellere websites met lazy loading

20 mrt. 2017 | Door: Pascal Vleugels

Snellere websites met lazy loading

Hardlopers zijn doodlopers, wordt wel eens gezegd. Dit gaat niet op voor websites. Hoe sneller hoe beter! Snellere websites zorgen voor een betere gebruikerservaring. Een sneller ladende website wordt ook gewaardeerd door Google. Meerdere redenen dus om ervoor te zorgen dat de website zo snel mogelijk is!

Op alle Citynavigator websites is het mogelijk om de zogenaamde “Lazy Load” te activeren. Hiermee wordt er een speciale techniek ingeschakeld om alle afbeeldingen op de website efficiënter in te laden.

Wat is het probleem

Als er een pagina op de website geopend wordt, worden alle elementen op die pagina van boven naar beneden ingeladen. Dat betekent dat alle afbeeldingen dus direct worden ingeladen. Dit zorgt ervoor dat de hele pagina in 1 keer beschikbaar is, ook als er direct naar beneden gescrolled wordt.

Een nadeel van deze aanpak, is dat er dus ook afbeeldingen worden ingeladen die wellicht nooit bekeken worden. Door middel van “Lazy Loading” worden alleen de afbeeldingen ingeladen die ook daadwerkelijk in beeld zijn.

Daarnaast kan het dus ook enige tijd duren voordat de webpagina in zijn geheel is ingeladen (afhankelijk van de snelheid van de internetverbinding en het aantal afbeeldingen op de pagina). De laadtijd van de pagina wordt door Google gebruikt in de waardering in de zoekresultaten (snelle websites worden beter gewaardeerd en scoren dus beter in de ranking).

Aangezien alle afbeeldingen in 1 keer achter elkaar gedownload worden, kan het voorkomen dat een afbeelding nog niet gedownload is als er snel naar beneden gescrolled wordt. Op het moment dat de afbeelding klaar is met downloaden, wordt deze zichtbaar op de website. Dat kan ervoor zorgen dat de content van die pagina ineens naar beneden kan springen (omdat er ineens een afbeelding tussen de teksten ingeladen wordt).

Hoe werkt lazy load

Indien gebruik gemaakt wordt van “Lazy Load”, worden alleen de afbeeldingen gedownloaded die ook daadwerkelijk in beeld zichtbaar zijn. Alle overige afbeeldingen worden nog niet ingeladen. Zodra de pagina gescrolled wordt en er nieuwe afbeeldingen in beeld komen, worden ze ook daadwerkelijk pas gedownloaded. Zo wordt er dus enorm bespaard op het aantal afbeeldingen dat gedownload wordt.

Daarnaast wordt ook alvast een ruimte voor de afbeeldingen op de pagina gereserveerd. Zo is voor de gebruiker duidelijk dat daar nog een afbeelding ingeladen wordt, en springt de content ook niet naar beneden toe als de afbeelding klaar is met downloaden.

Wat zijn de voordelen

Wat levert het op: de eerste resultaten

Naar aanleiding van de eerste interne tests, zien we de eerste resultaten. In de komende periode worden er nog meerdere optimalisaties doorgevoerd waardoor we nog aanzienlijke snelheidswinst kunnen behalen:

Bovenstaande cijfers zijn gebaseerd op een aantal interne tests. Vanaf heden wordt de Lazy Load functionaliteit op alle Citynavigator websites geactiveerd. Op dat moment kunnen we ook nieuwe tests uitvoeren om het exacte effect te meten.

Pascal Vleugels
Bekijk profiel