Wanneer iemand je pagina opent, ziet hij eerst alleen het bovenste stuk. Toch laden veel sites meteen alles: alle afbeeldingen, alle onderdelen, ook wat helemaal onderaan staat en misschien nooit bekeken wordt. Lazy loading draait dat om: laden wat in beeld komt, de rest pas op het moment dat het nodig is.

Hoe het aanvoelt

De bezoeker ziet het bovenste deel vrijwel meteen, want alleen dat wordt eerst opgehaald. Scrollt hij verder, dan laden de volgende onderdelen net op tijd bij, vaak zo soepel dat het niet opvalt. Het effect is een site die direct bruikbaar voelt, in plaats van een die eerst alles wil binnenhalen voordat je iets kunt doen.

Waar het helpt

// waarom de hele bibliotheek inladen als de bezoeker alleen de eerste pagina leest?

Het is daarmee een van de weinige snelheidswinsten die vrijwel niets kosten en niets in de weg zitten. Mits met beleid toegepast, merkt de bezoeker er alleen het prettige van: een site die meteen klaar lijkt te zijn.

Minder data, blije telefoons

Lazy loading is niet alleen prettig voor de snelheid, maar ook voor het dataverbruik. Een bezoeker die maar het bovenste deel van een lange pagina leest, downloadt nooit de tientallen beelden daaronder. Op een mobiele verbinding met een datalimiet is dat een merkbaar verschil, en het bespaart ook jouw server onnodig werk.

Met beleid toepassen

Lazy loading is krachtig, maar je moet het verstandig inzetten. Wat direct in beeld staat, hoor je juist niet uit te stellen, anders zie je een lege plek voordat het bijlaadt. De kunst zit in het juiste evenwicht, en dat is precies waar een doordachte technische opzet het verschil maakt.

Moderne browsers ondersteunen lazy loading bovendien voor een groot deel uit zichzelf, met een eenvoudige aanwijzing in de code. Je hoeft er dus geen zwaar systeem voor binnen te halen. Het is een lichte ingreep met een effect dat bezoekers direct merken.

Wil je dat je site sneller bruikbaar voelt? Bespreek je project.

Verder lezen: Afbeeldingen optimaliseren · Caching uitgelegd