Shopify Lazy Loading funktioniert nicht? 8 Korrekturen, die tatsächlich funktionieren

So diagnostizieren Sie Shopify-Lazy-Loading-Probleme

Bevor Sie sich an die Korrekturen machen, stellen Sie sicher, dass Lazy Loading tatsächlich unterbrochen ist. Hier ist eine kurze 2-Minuten-Diagnose:

Schritt 1: Überprüfen Sie die Registerkarte „Netzwerk“.

Wenn beim Laden der Seite alle Bilder gleichzeitig geladen werden: Lazy Loading funktioniert überhaupt nicht.
Wenn einige Bilder beim Scrollen geladen werden, viele jedoch im Voraus: Lazy Loading funktioniert teilweise, aber einige Bilder fehlen.
Wenn Bilder beim Scrollen schrittweise geladen werden: Lazy Loading funktioniert – der PageSpeed-Vorschlag betrifft möglicherweise ein anderes Problem.

Schritt 2: Einzelne Bilder prüfen

Klicken Sie mit der rechten Maustaste auf ein unten angezeigtes Bild → Untersuchen. Überprüfen Sie die <img> -Tag für:

Sie können auch einen Schnellcheck mit unserem durchführen kostenloser Shopify-Geschwindigkeitstest – es kennzeichnet verzögerte Bildprobleme automatisch.

Fix 1: Ihr Theme verwendet image_tag nicht

Das Problem: Viele Shopify-Themes, insbesondere vor 2022 erstellte oder stark angepasste, verwenden einfache <img>-Tags statt Shopifys Liquid-Filter image_tag. Ohne image_tag fehlen automatisches verzögertes Laden, responsives srcset und die WebP-Auslieferung.

So prüfen Sie: Öffnen Sie Ihren Theme-Code (Online-Shop → Themes → Code bearbeiten) und suchen Sie nach image_tag in Abschnittsdateien. Wenn Sie meistens roh finden Wenn Sie stattdessen <img src= -Tags verwenden, verwendet Ihr Theme nicht die moderne Bildpipeline von Shopify.

Die Lösung: Ersetzen Sie einfache <img>-Tags durch den Filter image_tag. Dafür müssen Sie die Liquid-Dateien Ihres Themes bearbeiten:

<img src="{{ image | image_url: width: 800 }}" alt="{{ image.alt }}" />

{{ image | image_url: width: 800 | image_tag: loading: "lazy", alt: image.alt }}

Für die vollständige Anleitung zur nativen Lazy-Loading-Implementierung, einschließlich section.index Logik, siehe unsere Shopify native Lazy Loading-Anleitung.

Fix 2: App-injizierte Bilder umgehen das Lazy Loading Ihres Themes

Das Problem: Jede Shopify-App, die visuelle Elemente hinzufügt – Bewertungs-Widgets (Judge.me, Loox), Vertrauensabzeichen (Trust Hero), Upsell-Popups (ReConvert), Chat-Widgets (Tidio) – fügt ihren eigenen HTML-Code und ihre eigenen Bilder direkt in die Seite ein. Diese Bilder sind nicht wird über die Liquid-Vorlagen Ihres Themes gerendert, sodass die Lazy-Loading-Logik Ihres Themes diese nie berührt.

Der durchschnittliche Shopify-Shop verfügt über 6–8 Apps. Jeder kann 1–5 Bilder plus JavaScript einfügen. Das sind potenziell mehr als 30 Bilder und Skripte, die eifrig geladen werden und die Ihr Theme nicht kontrollieren kann.

So prüfen Sie es: Suchen Sie in den DevTools nach Bildern unterhalb des sichtbaren Bereichs, die sofort geladen wurden. Klicken Sie mit der rechten Maustaste und wählen Sie „Untersuchen“. Wenn das Bild in ein <div> mit einer app-spezifischen Klasse wie jdgm-widget oder loox-widget eingeschlossen ist und nicht im HTML Ihres Themes erscheint, wird es von der App eingefügt.

