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 Kategorieseitensections/featured-collection.liquid— Ausgewählte Produkte auf der Homepagesnippets/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 Image / Banner Image. Dies ist typischerweise das Largest Contentful Paint (LCP)-Element – das größte sichtbare Bild beim ersten Laden der Seite. LCP ist ein Core Web Vital, das dein Google-Ranking direkt beeinflusst.
Wenn du dein Hero Image per Lazy Loading lädst, wartet der Browser mit dem Herunterladen, 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="Sommer-Sale Banner"
loading="eager"
fetchpriority="high"
/>fetchpriority="high" teilt dem Browser mit, dieses Bild beim Laden vor allem anderem zu priorisieren – der effektivste Weg, um LCP zu verbessern.
Für eine detaillierte Anleitung inklusive des section.index-Musters und <link rel="preload"> in theme.liquid, siehe Hero Banner Eager Loading in Shopify beheben.
Das erste Produktbild auf Kategorie-Seiten. Wenn deine Kategorie-Seite 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.
Einige Themes lösen dies mit Conditional Logic – sie wenden loading="lazy" nur auf Bilder nach den ersten paar Cards an.
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" 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
Moderne Themes (Dawn, Sense, Refresh, Craft und die meisten Themes nach 2021) enthalten standardmäßig loading="lazy" bei Produktbildern auf Kategorie-Seiten, Blog-Beitragsbildern (Featured Images) und Sektionen Below the Fold. Ältere Themes vielleicht nicht. Rechtsklick auf ein beliebiges Bild → Untersuchen (Inspect) → prüfe auf loading="lazy", um das Verhalten deines Themes zu bestätigen.
Nein, wenn es richtig implementiert ist. Google hat kein Problem mit Inhalten, die per Lazy Loading geladen wurden – der Crawler löst Viewport-Scrolls aus. Der SEO-Gewinn liegt in der Geschwindigkeitsverbesserung; Lazy Loading reduziert die anfängliche Seitengröße und verbessert die Core Web Vitals (LCP, TBT). Vermeide Lazy Loading bei Above the Fold Bildern, da dies den LCP-Score verschlechtern würde.
Fehlende width- und height-Attribute. Ohne explizite Abmessungen reserviert der Browser keinen Platz für das Bild – wenn es lädt, springt der Content. Füge jedem per Lazy Loading geladenen Bild width- und height-Attribute (oder die CSS-Eigenschaft aspect-ratio) hinzu. Der image_tag-Filter von Shopify macht das automatisch.
Nein. Lazy Loading verzögert den Download, bis das Bild "nah am Viewport" ist, was bei Above the Fold Content zwar sofort geschieht, aber im Vergleich zum Eager Loading eine leichte Verzögerung einführt. Das Hero/LCP-Bild sollte immer loading="eager" und fetchpriority="high" verwenden.
Nicht über das loading-Attribut (das nur bei <img> und <iframe> funktioniert). Die sauberste Lösung: Beschreibe Fudge was du möchtest ("konvertiere den Hero-CSS-Hintergrund in ein Img-Tag mit nativem Lazy Loading") und es baut die Sektion mit einem echten <img>-Element neu auf. Manueller Workaround: Nutze den Intersection Observer, um das Hintergrundbild-CSS nur anzuwenden, wenn die Sektion in den Viewport kommt.
Verwandt: Ein Shopify-Theme schneller machen.