Shopify Lazy Load Images: So richtest du es ein (2026 Guide)

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üfe, ob dein Theme das bereits macht.

Rechtsklick auf ein beliebiges Bild in deinem Storefront → Untersuchen → schau dir den <img>-Tag im HTML an. Wenn du loading="lazy" siehst, enthält dein Theme bereits Lazy Loading für dieses Bild.

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

• Produktbilder auf Collection-Seiten
• Galeriebilder „below the fold“
• Beitragsbilder von Blogposts
• Section-Bilder, die nicht der erste sichtbare Inhalt sind

Wenn dein Theme nach 2021 erstellt wurde, ist das sehr wahrscheinlich schon integriert.

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 zu den Image-Tags in deinen Section- und Snippet-Liquid-Dateien hinzu.

Schritt 1 - Dupliziere dein Theme.

Schritt 2 - Finde im Code-Editor die Section oder das Snippet, wo das Bild gerendert wird. Häufige Speicherorte:

• sections/main-collection-product-grid.liquid — Produktbilder auf Collection-Seiten
• sections/featured-collection.liquid — Hervorgehobene Produkte auf der Startseite
• snippets/card-product.liquid — Produktkarten-Template, das in mehreren Sections verwendet wird

Schritt 3 - Finde 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-Image / Banner-Bild. Das ist typischerweise das Element für den Largest Contentful Paint (LCP) – das größte sichtbare Bild beim ersten Laden der Seite. LCP ist ein Core Web Vital, das dein Google-Ranking direkt beeinflusst.

Ein Lazy Loading für dein Hero-Image bedeutet, dass der Browser mit dem Herunterladen wartet, bis er es „braucht“ – aber er braucht es sofort. Das schadet deinem LCP-Score erheblich.

Wenn dein Hero-Image 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 Laden dieses Bildes priorisieren soll – der effektivste Weg, um den LCP zu verbessern.

Für eine gezielte Anleitung einschließlich des section.index-Musters und <link rel="preload"> in theme.liquid, siehe Hero Banner Eager Loading in Shopify fixen.

Das erste Produktbild auf Collection-Seiten. Wenn deine Collection-Seite Produktbilder in einem Raster anzeigt, ist die erste Reihe der Bilder sofort sichtbar. Diese sollten kein Lazy Loading verwenden. Nur die Bilder „below the fold“ profitieren von Lazy Loading.

Einige Themes handhaben dies mit bedingter Logik (Conditional Logic) – sie wenden loading="lazy" nur auf Bilder nach den ersten paar Produktkarten an.

Auswirkungen auf Core Web Vitals

Richtig implementiertes Lazy Loading verbessert:

• LCP (Largest Contentful Paint) — indem sichergestellt wird, dass das Hero-Image schnell lädt (kein Lazy Loading) und andere Ressourcen nicht um Bandbreite konkurrieren
• TBT (Total Blocking Time) — durch die Reduzierung der Anzahl großer Bild-Downloads während des Seitenladevorgangs

Es sollte sich nicht wesentlich verändern:

• CLS (Cumulative Layout Shift) — stelle sicher, dass Bilder explizite width- und height-Attribute haben, um Platz zu reservieren. Ohne diese können Lazy-Load-Bilder beim Laden zu Layout Shifts führen.

Für einen Benchmark-Vergleich, wo echte Stores bei diesen Metriken landen, sieh dir unseren Report State of Shopify Performance 2026 an.

Passend dazu: Alt-Texte zu Bildern in Shopify hinzufügen. Wenn du überlegst, ob ein Drittanbieter-Image-Host besser ist als der integrierte von Shopify, lies unseren Shopify Image CDN-Vergleich.

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" per Lazy Loading laden, und YouTube-/Vimeo-Embeds können über ein Facade-Pattern geladen werden (wobei ein statisches Thumbnail angezeigt wird, bis der Nutzer auf Play klickt). Für eine vollständige Anleitung, sieh dir unseren Guide an: So lädst du Videos in Shopify per Lazy Loading. Ebenso können Iframes (die für eingebettete Karten oder Formulare verwendet werden) mit loading="lazy" verzögert geladen werden. Bilder bleiben das Ziel mit den größten Auswirkungen, da sie die häufigsten großen Assets auf Shopify-Produkt- und Kategorie-Seiten sind.

FAQ

Passend dazu: Ein Shopify-Theme schneller machen.