Die Lösung: Dies ist das Problem, das am schwierigsten manuell zu lösen ist. Optionen:

Fix 3: JavaScript und natives Lazy Loading sind widersprüchlich

Das Problem: Einige Themes enthalten eine JavaScript-Lazy-Loading-Bibliothek (wie Lazysizes) und native loading="lazy"-Attribute. Dies führt zu einer doppelten Verarbeitung: Der native IntersectionObserver des Browsers wird ausgelöst, und Die JS-Bibliothek führt ihren eigenen Beobachter aus. Das Ergebnis können Bilder sein, die blinken, zweimal geladen werden oder – in manchen Fällen – überhaupt nicht geladen werden.

Dies passiert auch, wenn Händler eine Lazy-Loading-App zusätzlich zu einem Theme installieren, das bereits über natives Lazy-Loading verfügt.

So prüfen Sie: Suchen Sie nach beiden auf demselben Bild:

• • loading="lazy" (nativ)
• • class="lazyload" oder data-src (JavaScript-Bibliothek)

Wenn Sie beides sehen, liegt ein Konflikt vor. Suchen Sie auch nach lazysizes.js oder ähnlichen Bibliotheken im Assets-Ordner Ihres Themes.

Die Lösung: Entfernen Sie die JavaScript-Bibliothek für verzögertes Laden und verwenden Sie stattdessen das native Attribut loading="lazy". Im Jahr 2026 unterstützen 96 %+ der Browser natives verzögertes Laden; eine zusätzliche JS-Bibliothek ist dafür nicht nötig. Entfernen Sie das Bibliotheksskript aus Ihrem Theme und ändern Sie die Attribute data-src zurück in src, ergänzt um loading="lazy".

<img data-src="product.jpg" class="lazyload" alt="Produkt" />

<img src="product.jpg" loading="lazy" alt="Produkt" width="600" height="400" />

Fix 4: CSS-Hintergrundbilder können nicht verzögert geladen werden

Das Problem: Die loading="lazy" funktioniert nur bei <img> und <iframe> Elemente. Über CSS eingestellte Bilder background-image werden immer heruntergeladen, sobald das CSS analysiert wird – auch wenn das Element weit unterhalb der Falte liegt.

Viele Themes verwenden CSS-Hintergrundbilder für Heldenabschnitte, Banner-Overlays, Parallax-Effekte und dekorative Muster. Diese sind für natives Lazy Loading unsichtbar.

So prüfen Sie: Suchen Sie in DevTools auf der Registerkarte „Netzwerk“ nach Bildern, die sofort geladen wurden, aber nicht auf dem Bildschirm sichtbar sind. Klicken Sie auf die Bild-URL → prüfen Sie, ob in einer CSS-Datei und nicht in einer HTML-Datei darauf verwiesen wird <img> -Tag.

Die Lösung: Zwei Ansätze:

Für „above-fold“-Heldenabschnitte sind CSS-Hintergrundbilder in Ordnung – sie sollte sofort laden. Das Problem liegt bei Abschnitten unterhalb der Falte, die Hintergrundbilder verwenden. Erfahren Sie mehr über die Optimierung aller Arten von Bildern in unserem Leitfaden zur Shopify-Bildoptimierung.

Fix 5: Benutzerdefinierte Abschnitte fehlen loading Attribut

Das Problem: Die Standardabschnitte Ihres Themes verarbeiten Lazy Loading möglicherweise korrekt, aber benutzerdefinierte Abschnitte – die von Entwicklern oder Abschnittserstellungs-Apps hinzugefügt wurden – überspringen es oft. Ein einzelner benutzerdefinierter Abschnitt mit Eager-Loaded-Bildern kann 5–10 zusätzliche Bilder auf jeder Seite laden.

