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 Überprüfen: Rechtsklick auf ein beliebiges Bild in Ihrem Shop → Untersuchen → suchen Sie nach loading="lazy" im HTML.
• Ihr Hero-/Bannerbild sollte NICHT per Lazy Loading geladen werden — es ist das Largest Contentful Paint-Element und muss sofort geladen werden.
• Um Lazy Loading manuell hinzuzufügen: Bearbeiten Sie die Image-Tags in den Liquid-Dateien für Abschnitte 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 herunter, wenn der Besucher zu ihnen nach unten scrollt. Bei langen Shopify-Produkt- oder Kategorieseiten mit Dutzenden von Bildern kann dies die anfängliche 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.

image_tag Copy-Paste-Referenz

Die Muster, die Sie tatsächlich verwenden werden:

{% comment %} Bild unterhalb des sichtbaren Bereichs: Lazy Load {% endcomment %}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}

{% comment %} Steuern, welche Größen in srcset gehen {% endcomment %}
{{ product.featured_image
    | image_url: width: 1200
    | image_tag: loading: 'lazy', widths: '400, 800, 1200', sizes: '(max-width: 767px) 100vw, 50vw' }}

{% comment %} Hero-Bild im sichtbaren Bereich: Eager Load mit hoher Fetch-Priorität {% endcomment %}
{{ section.settings.image | image_url: width: 2000 | image_tag: loading: 'eager', fetchpriority: 'high' }}

Jedes HTML-Attribut, das Sie an image_tag übergeben (wie fetchpriority), wird auf das generierte <img>-Tag geschrieben. Wann und warum Sie das Eager-Loading-Muster für Hero-Banner verwenden sollten, erfahren Sie unter Behebung des Eager Loadings von Hero-Bannern in Shopify.

Wo Lazy Loading in beliebten Themes zu finden ist

Die zu bearbeitende Datei unterscheidet sich je nach Theme-Familie:

Dawn und seine Ableger (Sense, Craft, Refresh, Studio und die meisten kostenlosen OS 2.0-Themes). Produktkartenbilder werden über snippets/card-product.liquid gerendert, das bereits loading="lazy" setzt. Abschnittsbilder (Bildbanner, Bild-mit-Text) legen die Logik in jeder Abschnittsdatei unter sections/ offen. Dawn lädt die ersten Bilder auf einer Seite auch per Eager Loading – suchen Sie nach Logik, die section.index oder eine lazy_load-Variable prüft, bevor Sie etwas ändern.

Premium-Themes (Impulse, Prestige, Turbo und ähnliche). Die meisten Versionen nach 2021 verwenden natives loading="lazy", aber ältere Versionen lieferten ihr eigenes JavaScript-Lazy-Loading mit. Überprüfen Sie die <img>-Tags: Wenn Sie data-src anstelle von src sehen, verwendet das Theme einen skriptbasierten Ansatz (siehe den Hinweis zu lazysizes unten) und das Hinzufügen von loading="lazy" würde zu einem Konflikt führen.

Ältere Themes (vor 2021). Viele verließen sich auf die JavaScript-Bibliothek lazysizes: class="lazyload"- und data-src-Attribute, wobei ein Skript beim Scrollen das echte src einsetzt. Das native Browser-Lazy-Loading hat dies überflüssig gemacht. Wenn Ihr Theme es noch verwendet, entfernt die Migration zu einfachem src + loading="lazy" ein renderblockierendes Skript und eine häufige Ursache für defekte Bilder. Führen Sie dies pro Vorlage auf einem duplizierten Theme durch, nicht als Suchen-und-Ersetzen.

Wenn Sie lieber keine Liquid-Dateien durchsuchen möchten, beschreiben Sie die Änderung für Fudge: „natives Lazy Loading zu allen Bildern unterhalb des sichtbaren Bereichs hinzufügen“ – es findet die richtigen Snippets und bearbeitet sie direkt.

Welche Verbesserung können Sie erwarten?

Der Gewinn skaliert mit der Anzahl der Bilder, die sich unterhalb des sichtbaren Bereichs befinden. Die Rechnung: Eine Kategorieseite, die 24 Produktkarten mit jeweils etwa 80 KB anzeigt, hat ein Bildgewicht von ungefähr 1,9 MB. Wenn 16 dieser Karten unterhalb des sichtbaren Bereichs liegen, entfernt Lazy Loading etwa 1,3 MB aus dem initialen Ladevorgang – Bandbreite, die stattdessen für Ihr LCP-Bild, Schriften und Skripte verwendet wird.

Was das für die Core Web Vitals bedeutet:

• LCP verbessert sich, da das Hero-Bild nicht mehr mit Downloads unterhalb des sichtbaren Bereichs konkurriert.
• TBT verbessert sich auf bildlastigen Seiten geringfügig, da während des Ladens weniger Dekodierungsaufgaben ausgeführt werden.
• CLS bleibt gleich, wenn Ihre Bilder Breiten- und Höhenattribute haben – und verschlechtert sich, wenn sie diese nicht haben.

Wo echte Shops bei diesen Metriken landen, erfahren Sie in unserem Bericht State of Shopify Performance 2026.

Fehlerbehebung bei Lazy Loading in Shopify

