Wat is lazy loading?

Lazy loading is een techniek waarbij afbeeldingen, video’s en andere onderdelen van een pagina pas worden geladen wanneer de bezoeker er bijna naartoe scrolt. Daardoor laadt de pagina bij het openen sneller en worden er minder gegevens verstuurd. Browsers ondersteunen dit standaard met het HTML-attribuut loading.

Waarom is lazy loading belangrijk?

Snellere pagina’s: bij het openen hoeft er minder te worden geladen.
Minder dataverbruik: vooral handig op mobiele verbindingen.
Betere Core Web Vitals: een lichtere startpagina helpt bij de laadsnelheid, mits je het goed toepast.

Voorbeelden van lazy loading

<img src="product.jpg" loading="lazy" alt="Rode hardloopschoen">
Een productoverzicht van 60 artikelen waarvan alleen de eerste rij direct laadt.
Een ingesloten video die pas laadt als de bezoeker bij de video aankomt.

Hoe pas je lazy loading toe?

Voeg loading="lazy" toe aan afbeeldingen en video’s die lager op de pagina staan. Gebruik het niet voor de eerste afbeelding bovenaan, want die bepaalt je LCP en moet juist snel laden. Geef afbeeldingen vaste afmetingen om verspringen te voorkomen (technische SEO).

Lazy loading