So prüfen Sie: Überprüfen Sie Bilder in verschiedenen Abschnitten Ihrer Seite. Achten Sie auf Abschnitte, die sich vom Standardstil des Themes unterscheiden – dies sind wahrscheinlich benutzerdefinierte Ergänzungen. Überprüfen Sie jeden auf loading="lazy".

Die Lösung: Bearbeiten Sie jede benutzerdefinierte Abschnittsdatei und fügen Sie sie hinzu section.index Logik:

{%- liquid
  if section.index > 2
    assign loading = "lazy"
  else
    assign loading = "eager"
  endif
-%}

{{ section.settings.image | image_url: width: 1200 | image_tag: loading: loading }}

Wenden Sie dies auf jeden benutzerdefinierten Abschnitt an, der Bilder anzeigt. Für einen Überblick darüber, wie section.index funktioniert und wann zu verwenden Lazy vs. Eifer Loading, siehe unseren Vergleichsführer.

Fix 6: Ihr Theme lädt träge Bilder über dem Fold (beschädigt LCP)

Das Problem: Das ist das gegenteilige Problem – und ironischerweise ist es das auch schlimmer als überhaupt kein Lazy Loading zu haben. Einige Themes verwenden loading="lazy" für jedes Bild, einschließlich des Heldenbanners und des Hauptproduktfotos. Dadurch wird der Browser gezwungen, den IntersectionObserver auszuführen, bevor er Ihr wichtigstes Bild herunterlädt, wodurch Ihr LCP um 200–1000 ms verlängert wird.

So prüfen Sie: Gehen Sie zu Ihrer Homepage. Klicken Sie mit der rechten Maustaste auf Ihr Helden-/Bannerbild → „Inspizieren“. Wenn Sie sehen loading="lazy", es schadet Ihrem LCP. Machen Sie dasselbe für das Hauptproduktbild auf einer Produktseite.

Die Lösung: Laden Sie die anfangs sichtbaren Bilder sofort und ergänzen Sie fetchpriority="high" zu Ihrem LCP-Bild:

{{ section.settings.hero_image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high" }}

Eine detaillierte LCP-Fehlerbehebung finden Sie in unserem Shopify LCP-Optimierungsleitfaden.

Fix 7: Fehlende Breite und Höhe verursachen Layoutverschiebung

Das Problem: Ursache für verzögert geladene Bilder ohne explizite Abmessungen Kumulative Layoutverschiebung (CLS). Bevor das Bild geladen wird, reserviert der Browser keinen Platz dafür. Wenn das Bild schließlich heruntergeladen wird, springt die Seite, während der Inhalt nach unten verschoben wird. Besucher sehen Alternativtext in einem winzigen eingestürzten Raum, dann eine plötzliche visuelle Veränderung – eine schreckliche Erfahrung.

So prüfen Sie: Achten Sie in DevTools beim Scrollen auf Layoutsprünge. Sie können auch ein Lighthouse-Audit durchführen – CLS-Probleme werden mit der Meldung „Bildelemente haben keine explizite Breite und Höhe“ gekennzeichnet.

Die Lösung: Geben Sie bei Bildern immer die Attribute width und height an oder verwenden Sie die CSS-Eigenschaft aspect-ratio:

<img src="product.jpg" loading="lazy" alt="Produkt" width="600" height="400" />

.product-image {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
}

Profi-Tipp: Shopifys image_tag-Filter fügt automatisch Breiten- und Höhenattribute hinzu. Wenn Sie unverarbeitete <img>-Tags verwenden, müssen Sie diese Attribute selbst ergänzen. Das ist ein weiterer Grund, Shopifys nativen image_tag-Filter zu verwenden.

Fix 8: Safari- und Browser-Kompatibilität

Das Problem: Safari hat in Version 15.4 (März 2022) native Lazy-Loading-Unterstützung hinzugefügt. Wenn Sie in einer älteren Safari-Version testen, funktioniert Lazy Loading nicht. Häufiger ist der Lazy-Loading-Schwellenwert von Safari anders als der von Chrome – Safari beginnt, Lazy-Bilder früher zu laden (weiter vom Viewport entfernt), was den Eindruck erwecken kann, dass Lazy Loading auf Apple-Geräten nicht funktioniert.

So prüfen Sie: Wenn Lazy Loading in Chrome, aber nicht in Safari funktioniert, überprüfen Sie die Safari-Version. Beachten Sie außerdem, dass die IntersectionObserver-Implementierung von Safari leicht unterschiedliche Stammränder aufweist – Bilder werden möglicherweise zwei bis drei Bildschirmhöhen lang geladen, bevor sie in das Ansichtsfenster gelangen.

Die Lösung: In den meisten Fällen ist das Verhalten von Safari eigentlich in Ordnung – es ist nur aggressiver beim Vorladen. Wenn Sie eine exakte Parität zwischen den Browsern benötigen, benötigen Sie JavaScript-basiertes Lazy Loading mit expliziten Schwellenwerten. Im Jahr 2026 ist jedoch natives Lazy Loading mit Browser-Standardschwellenwerten der empfohlene Ansatz.

Für die wirklich Paranoiden: Überprüfen Sie caniuse.com/loading-lazy-attr für die aktuelle Browserunterstützung – sie liegt weltweit bei über 96 % und deckt praktisch alle Shopify-Käufer ab.

Wann sollte die DIY-Fehlerbehebung beendet werden?

Wenn zwei bis drei dieser Probleme gleichzeitig auftreten (was in Stores mit älteren Themes und mehreren Apps häufig vorkommt), wird es unpraktisch, sie manuell zu beheben. Jeder Fix erfordert Änderungen am Theme-Code, die bei Theme-Updates zu Problemen führen können, und in die App eingefügte Inhalte liegen im Wesentlichen außerhalb Ihrer Kontrolle.

Hier ist ein dedizierter Geschwindigkeitsoptimierungs-App verdient seinen Lebensunterhalt. Anstatt einzelne Probleme zu beheben, erhalten Sie eine Lösung, die den gesamten Optimierungsstapel – Bilder, Skripte, CSS, Schriftarten – für jedes Thema und jede Kombination von Apps verwaltet.

Nicht bereit für eine App? Zumindest Führen Sie einen kostenlosen Geschwindigkeitstest durch , um Ihre aktuelle Ausgangslage zu verstehen und herauszufinden, welche Probleme Ihre Leistung tatsächlich am meisten beeinträchtigen. Eine umfassendere Optimierungsanleitung finden Sie in unserem Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung behandelt jede Technik im Detail.

Häufig gestellte Fragen

Sorgen Sie dafür, dass Ihr Shopify Lazy Loading ordnungsgemäß funktioniert

Probleme mit Lazy Loading bei Shopify sind fast immer auf Lücken in der Theme-Implementierung, App-Konflikte oder falsches Above-the-Fold-Verhalten zurückzuführen. Die Lösungen reichen von einfach (Hinzufügen von loading="lazy" auf ein paar Bilder) bis komplex (Überarbeitung benutzerdefinierter Abschnitte und Verwaltung von App-injizierten Inhalten).

Denken Sie daran: Selbst perfektes Lazy Loading befasst sich nur mit der Bildlieferung. Renderblockierende Skripte und nicht optimiertes CSS verursachen oft mehr Schaden als nicht verzögerte Bilder. Ein umfassender Ansatz – der gemeinsame Umgang mit Bildern, Skripten, CSS und Schriftarten – liefert die besten Ergebnisse.

Beginnen Sie hier: Testen Sie die Geschwindigkeit Ihres Shops , um genau zu sehen, was sich auf die Leistung auswirkt, und arbeiten Sie dann die oben genannten Korrekturen durch – oder lassen Sie es Thunder erledigt das automatisch. Die Pläne beginnen um 19,99 $/Monat mit einer kostenlosen Testversion.