Bilder erscheinen beim schnellen Scrollen leer. Natives Lazy Loading startet den Download, wenn das Bild sich dem Viewport nähert; bei langsamen Verbindungen kann schnelles Scrollen dies überholen. Das ist normal und in der Regel akzeptabel. Wenn es Sie auf einer wichtigen Seite stört, ist die Lösung, weniger Bilder oberhalb der Seitenmitte per Lazy Loading zu laden, nicht, Lazy Loading überall zu entfernen.

Bilder laden überhaupt nicht. Fast immer ein Konflikt zwischen nativem und skriptbasiertem Lazy Loading: Das Tag hat data-src (wartet auf ein Skript, das nicht mehr läuft) und loading="lazy". Entscheiden Sie sich für ein System – bei modernen Themes verschieben Sie die URL in src und löschen die data--Attribute und Lazyload-Klassen.

Bilder in Slidern oder Tabs laden nicht. Browser überspringen Downloads für Bilder, die display: none haben oder weit außerhalb des Viewports liegen. Daher laden die versteckten Folien eines Karussells verspätet, wenn ein Besucher wischt. Für die erste Folie verwenden Sie Eager Loading; für den Rest ist dies das gewünschte Verhalten.

Layout springt, wenn Bilder laden. Fehlende width/height-Attribute. Fügen Sie sie hinzu (oder verwenden Sie image_tag, das dies für Sie erledigt), damit der Browser den Platz reserviert. Wir behandeln die Mechanik in unserem CLS-Leitfaden für Shopify.

Überprüfen, ob es funktioniert. Chrome DevTools → Netzwerk-Tab → nach Img filtern → mit deaktiviertem Cache neu laden. Sie sollten eine kurze anfängliche Liste von Bildern sehen, dann erscheinen neue Zeilen, während Sie scrollen. Wenn jedes Bild sofort heruntergeladen wird, erreichen Ihre loading-Attribute nicht das gerenderte HTML – prüfen Sie, ob eine App oder ein Skript die Tags umschreibt.

Welche Bilder sollten NICHT per Lazy Loading geladen werden

Das Hero-Bild / Bannerbild. Dies ist typischerweise das Largest Contentful Paint (LCP)-Element — das größte sichtbare Bild, wenn die Seite zum ersten Mal lädt. LCP ist ein Core Web Vital, der Ihr Google-Ranking direkt beeinflusst.

Das Lazy Loading Ihres Hero-Bildes bedeutet, dass der Browser mit dem Herunterladen wartet, bis er es „braucht“ – aber er braucht es sofort. Dies schadet Ihrem LCP-Score erheblich.

Wenn Ihr Hero-Bild in Ihrem Theme loading="lazy" hat, entfernen Sie es. Fügen Sie stattdessen loading="eager" oder fetchpriority="high" hinzu:

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

fetchpriority="high" weist den Browser an, das Abrufen dieses Bildes vor allem anderen zu priorisieren – der effektivste Weg, LCP zu verbessern.

Für eine detaillierte Anleitung, die das section.index-Muster und <link rel="preload"> in theme.liquid einschließt, siehe Behebung des Eager Loadings von Hero-Bannern in Shopify.

Das erste Produktbild auf Kategorieseiten. Wenn Ihre Kategorieseite Produktbilder in einem Raster anzeigt, ist die erste Reihe von Bildern sofort sichtbar. Diese sollten nicht per Lazy Loading geladen werden. Nur die Bilder unterhalb des sichtbaren Bereichs profitieren vom Lazy Loading.

Einige Themes handhaben dies mit bedingter Logik – sie wenden loading="lazy" nur auf Bilder nach den ersten paar Karten an.

Auswirkungen auf die Core Web Vitals

Richtig implementiertes Lazy Loading verbessert:

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

Es sollte sich nicht wesentlich ändern:

• CLS (Cumulative Layout Shift) — stellen Sie sicher, dass Bilder explizite Breiten- und Höhenattribute haben, um Platz zu reservieren. Ohne diese können per Lazy Loading geladene Bilder beim Laden zu Layoutverschiebungen führen.

Für einen Benchmark-Kontext, wo echte Shops bei diesen Metriken landen, siehe unseren Bericht State of Shopify Performance 2026.

Verwandt: Alt-Text zu Bildern in Shopify hinzufügen. Wenn Sie abwägen, ob ein externer Bild-Hoster den integrierten von Shopify übertreffen würde, lesen Sie unseren Vergleich der Shopify-Bild-CDNs.

srcset für responsive Bilder verwenden

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

Shopifys image_tag-Filter generiert srcset automatisch. Für ältere img_url-Verwendungen:

<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 Mobilgeräten um 40-60 % reduzieren.

Gilt Lazy Loading in Shopify nur für Bilder?

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-Einbettungen können mit einem Fassadenmuster (Anzeige eines statischen Thumbnails, bis der Benutzer auf „Play“ klickt) per Lazy Loading geladen werden. Für eine vollständige Anleitung lesen Sie unseren Leitfaden zum Lazy Loading von Videos in Shopify. In ähnlicher Weise können iframes (verwendet für eingebettete Karten oder Formulare) mit loading="lazy" aufgeschoben werden. Bilder bleiben das Ziel mit der größten Wirkung, da sie das häufigste schwere Asset auf Shopify-Produkt- und Kategorieseiten sind.

FAQ

Verwandt: Ein Shopify-Theme beschleunigen.