Lazy Loading für Videos in Shopify (2026)

Wichtigste Erkenntnisse

• Native Video-Elemente sollten loading="lazy" und preload="none" verwenden, um das automatische Herunterladen von Videodaten zu verhindern.
• YouTube- und Vimeo-Embeds nutzen ein “Facade-Pattern” – sie zeigen ein anklickbares Thumbnail und laden den Iframe erst beim Klick.
• Hintergrundvideos sollten erst geladen werden, wenn die Section in den sichtbaren Bereich gescrollt wird, nicht direkt beim Seitenaufruf.
• Nicht optimierte Videos sind eine der Hauptursachen für langsame Ladezeiten in Shopify-Stores.

Videos in einem Shopify-Store können super ansprechend sein – Produktdemos, Brand-Filme, How-to-Content. Aber Videos gehören auch zu den schwersten Assets im Web. Ein einziges, nicht optimiertes Video-Embed kann deine Ladezeit um Sekunden verlängern, selbst für Besucher, die nur 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, solltest du die nativen Lazy-Loading-Attribute von HTML nutzen.

<video
    src="{{ section.settings.video_url }}"
    poster="{{ section.settings.poster_image | img_url: '1200x' }}"
    loading="lazy"
    preload="none"
    muted
    playsinline
    loop
>
    Your browser doesn't support 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 dies laden Browser oft Metadaten oder sogar die ersten Sekunden des Videos vor, was Bandbreite verschwendet.

poster — zeigt ein Standbild, 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 vorgeladen werden (kein Lazy Loading dafür verwenden).

Verwandt: Bilder in Shopify per Lazy Loading laden.

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

iframes von YouTube und Vimeo gehören zu den größten Performance-Problemen in Shopify-Stores. Jedes einzelne lädt mehrere Megabyte an Skripten von den YouTube/Vimeo-Servern, selbst wenn der Besucher das Video nie ansieht.

Das Facade-Pattern: Ersetze das iframe durch ein klickbares Vorschaubild (Thumbnail). Wenn der Besucher auf Play klickt, wird das Bild durch das eigentliche iframe ersetzt.

Hier ist eine einfache 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 die URL eines Vimeo-Thumbnails und aktualisiere die Embed-URL auf https://player.vimeo.com/video/ID?autoplay=1.

Verwandt: Animierten Content in Shopify hinzufügen.

Verwandt: Ein Shopify-Theme schneller machen.

Einfachere Option: Nutze die Web-Component Lite YouTube Embed (eine beliebte Open-Source-Bibliothek), die das Facade-Pattern mit einem einzigen HTML-Element umsetzt.

Lazy Loading für Hintergrundvideos

Hintergrundvideos (die Art, die automatisch als dekoratives Element hinter Text abgespielt wird) sind besonders verschwenderisch, wenn sie für jeden Besucher geladen werden, der auf der Seite landet.

Ansatz: Video erst laden, wenn die Section 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) {
                // Load the 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)

Nutze dies mit <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-Section (Above the Fold): Ein Hintergrundvideo im Hero-Bereich wird ohnehin sofort geladen, da es bereits sichtbar ist. Nutze in diesem Fall preload="metadata" statt preload="none", damit sich der Browser darauf vorbereitet, das Video schnell abzuspielen.

Verwandt: Video zu einer Shopify-Produktgalerie hinzufügen.

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

Lass die URL deiner Produkt- oder Startseite durch PageSpeed Insights laufen. Eingebettete Videos führen oft zu diesen Warnungen:

• „Nicht verwendetes JavaScript reduzieren“ – durch das Laden der YouTube-API
• „Riesige Netzwerknutzlasten vermeiden“ – wenn das Video direkt beim Seitenaufruf geladen wird
• „Nicht sichtbare Bilder/Ressourcen aufschieben“ – wenn Video-Poster oder src nicht per Lazy-Loading geladen werden

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 sehen.

FAQ