So nutzt du Lazy Loading für Bilder in Shopify (2026)

Wichtige Erkenntnisse

• Die meisten modernen Shopify-Themes (Dawn, Craft, Sense) enthalten standardmäßig loading="lazy" für Bilder.
• Zum Prüfen: Rechtsklick auf ein beliebiges Bild in deinem Shop → Untersuchen → suche im HTML-Code nach loading="lazy".
• Dein Hero-/Banner-Bild sollte NICHT per Lazy Loading geladen werden — es ist das Largest Contentful Paint Element und muss sofort laden.
• Manuelles Hinzufügen von Lazy Loading: Bearbeite die Image-Tags in den Liquid-Dateien (Sections oder Snippets), um loading="lazy" einzufügen.

Lazy Loading verzögert das Laden von Bildern, bis sie kurz davor sind, in den Viewport zu gelangen. Anstatt jedes Bild auf einer Seite beim ersten Laden herunterzuladen, lädt der Browser Bilder erst dann, wenn der Besucher zu ihnen scrollt. Bei langen Shopify Produkt- oder Kategorieseiten mit Dutzenden von Bildern kann dies die initiale Ladezeit der Seite drastisch reduzieren.

So nutzt du Lazy Loading für Bilder in Shopify

Schritt 1 — Prüfen Sie, ob Ihr Theme dies bereits tut.

Klicken Sie mit der rechten Maustaste auf ein beliebiges Bild in Ihrem Storefront → Untersuchen → schauen Sie sich den <img>-Tag im HTML an. Wenn Sie loading="lazy" sehen, enthält Ihr Theme bereits Lazy Loading für dieses Bild.

Moderne Shopify-Themes, die auf Dawn (dem offiziellen Shopify-Theme) basieren, enthalten standardmäßig loading="lazy" für:

• Produktbilder auf Kollektionsseiten
• Galeriebilder unterhalb des sichtbaren Bereichs
• Beitragsbilder in Blogs
• Sektionsbilder, die nicht der erste sichtbare Inhalt sind

Wenn Ihr Theme nach 2021 erstellt wurde, ist es sehr wahrscheinlich, dass dies bereits enthalten ist.

Passend dazu: Bilder in Shopify komprimieren.

So fügst du Lazy Loading manuell zu Bildern hinzu

Wenn dein Theme kein loading="lazy" enthält, füge es den Image-Tags in deinen Liquid-Dateien für Sections und Snippets hinzu.

Verwandt: Compress Images in Shopify.

Schritt 1 - Erstelle ein Duplikat deines Themes.

Schritt 2 - Suche im Code-Editor nach der Section oder dem Snippet, in dem das Bild gerendert wird. Häufige Speicherorte:

• sections/main-collection-product-grid.liquid — Produktbilder auf Kategorieseiten
• sections/featured-collection.liquid — Ausgewählte Produkte auf der Homepage
• snippets/card-product.liquid — Produktkarten-Template, das in mehreren Sections verwendet wird

Schritt 3 - Suche den <img>-Tag und füge loading="lazy" hinzu:

<!-- Vorher -->
<img
  src="{{ product.featured_image | img_url: '400x' }}"
  alt="{{ product.featured_image.alt }}"
  width="400"
  height="400"
/>

<!-- Nachher -->
<img
  src="{{ product.featured_image | img_url: '400x' }}"
  alt="{{ product.featured_image.alt }}"
  width="400"
  height="400"
  loading="lazy"
/>

Schritt 4 - Speichern und testen. Nutze den Network-Tab der Chrome DevTools, um zu bestätigen, dass Bilder erst beim Scrollen geladen werden.

So fügst du Lazy Loading in Shopify mit dem image_tag-Filter hinzu

Die moderne Art, Bilder in Shopify zu rendern, ist die Verwendung des image_tag-Filters, der Lazy Loading (und andere Best Practices) automatisch handhabt:

{{ product.featured_image | image_url: width: 400 | image_tag: loading: 'lazy', alt: product.featured_image.alt }}

Dies generiert einen <img>-Tag mit Lazy Loading, korrekten Width/Height-Attributen und srcset für responsive Bilder. Wenn dein Theme noch die ältere img_url-Syntax verwendet, ist die Aktualisierung auf image_url + image_tag das sauberere Upgrade.

