Lazy loading is een manier om de browser te laten wachten. In plaats van elke afbeelding en video meteen te downloaden zodra een pagina opent, haalt hij alleen op wat zichtbaar is en laadt hij de rest pas terwijl de bezoeker ernaartoe scrolt. De bovenkant verschijnt sneller omdat er minder vooraf opgehaald hoeft te worden.
Denk aan een buffet versus een vast menu. Een vast menu brengt alle gangen tegelijk en het meeste wordt koud terwijl je het eerste bord eet. Een buffet serveert elk gerecht zodra je erbij komt. Lazy loading is dat buffet: niets komt eerder dan je het nodig hebt. Het werkt samen met goede image optimization en verbetert direct de laadtijd op beeldzware pagina’s.
Op moderne sites heb je er zelden extra code voor nodig. Met loading="lazy" op een afbeelding of iframe regelt de browser de timing zelf, en frameworks als Astro en Next zetten het vaak standaard aan. Voor lange feeds is het hetzelfde idee achter infinite scroll, waar nieuwe items laden zodra je de onderkant nadert.
Er is één regel die het onthouden waard is. De grote afbeelding bovenaan, die meetelt voor je Largest Contentful Paint-score, moet meteen laden in plaats van lazy, anders kan het de gevoelde snelheid juist schaden. De andere valkuil is layout shift: reserveer de breedte en hoogte van de afbeelding, zodat de pagina niet verspringt als elke afbeelding inklapt, want dat irriteert lezers en drukt je scores. En lazy load ook niet te fanatiek. Stel je iets uit dat net onder de vouw staat, dan scrolt de bezoeker naar een leeg vak dat pas begint te laden zodra hij er is, wat trager voelt dan helemaal geen lazy loading.
Bij TopDevs lazy loaden we galerijen, lange artikelafbeeldingen en media onder de vouw, terwijl we de hero meteen laden, zodat pagina’s snel aanvoelen zonder de eerste indruk te breken.
