Snellere websites met lazy loading

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

• Er wordt minder data gedownloaded
• De pagina wordt in eerste instantie veel sneller geladen
• Er treedt geen verspringende content meer op.
• Minder requests voor de server

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:

• De pagina’s worden 17% sneller ingeladen
• Dataverbruik is met 30% gedaald
• De server hoeft 20% minder requests te verwerken

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.