Wat is lazy loading?

Lazy loading stelt het laden van een deel van een pagina, zoals een afbeelding of een ingesloten iframe, uit totdat dit daadwerkelijk in de buurt van het zichtbare venster scrolt. Voor een YouTube-embed betekent dit dat het spelerscript en de thumbnail-voorbeeldweergave niet direct laden zodra de pagina opent, maar pas wanneer een bezoeker het bijna gaat zien.

Waarom dit belangrijk is voor embeds

Een YouTube-iframe is relatief zwaar om te laden. Een pagina met meerdere embeds (bijvoorbeeld een blogpost met een bespreking van vijf video’s) kan merkbaar trager aanvoelen als ze allemaal direct laden, waarom lazy loading een veelgehoorde aanbeveling is voor Core Web Vitals en algemene paginasnelheid.

Hoe je het inschakelt

Moderne browsers ondersteunen het native loading=”lazy”-attribuut direct op een <iframe>, zonder extra script. De embed-code generator voegt dit attribuut standaard toe.

Hoe native lazy loading onder de motorkap werkt

Wanneer een browser een element met loading=”lazy” tegenkomt, maakt hij geen placeholder aan om vervolgens onbeperkt te wachten; in plaats daarvan berekent hij een globale afstandsdrempel vanaf het huidige zichtbare venster en start pas het daadwerkelijke netwerkverzoek zodra het element die drempel nadert, meestal enkele honderden tot duizend pixels voordat het zichtbaar zou worden, afhankelijk van de browser en netwerkomstandigheden. Dit betekent dat een lazy-loaded embed nog steeds op tijd laadt om zichtbaar te zijn als een bezoeker ernaartoe scrolt, zonder de laadkosten te betalen voor embeds ver onderaan de pagina waar een bezoeker misschien nooit naartoe scrolt.

Een praktisch voorbeeld

Een lang artikel met een bespreking van tien producten, elk met een ingesloten demovideo, heeft enorm veel baat bij lazy loading: zonder deze techniek zouden alle tien spelers hun scripts en thumbnails gelijktijdig opvragen bij het laden van de pagina; met loading="lazy" op elke iframe laden alleen de een of twee video’s bovenaan direct, terwijl de rest geleidelijk laadt terwijl de bezoeker naar beneden scrolt.

Lazy loading versus click-to-load

Lazy loading en click-to-load lossen een vergelijkbaar probleem op met verschillende afwegingen. Lazy loading laadt uiteindelijk toch elke embed automatisch zodra een bezoeker er dichtbij scrolt, wat simpel te implementeren is (één HTML-attribuut) maar geen middelen bespaart voor embeds waar een bezoeker wel voorbij scrolt en ze ziet. Click-to-load gaat verder en laadt de echte iframe pas als een bezoeker expliciet op een placeholder klikt, wat meer implementatiewerk vereist maar nul verzoeken garandeert voor video’s die nooit daadwerkelijk zijn afgespeeld. Voor de meeste sites biedt native lazy loading, al standaard gebruikt in onze embed-code generator, de beste balans tussen eenvoud en prestatievoordeel.

Als vuistregel: pas lazy loading toe op elke embed behalve degene die al direct zichtbaar is zodra een pagina laadt, zoals een heldenvideo helemaal bovenaan.

Browserondersteuning voor native lazy loading is inmiddels breed genoeg bij moderne Chrome, Firefox, Safari en Edge dat een JavaScript-gebaseerde lazy loading-bibliotheek zelden nog nodig is specifiek voor iframes, hoewel oudere bibliotheekgebaseerde aanpakken nog in gebruik zijn op veel bestaande sites die zijn gebouwd voordat native ondersteuning er was.

Veelgestelde vragen