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

Auf einen Blick

• Die meisten modernen Shopify-Themes (Dawn, Craft, Sense) enthalten standardmäßig loading="lazy" bei Bildern.
• So überprüfst du es: Rechtsklick auf ein beliebiges Bild in deinem Store → Untersuchen (Inspect) → suche im HTML nach loading="lazy".
• Dein Hero-/Banner-Bild sollte NICHT per Lazy Load geladen werden — es ist das Largest Contentful Paint Element und muss sofort laden.
• Um Lazy Loading manuell hinzuzufügen: Bearbeite die Image-Tags in den Section- oder Snippet-Liquid-Dateien und füge loading="lazy" hinzu.

Um Bilder in Shopify per Lazy Load zu laden, füge loading="lazy" zu <img>-Tags ‘below-the-fold’ hinzu (oder übergib loading: 'lazy' an den image_tag-Filter) und belasse das Hero-Bild bei ‘eager’ (sofortiges Laden). Die meisten modernen Themes machen das bereits, also prüfe deins zuerst.

Lazy Loading verzögert das Laden von Bildern, bis sie kurz davor sind, in den sichtbaren Bereich (Viewport) zu scrollen. Anstatt jedes Bild auf einer Seite herunterzuladen, wenn sie zum ersten Mal lädt, lädt der Browser die Bilder erst herunter, wenn der Besucher zu ihnen scrollt. Bei langen Shopify-Produkt- oder Collection-Seiten mit dutzenden Bildern kann das die anfängliche Ladezeit der Seite drastisch reduzieren.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung, und wir arbeiten seit mehr als vier Jahren im Shopify-Ökosystem. Wir bauen Fudge, den KI-Operator für Shopify-Stores, mit einer 4.9-Bewertung im Shopify App Store. Das Laden von Bildern im Theme-Code ist für uns also tägliche Arbeit.

Hat dein Shopify-Theme bereits Lazy Loading für Bilder?

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

Dawn, das Theme, auf dem die meisten kostenlosen Shopify-Themes basieren, enthält loading="lazy" standardmäßig für:

• Produktbilder auf Collection-Seiten
• Galeriebilder Below-the-fold (außerhalb des ersten sichtbaren Bereichs)
• Beitragsbilder in Blog-Posts
• Section-Bilder, die nicht der erste sichtbare Inhalt sind

Wenn dein Theme nach 2021 erstellt wurde, ist dies sehr wahrscheinlich bereits integriert.

Lazy Loading ändert nur, wann Bilder heruntergeladen werden. Um jede Datei kleiner zu machen, schau dir an, wie du Bilder in Shopify komprimieren kannst.

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 das <img>-Tag und füge loading="lazy" hinzu:

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

<!-- Danach -->
<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.

Wenn du diese Tags schon bearbeitest, überprüfe auch ihren Alt-Text. Siehe wie man Alt-Text zu Bildern in Shopify hinzufügt.

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

Der moderne Shopify-Weg, um Bilder zu rendern, ist die Verwendung des image_tag-Filters, der Lazy Loading (und andere Best Practices) automatisch übernimmt:

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

Dies generiert ein <img>-Tag mit Lazy Loading, den richtigen width/height-Attributen und einem srcset für responsive Bilder. Wenn dein Theme noch die ältere img_url-Syntax verwendet, ist das Update auf image_url + image_tag das sauberere Upgrade.

image_tag Copy-Paste-Referenz

Die Patterns, die du in der Praxis nutzen wirst:

{% comment %} Below-the-fold Bild: Lazy Load {% endcomment %}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}

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

{% comment %} Above-the-fold Hero: 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 du an image_tag übergibst (wie fetchpriority), wird in das generierte <img>-Tag geschrieben. Wann und warum du das Eager-Pattern bei Hero-Bannern verwenden solltest, erfährst du unter wie man Eager Loading bei Hero-Bannern in Shopify repariert.

Wo sich Lazy Loading in beliebten Themes befindet

