Max IT solutionsShopify App Store

Shopify Lazy Loading: Bilder später laden, Hero-Bild sofort

· 4 min read

Shopify Lazy Loading bedeutet, dass der Browser Bilder weiter unten auf der Seite erst lädt, wenn jemand in ihre Nähe scrollt, und der erste Bildschirm dadurch schneller da ist. Aktuelle Shopify-Themes erledigen das bereits über den Liquid-Filter image_tag. Das größte Bild im sichtbaren Bereich, meist das Hero-Banner oder das Hauptfoto auf der Produktseite, darf dagegen nie lazy geladen werden, weil es sonst den Largest Contentful Paint (LCP) verzögert.

Was Shopify schon für dich erledigt

Zusammen mit dem Theme-Code liefert Shopifys Bild-CDN Bilder verkleinert und komprimiert aus. Laut der Hilfeseite Verbesserung der Leistung deines Onlineshops bremsen vor allem das Theme, die installierten Apps und zusätzlicher Code von Drittanbietern einen Shop, und zu viele Abschnitte in einer Seitenvorlage kosten ebenfalls Tempo.

Lazy Loading regelt nur den Zeitpunkt, zu dem ein Bild geladen wird. Die Dokumentation von image_tag (gelesen am 1. November 2026) beschreibt den Standard so: Setzt du bei image_tag kein preload, bekommen Bilder in Abschnitten weiter unten auf der Seite automatisch loading="lazy". Eine feste Abschnittsnummer nennt Shopify dort nicht. Wer ein anderes Verhalten braucht, soll eigene Logik mit section.index und section.location schreiben.

Erst prüfen, dann ändern

Ob dein Hero-Bild betroffen ist, siehst du in wenigen Minuten:

  1. Öffne die Startseite oder eine Produktseite in PageSpeed Insights und wähle die mobile Auswertung. In seinen Hinweisen zum LCP zeigt das Tool, welches Element den LCP auslöst. Meist ist es das Hero-Bild oder das erste Produktfoto.
  2. Öffne dieselbe Seite in Chrome, klicke mit der rechten Maustaste auf dieses Bild und wähle Untersuchen. Steht im <img>-Tag loading="lazy", wird das wichtigste Bild der Seite zu spät geladen.
  3. Prüfe so jede Seitenvorlage, die viele Besuche bekommt: Startseite, Kollektion, Produkt und jede Landingpage aus einem Page Builder.

Ist das LCP-Element kein Bild, sondern eine Überschrift oder ein Video, hilft Lazy Loading an dieser Stelle nichts. Dann liegt die Ursache woanders, etwa bei Apps oder Animationen.

Das Hero-Bild im Theme korrigieren

Aktualisiere das Theme zuerst auf die neueste Version und miss erneut. Ist das Hero-Bild danach immer noch lazy, setzt du die Ladestrategie nach der Position des Abschnitts. Das kann eine Entwicklerin oder ein Entwickler übernehmen, oder du arbeitest selbst an einer Kopie:

  1. Gehe zu Onlineshop > Themes, öffne beim veröffentlichten Theme das Menü … und wähle Duplizieren.
  2. Öffne bei der Kopie … > Code bearbeiten und im Ordner sections die Datei des Hero- oder Bildbanner-Abschnitts.
  3. Setze den folgenden Block über den vorhandenen Aufruf von image_tag und ergänze im Aufruf loading: img_loading, fetchpriority: img_priority wie in der letzten Zeile. Steht dort schon loading oder fetchpriority, ersetzt du nur den Wert. Alles andere im Aufruf bleibt unverändert. So lädt das Bild in den ersten drei Abschnitten der Vorlage sofort, im ersten mit hoher Priorität, und darunter lazy:
{%- liquid
  assign img_loading = 'lazy'
  assign img_priority = 'auto'
  if section.location == 'template' and section.index <= 3
    assign img_loading = 'eager'
  endif
  if section.location == 'template' and section.index == 1
    assign img_priority = 'high'
  endif
-%}
{{ section.settings.image | image_url: width: 2000 | image_tag: loading: img_loading, fetchpriority: img_priority }}
  1. Öffne die Vorschau der Kopie, wiederhole dort die Prüfung von oben und veröffentliche die Kopie erst, wenn das LCP-Bild ohne loading="lazy" geladen wird.

Im Beispiel heißt die Bild-Einstellung section.settings.image; in deinem Theme steht der Name schon im vorhandenen Aufruf. fetchpriority="high" bekommt nur das LCP-Bild. Shopifys Leitfaden zur Theme-Performance nennt diese Angabe auf dem LCP-Bild eine einzeilige Änderung mit messbarem Effekt. Derselbe Leitfaden warnt vor Einblend- und Fade-in-Animationen, weil sie den LCP auch dann verzögern, wenn das Bild längst geladen ist. Hat dein Banner eine solche Animation, miss die Seite einmal ohne sie.

Wenn die Korrektur nicht greift

Im Theme-Editor. Laut der Referenz des section-Objekts ist section.index beim Rendern im Theme-Editor leer, ebenso bei statisch eingebundenen Abschnitten. Mit dem Code oben lädt das Hero-Bild im Editor deshalb lazy. Das ist harmlos, aber messen solltest du nur in der Vorschau oder im Live-Shop.

Abschnitte über dem Hero. section.index zählt ab 1 innerhalb des jeweiligen Bereichs. Fügst du in der Vorlage einen App-Abschnitt oder ein Textbanner über dem Hero ein, rutscht das Hero-Bild eine Position nach unten. Schon ab Position 2 verliert es mit dem Code oben die hohe Priorität, ab Position 4 lädt es lazy. Abschnitte der Header-Gruppe, etwa die Ankündigungsleiste, haben section.location = header und zählen für die Vorlage nicht mit.

Page Builder und eigene Vorlagen. Manche Page-Builder-Apps setzen ihr eigenes loading-Attribut. Für diese Seiten gilt die Prüfung aus Schritt 2 genauso, für die Korrektur wendest du dich an den Anbieter der App.

Wie schnell der Shop bei echten Besuchen lädt, zeigen die Web-Performance-Berichte in deinem Shopify-Admin; Mitarbeitende brauchen dafür die Berechtigung für Berichte. Wie du die Produktfotos selbst für Suche und Ladezeit vorbereitest, steht im Artikel zu Produktseiten-SEO. Weitere Anleitungen für den Shopalltag findest du unter Shop betreiben.

Häufige Fragen

Was tun, wenn schon eine Lazy-Loading-App installiert ist? Prüfe mit Schritt 2 aus „Erst prüfen, dann ändern“, ob das Hero-Bild loading="lazy" trägt. Aktuelle Themes laden Bilder weiter unten über image_tag bereits selbst lazy, und laut Shopify gehören Apps zu den größten Faktoren für die Ladezeit. Bringt die App keinen messbaren Vorteil, deinstallierst du sie. Laut Shopify entfernt eine Deinstallation den Code einer App nicht automatisch aus dem Theme; frag den Anbieter, wie du ihn vollständig entfernst.

Soll ich alle Bilder auf eager stellen? Das solltest du nicht tun, denn dann konkurrieren Dutzende Bilder mit dem Hero-Bild um die Bandbreite. Shopify empfiehlt, Bilder im ersten sichtbaren Bereich immer sofort zu laden und loading="lazy" nur für Bilder außerhalb davon zu verwenden.