Een YouTube embed haalt de eigen scripts van de speler en een voorbeeldminiatuur op zodra hij laadt, en op een pagina met meerdere video’s telt dat snel op. Zo houd je alles snel zonder ingesloten video op te geven.
Waarom embeds de paginasnelheid beïnvloeden
Zelfs voordat een bezoeker op afspelen drukt, doet een ingesloten iframe al verzoeken voor de spelerbronnen van YouTube en een miniatuurafbeelding. Op een reviewpagina met vijf ingesloten video’s bijvoorbeeld zijn dat vijf sets verzoeken die tegelijk afgaan bij het laden van de pagina, en die concurreren met de eigen bronnen van je site om bandbreedte en weergavetijd.
Oplossing 1: native lazy loading
De eenvoudigste oplossing is een enkel HTML attribuut. Door loading=”lazy” toe te voegen aan een <iframe> vertel je de browser om het laden uit te stellen tot het element bijna in beeld scrollt:
<iframe src="..." loading="lazy" ...></iframe>Dit wordt ondersteund door alle moderne browsers, vereist geen JavaScript, en is de wijziging met de meeste waarde voor een pagina met ingesloten video onder de vouw.
Oplossing 2: klik om te laden
Voor pagina’s met veel embeds is een nog agressievere optie om helemaal geen iframe te laden totdat een bezoeker erop klikt. Toon een statische miniatuurafbeelding, opgehaald van de openbare thumbnail URL’s van YouTube (zie onze thumbnail viewer), met een afspeelknop erover, en wissel pas naar de echte iframe bij een klik. Dit betekent dat er geen enkel verzoek naar YouTube gaat voor video’s die een bezoeker nooit daadwerkelijk afspeelt.
Oplossing 3: laat alleen autoplay wat het nodig heeft
Video automatisch laten afspelen voegt echt werk toe zodra de pagina laadt: de speler moet direct bufferen in plaats van te wachten op de intentie van de gebruiker. Reserveer autoplay voor werkelijk belangrijke embeds, en vertrouw voor de rest op lazy loading plus een zichtbare afspeelknop.
De impact meten
Tools zoals Google PageSpeed Insights of het Lighthouse paneel van je eigen browser signaleren niet geoptimaliseerde embeds van derden rechtstreeks, en laten je de laadtijden voor en na het toepassen van lazy loading vergelijken. Op pagina’s met meerdere video’s is het verschil meestal duidelijk zichtbaar, zowel in de cijfers als in het ervaren laadgevoel.
Standaard ingebouwd
Onze embed code generator voegt loading=”lazy” standaard toe aan elke gegenereerde embed, dus deze optimalisatie is al geregeld zodra je de code kopieert.