Die Datei, die du bearbeiten musst, unterscheidet sich je nach Theme-Familie:

Dawn, Horizon und die darauf basierenden kostenlosen Themes (Sense, Craft, Refresh, Studio und die meisten kostenlosen OS 2.0 Themes). In Dawn werden Produktkarten-Bilder über snippets/card-product.liquid gerendert, was bereits loading="lazy" setzt. Section-Bilder (Image Banners, Image-with-text) haben ihre Logik in der jeweiligen Section-Datei unter sections/. Dawn lädt auch die ersten Bilder einer Seite ‘eager’ - suche nach einer Logik, die section.index oder eine lazy_load Variable prüft, bevor du etwas änderst. Horizon, das Standard-Theme für neue Stores seit 2025, organisiert seine Dateien anders, also durchsuche dessen Code nach loading, um dieselbe Logik zu finden.

Premium-Themes (Impulse, Prestige, Turbo und ähnliche). Die meisten Versionen nach 2021 verwenden natives loading="lazy", aber ältere Versionen brachten ihr eigenes JavaScript Lazy Loading mit. Überprüfe die <img>-Tags: Wenn du data-src anstelle von src siehst, verwendet das Theme einen skriptbasierten Ansatz (siehe lazysizes-Hinweis unten) und ein zusätzliches loading="lazy" wird zu Konflikten führen.

Ältere Themes (vor 2021). Viele verließen sich auf die lazysizes JavaScript-Bibliothek: class="lazyload" und data-src-Attribute, wobei ein Skript beim Scrollen die echte src austauscht. Natives Lazy Loading in Browsern hat dies überflüssig gemacht. Wenn dein Theme dies noch verwendet, entfernt die Migration zu einfachem src + loading="lazy" ein render-blockierendes Skript und eine häufige Fehlerquelle für kaputte Bilder. Mach das pro Template in einem duplizierten Theme, nicht als einfaches Suchen-und-Ersetzen.

Wenn du keine Lust hast, Liquid-Dateien zu durchsuchen, beschreibe die Änderung einfach Fudge, dem KI-Operator für Shopify-Stores: “Füge natives Lazy Loading zu allen Below-the-fold-Bildern hinzu” - er findet die richtigen Snippets und bearbeitet sie in einem Entwurf, den du vor der Veröffentlichung als Vorschau ansehen kannst.

Welche Verbesserungen kannst du erwarten?

Der Gewinn skaliert damit, wie viele Bilder sich Below-the-fold befinden. Die Rechnung: Eine Collection-Seite, die 24 Produktkarten mit etwa 80KB pro Bild anzeigt, hat ein Bildgewicht von rund 1,9MB. Wenn 16 dieser Karten Below-the-fold sind, entfernt Lazy Loading etwa 1,3MB beim initialen Laden - Bandbreite, die stattdessen deinem LCP-Bild, Schriften und Skripten zugutekommt.

Was das für die Core Web Vitals bedeutet:

• LCP verbessert sich, weil das Hero-Bild nicht mehr mit Below-the-fold-Downloads konkurriert.
• Lab-Metriken wie TBT können sich auf bildlastigen Seiten leicht verbessern, da beim Laden weniger Dekodierungsaufgaben laufen.
• CLS bleibt unverändert, wenn deine Bilder width- und height-Attribute haben - und wird schlechter, wenn sie diese nicht haben.

Wo echte Stores bei diesen Metriken landen, siehst du in unserem Bericht State of Shopify Performance 2026.

Fehlerbehebung bei Lazy Loading in Shopify

Bilder bleiben beim schnellen Scrollen leer. Natives Lazy Loading startet den Download, wenn das Bild in die Nähe des Viewports kommt; bei langsamen Verbindungen kann schnelles Scrollen schneller sein als der Download. Das ist normal und meistens akzeptabel. Wenn es dich auf einer wichtigen Seite stört, ist die Lösung, weniger Lazy-Bilder über der Mitte der Seite zu haben, nicht Lazy Loading überall zu entfernen.

