Lazy Loading in Shopify: Bilder richtig nachladen

Lazy Loading bedeutet: Bilder werden erst geladen, wenn sie in den sichtbaren Bereich scrollen – in Shopify erledigst du das mit dem HTML-Attribut loading="lazy" direkt im Liquid-Code oder über den image_tag-Filter. Der Haken, an dem die meisten Shops scheitern: Das größte Bild im sichtbaren Bereich (dein LCP-Element) darf niemals lazy geladen werden, sonst verschlechterst du deine Ladezeit statt sie zu verbessern. In diesem How-To lernst du die korrekte Umsetzung, die wichtige LCP-Ausnahme und wie du dein Theme in 15 Minuten prüfst.

Wie Lazy Loading technisch funktioniert

Moderne Browser bringen natives Lazy Loading mit – ganz ohne JavaScript-Bibliothek:

<img src="produktbild.jpg" loading="lazy" width="800" height="800" alt="Produktname">

Der Browser entscheidet anhand der Scroll-Position selbst, wann er das Bild lädt. JavaScript-Lösungen wie lazysizes, die früher Standard waren, sind heute in fast allen Fällen überflüssig – und in alten Themes oft sogar ein Performance-Problem, weil das Bild dann erst nach dem JavaScript-Parsing geladen wird.

In Shopify-Themes nutzt du idealerweise den image_tag-Filter, der auch srcset und sizes für responsive Bilder generiert:

{{ product.featured_image
  | image_url: width: 1500
  | image_tag: loading: 'lazy', widths: '400, 700, 1000, 1500' }}

Die LCP-Ausnahme: Das wichtigste Bild niemals lazy laden

Der Largest Contentful Paint (LCP) misst, wann das größte sichtbare Element gerendert ist – im E-Commerce fast immer das Hero- oder Produktbild. Setzt du dort loading="lazy", stufst du genau dieses Bild in der Browser-Priorität herab: Der Browser wartet erst Layout-Berechnungen ab, bevor er es anfordert. Ergebnis: Der LCP-Wert wird schlechter, nicht besser. Google nennt das explizit als einen der häufigsten LCP-Fehler.

Richtig ist das Gegenteil – das LCP-Bild bekommt eager Loading plus hohe Priorität:

<img src="hero.jpg" loading="eager" fetchpriority="high" width="1600" height="900" alt="...">

Als Faustregel für Shopify-Templates:

• Startseite: Hero-Bild eager + fetchpriority="high", alles darunter lazy.
• Produktseite: Erstes Galeriebild eager, alle weiteren Galeriebilder lazy.
• Collection-Seite: Die ersten 2–4 Produktkacheln (above the fold) eager, der Rest lazy. In der Produktgrid-Schleife löst du das elegant mit dem Schleifenindex:

{% for product in collection.products %}
  {% if forloop.index <= 4 %}
    {{ product.featured_image | image_url: width: 600 | image_tag: loading: 'eager' }}
  {% else %}
    {{ product.featured_image | image_url: width: 600 | image_tag: loading: 'lazy' }}
  {% endif %}
{% endfor %}

Wie LCP mit den anderen Core Web Vitals zusammenhängt und welche Hebel darüber hinaus zählen, liest du im Grundlagenartikel Shopify Core Web Vitals & Speed.

So prüfst du dein Theme in 15 Minuten

1. PageSpeed Insights für Startseite, eine Produktseite und eine Collection laufen lassen. Unter "LCP-Element" siehst du, welches Element gemessen wird.
2. Rechtsklick auf das LCP-Bild → Untersuchen: Steht dort loading="lazy"? Dann hast du den häufigsten Fehler gefunden.
3. Theme-Code durchsuchen: Suche im Code-Editor nach loading= und lazysizes. Gute Themes bieten pro Section eine Einstellung oder setzen die Logik wie oben per forloop.index.
4. Scroll-Test: Öffne den Netzwerk-Tab der DevTools (Filter: Img), lade die Seite und scrolle langsam. Laden Bilder erst beim Scrollen nach? Dann funktioniert Lazy Loading unterhalb des Folds korrekt.

Häufige Fehler beim Lazy Loading

• Alles pauschal lazy laden: Der Klassiker – auch Hero- und erstes Produktbild bekommen loading="lazy". Ergebnis: schlechterer LCP, schlechtere Rankings, obwohl "optimiert" wurde.
• Fehlende width/height-Attribute: Ohne Dimensionen springt das Layout, wenn Bilder nachladen – das ruiniert deinen CLS-Wert (Cumulative Layout Shift).
• JavaScript-Lazy-Loading doppelt zum nativen: Alte Themes kombinieren lazysizes mit loading="lazy" – unnötige Komplexität und Fehlerquelle. Native Lösung reicht.
• Lazy Loading als Ersatz für Bildkomprimierung: Ein 4-MB-PNG bleibt ein Problem, auch wenn es spät lädt. Shopify liefert Bilder über image_url automatisch als WebP/AVIF aus – aber nur, wenn du Größenparameter setzt statt Originaldateien einzubinden.
• Hintergrundbilder per CSS vergessen: background-image kennt kein loading-Attribut. Große Hero-Hintergründe besser als <img> mit object-fit: cover umsetzen.

Was Lazy Loading realistisch bringt

Auf bildlastigen Seiten – Collections mit 24+ Produkten, Lookbooks, lange Landingpages – reduziert korrektes Lazy Loading das initial übertragene Bildvolumen häufig um 50–80 %. Das verbessert Time to Interactive und spart mobilen Nutzern Datenvolumen. Aber: Lazy Loading ist ein Baustein, kein Wundermittel. Render-blockierendes JavaScript, App-Overhead und unkomprimierte Bilder wiegen oft schwerer. Eine strukturierte Analyse aller Hebel findest du auf meiner Seite zur Shopify Performance-Optimierung.

Du willst wissen, wo dein Shop konkret Ladezeit verliert? In einem kostenlosen Erstgespräch schaue ich mir deine Werte an und sage dir ehrlich, welche Maßnahmen sich lohnen – aus über 100 Projekten weiß ich, welche 20 % der Maßnahmen 80 % der Wirkung bringen. Umsetzung auf Wunsch zum Festpreis, bewertet mit 5,0★ bei Google (52 Bewertungen).

FAQ zu Lazy Loading in Shopify

Brauche ich eine App für Lazy Loading in Shopify?

Nein. Natives Lazy Loading per loading="lazy" ist in allen modernen Browsern verfügbar und in aktuellen Themes bereits eingebaut. Eine App würde nur zusätzliches JavaScript laden – also genau das Gegenteil von Performance-Optimierung.

Schadet Lazy Loading meinem SEO?

Korrekt eingesetzt nein – Google rendert Seiten und erfasst nativ lazy geladene Bilder problemlos. Schädlich ist nur der Fehler, das LCP-Bild lazy zu laden: Das verschlechtert deine Core Web Vitals und damit ein Ranking-Signal.

Woher weiß ich, welches Bild mein LCP-Element ist?

PageSpeed Insights zeigt es dir: Unter der Diagnose "Largest Contentful Paint-Element" wird das gemessene Element samt Markup angezeigt. Prüfe das für Startseite, Produktseite und Collection getrennt – es ist auf jedem Template ein anderes.

Gilt Lazy Loading auch für Videos und Iframes?

Ja, loading="lazy" funktioniert auch auf <iframe> – sinnvoll etwa für eingebettete YouTube-Videos weiter unten auf der Seite. Noch besser ist die Facade-Technik: erst ein Vorschaubild zeigen und den Player erst beim Klick laden.