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 es bereits unterstützt.
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 standardmäßig loading="lazy" für:
- Produktbilder auf Kategorieseiten
- Galeriebilder „below the fold“ (außerhalb des sichtbaren Bereichs)
- Beitragsbilder in Blogs
- Bilder in Sections, die nicht der erste sichtbare Inhalt sind
Wenn dein Theme nach 2021 erstellt wurde, ist es sehr wahrscheinlich schon integriert.
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.
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-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.
Auswirkungen auf Core Web Vitals
Korrekt implementiertes Lazy Loading verbessert:
- LCP (Largest Contentful Paint) — indem sichergestellt wird, dass das Hero-Bild schnell lädt (kein Lazy Loading) und andere Ressourcen nicht um Bandbreite konkurrieren.
- TBT (Total Blocking Time) — indem die Anzahl der großen Bild-Downloads während des Seitenaufbaus reduziert wird.
Es sollte sich nicht signifikant ändern:
- CLS (Cumulative Layout Shift) — stelle sicher, dass Bilder explizite Width- und Height-Attribute haben, um Platz zu reservieren. Ohne diese können Lazy-Loading-Bilder beim Laden zu Layout-Verschiebungen führen.
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 loading="lazy"-Attribut und preload="none" verzögert laden. YouTube/Vimeo-Embeds können per Fassaden-Pattern geladen werden (ein statisches Thumbnail wird angezeigt, bis der Nutzer auf Play klickt). Eine vollständige Anleitung findest du in unserem Guide zum Thema Videos in Shopify per Lazy Loading laden. Ähnlich können Iframes (für eingebettete Karten oder Formulare) mit loading="lazy" aufgeschoben werden. Bilder bleiben das wichtigste Ziel, da sie die häufigsten schweren Assets auf Shopify Produkt- und Kategorieseiten sind.
