Lazy Loading für Videos in Shopify (2026)

Wichtige Takeaways

• Native Video-Elemente sollten loading="lazy" und preload="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, sollten Sie die nativen Lazy Loading-Attribute von HTML verwenden.

<video
  src="{{ section.settings.video_url }}"
  poster="{{ section.settings.poster_image | img_url: '1200x' }}"
  loading="lazy"
  preload="none"
  muted
  playsinline
  loop
>
  Ihr 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 Benutzer 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ügen Sie dies immer hinzu. Ohne Poster sehen Besucher ein leeres graues Rechteck, bis das Video lädt. Das Poster-Bild sollte vorab geladen werden (kein Lazy Loading dafür verwenden).

Passend dazu: Lazy Load Images in Shopify.

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 einzelne lädt mehrere Megabyte an Skripten von den YouTube/Vimeo-Servern, selbst wenn der Besucher das Video gar nicht ansieht.

Das Facade Pattern: Ersetzen Sie den iFrame durch ein anklickbares Thumbnail-Bild. Wenn der Besucher auf Play klickt, ersetzen Sie das Bild durch den eigentlichen iFrame.

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="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: Ersetzen Sie img.youtube.com/vi/ID/maxresdefault.jpg durch eine Vimeo-Thumbnail-URL und aktualisieren Sie die Embed-URL auf https://player.vimeo.com/video/ID?autoplay=1.

Passend dazu: So fügst du animierte Inhalte in Shopify hinzu (2026).

Passend dazu: So beschleunigst du ein Shopify-Theme (2026).

Einfachere Option: Verwenden Sie das Web Component Lite YouTube Embed (eine beliebte Open-Source-Library), 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 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);

Verwenden Sie 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-Section (Above the fold): Hintergrundvideos im Hero-Bereich laden ohnehin sofort – sie sind bereits sichtbar. Verwenden Sie in diesem Fall preload="metadata" anstelle von preload="none", damit der Browser das Video für ein schnelles Abspielen vorbereitet.

Passend dazu: So fügen Sie ein Video zur Shopify-Produktgalerie hinzu (2026).

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.