Wichtige Takeaways
- Native Video-Elemente sollten
loading="lazy"undpreload="none"verwenden, um das automatische Herunterladen von Videodaten zu verhindern.- YouTube- und Vimeo-Embeds nutzen ein „Fassaden“-Muster – zeige ein anklickbares Vorschaubild an und lade das Iframe erst beim Klicken.
- Hintergrundvideos sollten nur geladen werden, wenn der entsprechende Bereich in den Sichtbereich scrollt, nicht beim Laden der Seite.
- Nicht optimierte Videos sind einer der Hauptgründe für langsame Ladezeiten bei Shopify-Seiten.
Videos in einem Shopify-Store können überzeugend sein – Produktdemos, Markenfilme, How-to-Content. Aber Videos gehören auch zu den schwersten Assets im Web. Ein einziges nicht optimiertes eingebettetes Video kann die Ladezeit deiner Seite um Sekunden verlängern, selbst für Besucher, die einfach daran vorbeiscrollen, ohne es anzusehen.
Lazy Loading für Videos ist die Lösung.
So fügst du Lazy Loading zu nativen Videos in Shopify hinzu
Für selbst gehostete Videodateien, die in das Asset-System von Shopify oder ein CDN hochgeladen wurden, verwendest du die nativen Lazy-Loading-Attribute von HTML.
<video
src="{{ section.settings.video_url }}"
poster="{{ section.settings.poster_image | img_url: '1200x' }}"
loading="lazy"
preload="none"
muted
playsinline
loop
>
Dein Browser unterstützt kein Video.
</video>Wichtige Attribute:
loading="lazy" — weist den Browser an, das Laden der Videoquelle zu verzögern, bis sie benötigt wird.
preload="none" — verhindert, dass der Browser Videodaten herunterlädt, bevor der Nutzer mit dem Player interagiert. Ohne dieses Attribut rufen Browser oft vorab Video-Metadaten oder sogar die ersten Sekunden des Videos ab, was Bandbreite verschwendet.
poster — zeigt ein Standbild an, solange das Video noch nicht geladen ist. Füge dies immer hinzu. Ohne Poster sehen Besucher ein leeres graues Rechteck, bis das Video lädt. Das Poster-Bild sollte vorab geladen werden (nicht per Lazy Loading).
Das Fassaden-Muster für YouTube- und Vimeo-Embeds
YouTube- und Vimeo-Iframes gehören zu den größten Performance-Problemen in Shopify-Stores. Jeder davon lädt mehrere Megabyte an Skripten von den YouTube/Vimeo-Servern, selbst wenn der Besucher das Video nie ansieht.
Das Fassaden-Muster: Ersetze das Iframe durch ein anklickbares Thumbnail-Bild. Wenn der Besucher auf „Play“ klickt, ersetze das Bild durch das tatsächliche Iframe.
Hier ist eine einfache Implementierung:
<div class="video-facade" data-video-id="DEINE_YOUTUBE_ID">
<img
src="https://img.youtube.com/vi/DEINE_YOUTUBE_ID/maxresdefault.jpg"
alt="Video-Thumbnail"
loading="lazy"
style="width:100%; cursor:pointer;"
/>
<button class="video-play-btn" aria-label="Video abspielen">
<!-- Play-Icon SVG hier -->
</button>
</div>document.querySelectorAll('.video-facade').forEach(function(facade) {
facade.addEventListener('click', function() {
var videoId = facade.dataset.videoId;
var iframe = document.createElement('iframe');
iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
iframe.allow = 'autoplay; encrypted-media';
iframe.style.width = '100%';
iframe.style.height = '100%';
facade.replaceWith(iframe);
});
});Für Vimeo: Ersetze img.youtube.com/vi/ID/maxresdefault.jpg durch eine Vimeo-Thumbnail-URL und aktualisiere die Embed-URL auf https://player.vimeo.com/video/ID?autoplay=1.
Einfachere Option: Nutze die Web-Komponente Lite YouTube Embed (eine beliebte Open-Source-Library), die das Fassaden-Muster mit einem einzigen HTML-Element implementiert.
Lazy Loading für Hintergrundvideos
Hintergrundvideos (die automatisch als dekoratives Element hinter Text abgespielt werden) sind besonders verschwenderisch, wenn sie für jeden Besucher geladen werden, der auf der Seite landet.
Ansatz: Video erst laden, wenn der Bereich in den Sichtbereich scrollt.
var videoSection = document.querySelector('.hero-video-section');
var videoEl = videoSection.querySelector('video');
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// Video laden
var source = videoEl.querySelector('source');
if (source && source.dataset.src) {
source.src = source.dataset.src;
videoEl.load();
videoEl.play();
}
observer.disconnect();
}
});
}, { threshold: 0.1 });
observer.observe(videoSection);Verwende dies mit einem <source data-src="..."> anstelle von <source src="...">, um zu verhindern, dass der Browser die Videoquelle herunterlädt, bevor der Intersection Observer ausgelöst wird.
Für die Hero-Section (Above the Fold): Ein Hintergrundvideo im Hero-Bereich wird ohnehin sofort geladen, da es bereits sichtbar ist. Verwende in diesem Fall preload="metadata" anstelle von preload="none", damit der Browser schnell für die Wiedergabe bereit ist.
Solltest du überhaupt Videos in Shopify verwenden?
Videos lohnen sich, wenn:
- Sie etwas zeigen, das in einem Foto nicht vermittelt werden kann (Stofftextur, Produkt in Bewegung, ein Prozess)
- Sie gut produziert sind (minderwertige Videos schaden dem Vertrauen)
- Du Lazy Loading implementiert hast (sonst sind die Performance-Kosten zu hoch)
Videos lohnen sich nicht, wenn:
- Sie rein dekorativ sind und keinen produktbezogenen Zweck erfüllen
- Sie automatisch mit Ton abgespielt werden (nervig, und die meisten Browser blockieren es ohnehin)
- Dieselbe Botschaft effizienter mit einem gut aufgenommenen Foto vermittelt werden könnte
Erwäge GIF-Alternativen. Für kurze Looping-Clips (2–5 Sekunden) ist ein MP4-Video mit autoplay muted loop in der Regel 60–80 % kleiner als ein gleichwertiges GIF bei identischer Optik.
Auswirkungen der Videoleistung prüfen
Lasse deine Produkt- oder Homepage-URL durch PageSpeed Insights laufen. Eingebettete Videos lösen oft Folgendes aus:
- „Nicht verwendetes JavaScript reduzieren“ – durch das Laden der YouTube-API
- „Enorme Netzwerk-Payloads vermeiden“ – wenn das Video beim Laden der Seite geladen wird
- „Nicht sichtbare Bilder/Ressourcen aufschieben“ – wenn das Video-Poster oder die src nicht per Lazy Loading geladen wird
Nachdem du das Fassaden-Muster implementiert hast, führe PageSpeed erneut aus – du solltest Verbesserungen sowohl beim Score als auch bei der Total Blocking Time sehen.