Bilder laden gar 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". Entscheide dich für ein System - bei modernen Themes verschiebe die URL in src und lösche die data--Attribute und lazyload-Klassen.

Bilder in Slidern oder Tabs laden nicht. Browser überspringen Downloads für Bilder, die display: none oder weit außerhalb des Viewports sind. Daher laden versteckte Slides in einem Karussell spät, wenn ein Besucher wischt. Nutze für den ersten Slide Eager Loading; für den Rest ist dies das gewünschte Verhalten.

Das Layout springt, wenn Bilder laden. Fehlende width/height-Attribute. Füge sie hinzu (oder nutze image_tag, was das für dich erledigt), damit der Browser den Platz reserviert. Die Mechanik dahinter behandeln wir in unserem CLS-Guide für Shopify.

Überprüfen, ob es funktioniert. Chrome DevTools → Network-Tab → nach Img filtern → neu laden bei deaktiviertem Cache. Du solltest eine kurze initiale Liste von Bildern sehen, dann erscheinen neue Zeilen, wenn du scrollst. Wenn jedes Bild sofort heruntergeladen wird, erreichen deine loading-Attribute das gerenderte HTML nicht - überprüfe, ob eine App oder ein Skript die Tags umschreibt.

Welche Bilder sollten NICHT per Lazy Load geladen werden?

Das Hero-Bild / Banner-Bild. Dies ist typischerweise das Largest Contentful Paint (LCP) Element — das größte sichtbare Bild, wenn die Seite zum ersten Mal lädt. LCP ist einer der Core Web Vitals, die Google als Signal für die Seiten-Erfahrung (Page Experience) nutzt.

Ein Lazy Load für dein Hero-Bild bedeutet, dass der Browser mit dem Download wartet, bis er es “braucht” — aber er braucht es sofort. Das schadet deinem LCP-Score erheblich.

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

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

fetchpriority="high" zieht das Bild anderen Bildern in der Download-Warteschlange vor, was LCP normalerweise verkürzt.

Für einen detaillierten Leitfaden inklusive des section.index-Patterns und <link rel="preload"> in der theme.liquid, siehe Hero Banner Eager Loading in Shopify reparieren.

Das erste Produktbild auf Collection-Seiten. Wenn deine Collection-Seite Produktbilder in einem Grid anzeigt, ist die erste Reihe der Bilder sofort sichtbar. Diese sollten nicht per Lazy Load geladen werden. Nur die Bilder Below-the-fold profitieren von Lazy Loading.

Einige Themes lösen das mit bedingter Logik (conditional logic) — sie wenden loading="lazy" nur auf Bilder nach den ersten paar Karten an.

srcset für responsive Bilder verwenden

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

Shopifys image_tag-Filter generiert srcset automatisch. Bei älterer img_url-Nutzung:

<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 }}"
/>

Wenn du überlegst, ob ein Bild-Host von einem Drittanbieter besser ist als der integrierte von Shopify, schau dir unseren Shopify Image CDN Vergleich an.

Ist Lazy Loading in Shopify nur für Bilder?

Nein. Lazy Loading gilt auch für Videos. Shopify-Themes können <video>-Elemente mit preload="none" und einem Poster-Bild verzögern, und YouTube/Vimeo-Embeds können über ein Facade-Pattern (ein statisches Thumbnail wird angezeigt, bis der Nutzer auf Play klickt) per Lazy Load geladen werden. Für eine vollständige Anleitung siehe unseren Guide über Lazy Loading für Videos in Shopify. Ebenso können Iframes (genutzt für eingebettete Karten oder Formulare) mit loading="lazy" verzögert werden. Bilder bleiben jedoch das Ziel mit dem höchsten Impact, da sie das häufigste schwere Asset auf Shopify-Produkt- und Collection-Seiten sind.

Lazy Loading ist einer von vielen Speed-Fixes. Für den Rest siehe Wie man ein Shopify-Theme schneller macht.

FAQ