Welche Bilder NICHT per Lazy Loading geladen werden sollten

Das Hero-Bild / Banner-Bild. Dies ist in der Regel das Largest Contentful Paint (LCP) Element — das größte sichtbare Bild beim ersten Laden der Seite. LCP ist ein Core Web Vital, der dein Google-Ranking direkt beeinflusst.

Lazy Loading für dein Hero-Bild bedeutet, dass der Browser mit dem Download wartet, bis er es „braucht“ — aber er braucht es sofort. Das verschlechtert deinen LCP-Score erheblich.

Wenn dein Hero-Bild in deinem Theme loading="lazy" hat, entferne es. Füge stattdessen loading="eager" oder fetchpriority="high" hinzu:

<img
  src="banner.jpg"
  alt="Summer sale banner"
  loading="eager"
  fetchpriority="high"
/>

fetchpriority="high" sagt dem Browser, dass er das Abrufen dieses Bildes vor allem anderen priorisieren soll — der effektivste Weg, um den LCP zu verbessern.

Das erste Produktbild auf Kategorieseiten. Wenn deine Kategorieseite Produktbilder in einem Raster anzeigt, ist die erste Reihe der Bilder sofort sichtbar. Diese sollten nicht per Lazy Loading geladen werden. Nur die Bilder „below the fold“ profitieren von Lazy Loading.

Manche Themes lösen dies mit konditioneller Logik — indem sie loading="lazy" erst nach den ersten paar Karten anwenden.

Verwandt: Add Alt Text to Images in Shopify.

Auswirkungen auf Core Web Vitals

Korrekt implementiertes Lazy Loading verbessert:

• LCP (Largest Contentful Paint) — indem sichergestellt wird, dass das Hero-Bild schnell geladen wird (nicht lazy loaded) und andere Ressourcen nicht um Bandbreite konkurrieren
• TBT (Total Blocking Time) — indem die Anzahl großer Image-Downloads während des Seitenaufbaus reduziert wird

Es sollte sich nicht signifikant ändern auf:

• CLS (Cumulative Layout Shift) — stellen Sie sicher, dass Bilder explizite width- und height-Attribute haben, um Platz zu reservieren. Ohne diese können lazy-loaded Bilder beim Laden zu Layout-Verschiebungen führen.

Passend dazu: Alt-Texte zu Bildern in Shopify hinzufügen.

Verwendung von srcset für responsive Bilder

Neben Lazy Loading stellt srcset sicher, dass Browser nur die für ihren Bildschirm passende Bildgröße herunterladen — und nicht ein 2000px-Bild für eine 400px-Produktkarte.

Der image_tag-Filter von Shopify generiert srcset automatisch. Für die ältere img_url-Verwendung:

<img
  src="{{ product.featured_image | img_url: '400x' }}"
  srcset="{{ product.featured_image | img_url: '400x' }} 400w,
          {{ product.featured_image | img_url: '800x' }} 800w,
          {{ product.featured_image | img_url: '1200x' }} 1200w"
  sizes="(max-width: 767px) 100vw, 50vw"
  loading="lazy"
  alt="{{ product.featured_image.alt }}"
/>

In Kombination mit Lazy Loading kann ein korrektes srcset die übertragenen Bilddaten auf dem Handy um 40-60 % reduzieren.

Gibt es Lazy Loading nur für Bilder in Shopify?

Nein. Lazy Loading gilt auch für Videos. Shopify-Themes können <video>-Elemente mit dem Attribut loading="lazy" und preload="none" verzögert laden, und YouTube/Vimeo-Embeds können per Facade-Pattern geladen werden (ein statisches Vorschaubild anzeigen, bis der Nutzer auf Play klickt). Eine vollständige Anleitung finden Sie in unserem Guide Lazy Load für Videos in Shopify. Ebenso können Iframes (für eingebettete Karten oder Formulare) mit loading="lazy" aufgeschoben werden. Bilder bleiben jedoch das wichtigste Ziel, da sie das häufigste „schwere“ Element auf Shopify-Produkt- und Kollektionsseiten sind.

Passend dazu: Shopify Theme schneller machen.