Lazy Loading für Videos in Shopify (2026)

Das Wichtigste in Kürze

• Native Video-Elemente sollten preload="none" sowie ein Poster verwenden und ihre Quelle mit einem Intersection Observer laden. Das loading-Attribut funktioniert nur bei Bildern und Iframes.
• YouTube- und Vimeo-Embeds nutzen ein “Facade Pattern” — zeige ein klickbares Thumbnail an und lade das Iframe erst, wenn darauf geklickt wird.
• Hintergrund-Videos sollten erst geladen werden, wenn die Sektion in den sichtbaren Bereich gescrollt wird, nicht direkt beim Seitenaufruf (Page Load).
• Nicht optimierte Videos sind eine der Hauptursachen für langsame Ladezeiten von Shopify-Seiten.

Um Videos in Shopify mit Lazy Loading zu laden, ersetze YouTube- und Vimeo-Iframes durch ein klickbares Thumbnail (das Facade Pattern), gib selbstgehosteten <video>-Tags das Attribut preload="none" sowie ein Poster und lade Hintergrund-Videos erst, wenn ihre Sektion in den sichtbaren Bereich gescrollt wird.

Videos gehören zu den schwersten Assets auf einer Seite. Ein Embed, das direkt beim Seitenaufruf lädt, verlangsamt die Seite selbst für Besucher, die daran vorbeiscrollen, ohne es anzusehen.

So fügst du Lazy Loading zu nativen Videos in Shopify hinzu

Für selbstgehostete Video-Dateien, die in das Asset-System von Shopify oder ein CDN hochgeladen wurden, verwende preload="none" und ein Poster-Bild. Das loading-Attribut funktioniert nur bei <img> und <iframe>; Browser ignorieren es bei <video>. Um die Datei selbst zu verzögern, lade ihre Quelle mit einem Intersection Observer (siehe den Code für Hintergrund-Videos unten).

<video
    src="{{ section.settings.video_url }}"
    poster="{{ section.settings.poster_image | image_url: width: 1200 }}"
    preload="none"
    muted
    playsinline
    loop
>
    Dein Browser unterstützt keine Videos.
</video>

Wichtige Attribute:

preload="none" — verhindert, dass der Browser Videodaten herunterlädt, bevor der Nutzer mit dem Player interagiert. Ohne dies laden Browser oft Video-Metadaten oder sogar die ersten Sekunden des Videos vorab, was Bandbreite verschwendet.

poster — zeigt ein Standbild an, solange das Video noch nicht geladen ist. Füge dies immer hinzu. Ohne ein Poster sehen die Besucher ein leeres graues Rechteck, bis das Video lädt. Das Poster-Bild sollte mit Preload geladen werden (verwende dafür kein Lazy Loading).

Für Bilder, siehe wie man Bilder in Shopify mit Lazy Loading lädt.

Das Fassaden-Muster für YouTube- und Vimeo-Embeds

YouTube- und Vimeo-Iframes gehören zu den größten Performance-Problemen in Shopify-Stores. Jedes Embed lädt seine Player-Skripte von den Servern von YouTube oder Vimeo (ca. 1 MB an Skripten pro YouTube-Embed), selbst wenn der Besucher das Video nie ansieht.

Das Facade Pattern: Ersetze das Iframe durch ein klickbares Thumbnail-Bild. Wenn der Besucher auf Play klickt, ersetzt du das Bild durch das eigentliche Iframe.

Hier ist eine grundlegende Implementierung:

<div class="video-facade" data-video-id="YOUR_YOUTUBE_ID">
    <img
        src="https://img.youtube.com/vi/YOUR_YOUTUBE_ID/maxresdefault.jpg"
        alt="Video thumbnail"
        loading="lazy"
        style="width:100%; cursor:pointer;"
    />
    <button class="video-play-btn" aria-label="Play video">
        <!-- Play icon SVG here -->
    </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: Verwende die Web Component Lite YouTube Embed (eine beliebte Open-Source-Bibliothek), die das Facade Pattern mit einem einzigen HTML-Element umsetzt.

Für weitere Performance-Tipps, siehe wie man ein Shopify-Theme schneller macht.

Lazy Loading für Hintergrundvideos

Hintergrund-Videos (solche, die als dekoratives Element hinter Text automatisch abspielen) sind besonders ressourcenfressend, wenn sie für jeden Besucher geladen werden, der auf der Seite landet.

Der Ansatz: Lade das Video erst, wenn die Sektion in den sichtbaren Bereich gescrollt wird.

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) {
                // Lade das Video
                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 auslöst.

Für die Hero-Sektion (Above the Fold): Ein Hintergrund-Video im Hero-Bereich wird ohnehin sofort geladen — es ist bereits sichtbar. Verwende in diesem Fall preload="metadata" anstelle von preload="none", damit sich der Browser darauf vorbereitet, das Video schnell abzuspielen.

Für Produkt-Videos, siehe wie man Videos zu einer Shopify-Produktgalerie hinzufügt.

Solltest du überhaupt Videos in Shopify verwenden?

Ein Video lohnt sich, wenn:

• es etwas zeigt, das auf einem Foto nicht vermittelt werden kann (Stoffstruktur, Produkt in Bewegung, ein Prozess)
• es gut produziert ist (minderwertige Videos schaden dem Vertrauen)
• du Lazy Loading implementiert hast (sonst sind die Performance-Kosten zu hoch)

Ein Video lohnt sich nicht, wenn:

• es rein dekorativ ist und keinen produktbezogenen Zweck erfüllt
• es automatisch mit Ton abspielt (nervig und die meisten Browser blockieren es ohnehin)
• dieselbe Botschaft effizienter mit einem gut gemachten Foto vermittelt werden könnte

Ziehe GIF-Alternativen in Betracht. Für kurze Looping-Clips (2-5 Sekunden) ist ein MP4-Video mit autoplay muted loop normalerweise 60-80 % kleiner als ein vergleichbares GIF, sieht aber identisch aus.

Auswirkungen der Videoleistung prüfen

Prüfe deine Produkt- oder Homepage-URL mit PageSpeed Insights. Video-Embeds lösen oft folgende Warnungen aus:

• “Reduce unused JavaScript” (Nicht verwendetes JavaScript reduzieren) — durch das Laden der YouTube-API
• “Avoid enormous network payloads” (Enorme Netzwerk-Nutzlasten vermeiden) — wenn das Video direkt beim Seitenaufruf lädt
• “Lazy load third-party resources with facades” (Ressourcen von Drittanbietern mit Facades per Lazy Load laden) — markiert YouTube- und Vimeo-Embeds

Nachdem du das Facade Pattern implementiert hast, lass PageSpeed noch einmal laufen — du solltest Verbesserungen sowohl beim Score als auch bei der Total Blocking Time feststellen.

FAQ