Implementieren Sie träges Laden für Videos
Senior SEO-specialist
Videos machen Ihren Inhalt reichhaltiger, aber sie sind auch schwer. Standardeinbettungen werden sofort beim Besuch der Seite geladen – das verlangsamt die Ladezeit und wirkt sich negativ auf Ihre Core Web Vitals aus. Die Lösung: träges Laden. In diesem Artikel zeige ich Ihnen, wie Sie Videos erst dann laden, wenn sie angezeigt werden, ohne externe Plug-ins oder Leistungsprobleme.
1. Warum träges Laden bei Videos?
Eine standardmäßige YouTube- oder Vimeo-Einbettung lädt automatisch mehrere externe Skripte, Thumbnails und Iframe-Ressourcen bei Seitenaufrufen.
Benachteiligungen:
- Langsam LCP (Largest Contentful Paint)
- Niedrigerer PageSpeed-Wert
- Schlechtere mobile Leistung
- Unnötiger Datenverbrauch durch Videos am Ende der Seite
Lazy Loading sorgt dafür, dass das Video erst geladen wird, wenn der Besucher zu ihm scrollt.
2. Operation: vom Bild zum iframe beim Scrollen
Die Technik des „Lazy Load“ funktioniert folgendermaßen:
- Sie zeigen eine statische Miniaturansicht an (z.B. JPG oder WebP)
- Ersetzen Sie beim Scrollen (über die Intersection Observer API) diese Miniaturansicht durch den eigentlichen <iframe>
- Ergebnis: schnelleres Laden, keine Rendering-blockierenden Skripte, bessere Benutzerfreundlichkeit
3. HTML + JavaScript Beispiel (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 (optional):
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. Alternative: träges Laden mit Plugins (mit CMS)
Für WordPress-Websites:
- WP Rocket – Lazy Load für Bilder und Videos
- Lazy Load für Videos – Spezielles Plugin für Videos
- LiteSpeed Cache – All-in-One-Optimierung, einschließlich verzögertem Laden von Videos
Hinweis: Überprüfen Sie visuell, ob eingebettete Videos nach der Installation noch korrekt geladen werden.
5. Zusätzliche Optimierung: Miniaturbilder komprimieren
Die meisten Video-Thumbnails sind 480px oder größer. Optimieren Sie sie mit:
- WebP-Format (kleiner, gleiche Qualität)
- Komprimierung über Squoosh
- loading=“lazy“ auf <img>
Verwenden Sie auch einen Alt-Text für Kontext + SEO.
Zusammenfassend
Lazy Loading für Videos ist ein Kinderspiel: bessere Ladezeit, bessere UX und bessere Werte in Lighthouse/PageSpeed. Durch eine einfache Kombination aus HTML, CSS und JS laden Sie Videos nur bei Bedarf – und vermeiden unnötige Verzögerungen beim ersten Besuch.
