Lazy loading voor video’s implementeren
Senior SEO-specialist
Video’s maken je content rijker, maar ze zijn ook zwaar. Standaard embeds laden direct bij paginabezoek – wat de laadtijd vertraagt en je Core Web Vitals negatief beïnvloedt. De oplossing: lazy loading. In dit artikel laat ik zien hoe je video’s pas laadt zodra ze in beeld komen, zonder externe plug-ins of performanceproblemen.
1. Waarom lazy loading voor video?
Een standaard YouTube- of Vimeo-embed laadt bij paginabezoek automatisch meerdere externe scripts, thumbnails en iframe-resources.
Nadelen:
- Trage LCP (Largest Contentful Paint)
- Lagere PageSpeed-score
- Slechtere mobiele performance
- Onnodig dataverbruik bij video’s onderaan de pagina
Lazy loading zorgt ervoor dat de video pas geladen wordt zodra de bezoeker ernaartoe scrollt.
2. Werking: van afbeelding naar iframe bij scroll
De lazy load-techniek werkt als volgt:
- Je toont een statische thumbnail (bijv. JPG of WebP)
- Bij scrollen (via de Intersection Observer API) vervang je deze thumbnail door de daadwerkelijke <iframe>
- Resultaat: sneller laden, geen render-blocking scripts, betere gebruikerservaring
3. HTML + JavaScript voorbeeld (YouTube)
HTML:
html
<div class="video-wrapper" data-video-id="dQw4w9WgXcQ">
<img src="https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video preview" loading="lazy">
<button class="play-button" aria-label="Video afspelen">▶</button>
</div>
CSS (optioneel):
css
.video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
cursor: pointer;
}
.video-wrapper img {
width: 100%;
display: block;
}
.play-button {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
background: none;
border: none;
color: white;
}
JavaScript (Intersection Observer):
html
<script>
document.addEventListener('DOMContentLoaded', function () {
const videos = document.querySelectorAll('.video-wrapper');
const loadIframe = (el) => {
const videoId = el.getAttribute('data-video-id');
const iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'autoplay; encrypted-media');
iframe.setAttribute('allowfullscreen', '');
iframe.style.width = '100%';
iframe.style.height = '100%';
el.innerHTML = '';
el.appendChild(iframe);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadIframe(entry.target);
observer.unobserve(entry.target);
}
});
});
videos.forEach(video => {
observer.observe(video);
});
});
</script>
Aan de slag met SEO? Neem gerust contact op.
4. Alternatief: lazy loading met plugins (bij CMS)
Voor WordPress-sites:
- WP Rocket – Lazy load voor afbeeldingen en video’s
- Lazy Load for Videos – Specifieke plugin voor video
- LiteSpeed Cache – Alles-in-één optimalisatie, inclusief video lazy loading
Let op: controleer visueel of embedded video’s nog correct worden geladen na installatie.
5. Extra optimalisatie: thumbnails comprimeren
De meeste video-thumbnails zijn 480px of groter. Optimaliseer deze met:
- WebP-formaat (kleiner, zelfde kwaliteit)
- Compressie via Squoosh
- loading=”lazy” op <img>
Gebruik ook een alt-tekst voor context + SEO.
Tot slot
Lazy loading voor video’s is een no-brainer: betere laadtijd, betere UX, en betere scores in Lighthouse/PageSpeed. Door een simpele combinatie van HTML, CSS en JS laad je video’s pas wanneer nodig – en voorkom je onnodige vertraging bij initieel bezoek.
