Was Shopify nativ für Lazy Loading tut
Shopify verfügt über keinen einzigen „Lazy Loading“-Schalter in Ihrem Admin-Bereich. Unter Einstellungen → Leistung gibt es kein Kontrollkästchen, das es im gesamten Store aktiviert. Stattdessen bietet Shopify Tools für Theme-Entwickler , um Lazy Loading zu implementieren – und ob diese Tools verwendet werden, hängt ganz von Ihrem Theme ab.
Folgendes bietet Shopify auf Plattformebene:
Der Liquid-Filter image_tag — Wenn Themes Bilder mit diesem Filter ausgeben, kann Shopify für Bilder in weiter unten liegenden Abschnitten automatisch loading="lazy" setzen.
Die Eigenschaft section.index — Sie zeigt die Position eines Abschnitts auf der Seite an. So können Theme-Entwickler Bilder in den ersten beiden Abschnitten sofort und die Bilder darunter verzögert laden.
Automatische WebP/AVIF-Konvertierung – Das CDN von Shopify stellt Bilder automatisch in modernen Formaten bereit, wenn der Browser sie unterstützt, wodurch die Dateigröße um 25–50 % reduziert wird.
Responsive Bildgrößen — Der Filter image_tag erzeugt mehrere Bildgrößen, damit der Browser für jeden Bildschirm die passende Größe herunterlädt.
Das sind solide Bausteine. Aber es sind Bausteine – keine vollständige Lösung. Die meisten Leistungsprobleme liegen in der Lücke zwischen „verfügbaren Werkzeugen“ und „tatsächlich in Ihrem Geschäft verwendeten Werkzeugen“.
Neugierig, wo Ihr Geschäft steht? Führen Sie einen kostenlosen Geschwindigkeitstest durch um zu sehen, ob Lazy Loading Ihrer Leistung hilft oder sie beeinträchtigt.
So funktionieren image_tag und section.index in Shopify
Der Liquid-Filter image_tag ist Shopifys empfohlene Methode, um Bilder in Themes auszugeben. Richtig eingesetzt übernimmt er responsive Bildgrößen, Formatkonvertierung und verzögertes Laden in einer Zeile:
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy" }}Besonders nützlich ist die Kombination mit section.index. Diese Eigenschaft gibt die Position eines Abschnitts auf der Seite an. Das Performance-Team von Shopify empfiehlt die folgende Verwendung:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Dieser Code lädt Bilder in den ersten beiden Abschnitten (normalerweise Hero und Featured Collection) sofort und alles darunter verzögert. Dieser intelligente Ansatz vermeidet den häufigsten Fehler beim verzögerten Laden: das verzögerte Laden des LCP-Bildes.
Wichtig: Die Eigenschaft section.index wurde erst Ende 2022 eingeführt. Ältere Themes verwenden sie nicht und laden daher häufig entweder alle Bilder verzögert (schlecht für LCP) oder keines (schlecht für die Ladeleistung unterhalb des sichtbaren Bereichs).
Der Filter image_tag erzeugt außerdem ein srcset-Attribut mit mehreren Bildbreiten. Damit wählt der Browser die optimale Größe. Sobald ein verzögert geladenes Bild benötigt wird, verwendet der Browser die zur Breite des sichtbaren Bereichs passende Variante aus srcset.
Welche Shopify-Themes verfügen über natives Lazy Loading?
Nicht alle Themes sind gleich, wenn es um die Lazy-Loading-Implementierung geht. Hier ist die Aufschlüsselung:
Themes mit gutem nativen Lazy Loading
Dawn (und darauf basierende Themes) verwendet image_tag und section.index korrekt und ergänzt fetchpriority="high" bei LCP-Bildern. Dawn ist Shopifys Referenzimplementierung und ein Maßstab für die Theme-Leistung.
Sense, Craft, Taste, Colorblock — Diese kostenlosen Shopify-Themes basieren auf Dawn und übernehmen dieselbe Logik für verzögertes Laden.
Die meisten Premium-Themen wurden nach 2023 aktualisiert – Seriöse Theme-Entwickler wie Out of the Sandbox, Archetype und Prestige haben ihre Themes für die Verwendung aktualisiert section.index und image_tag.
Themes mit schlechtem oder keinem nativen Lazy Loading
Themes, die vor 2022 erstellt wurden – Diese sind vordatiert section.index und verwenden häufig JavaScript-Lazy-Loading-Bibliotheken wie Lazysizes oder überhaupt kein Lazy-Loading.
Stark angepasste Themen – Auch wenn das Basisthema Lazy Loading hatte, wird es durch benutzerdefinierte Änderungen oft beschädigt. Entwickler, die benutzerdefinierte Abschnitte hinzufügen, überspringen häufig das section.index Logik.
Themes, die nur JS-Lazy Loading verwenden – Einige Themes verwenden Lazysizes oder ähnliche Bibliotheken, die JavaScript-Overhead verursachen und zu Konflikten mit dem Lazy Loading des nativen Browsers führen können.
Sie sind sich nicht sicher, in welche Kategorie Ihr Thema fällt? Der einfachste Weg, dies herauszufinden, besteht darin, Ihre Website zu inspizieren – worauf wir im Folgenden eingehen -Testabschnitt unten. Weitere Informationen zur Theme-Performance finden Sie in unserem Leitfaden schnellste Shopify-Themen.
5 Dinge, die Shopifys natives Lazy Loading nicht abdeckt
Auch mit einem modernen Theme image_tag richtig, das native Lazy Loading von Shopify weist erhebliche blinde Flecken auf:
1. App-injizierte Bilder und Skripte
Jede Shopify-App, die visuelle Elemente hinzufügt – Bewertungs-Widgets, Vertrauensabzeichen, Upsell-Popups, Chat-Widgets – fügt ihre eigenen Bilder und Skripte direkt in das DOM ein. Diese umgehen das verzögerte Laden Ihres Themes vollständig, da sie nicht über Liquid gerendert werden image_tag.
Im durchschnittlichen Shopify-Shop sind 6–8 Apps installiert. Jeder fügt Skripte hinzu, die sofort geladen werden, unabhängig davon, wo sie auf der Seite erscheinen. Das ist das größter Geschwindigkeitskiller in den meisten Geschäften – und es liegt völlig außerhalb des Bereichs des nativen Lazy Loading.
2. CSS-Hintergrundbilder
Die loading="lazy" funktioniert nur bei <img> und <iframe> Elemente. Als CSS-Hintergründe festgelegte Bilder (background-image: url(...)) – häufig in Heldenabschnitten, Bannern und Abschnittsüberlagerungen – werden immer eifrig geladen. Der Browser lädt sie herunter, sobald er das CSS analysiert, auch wenn der Abschnitt weit unterhalb der Falte liegt.
3. Videos und Einbettungen
Während loading="lazy" funktioniert technisch gesehen mit Iframes (einschließlich YouTube-Einbettungen) und Shopify
Der image_tag -Filter gilt nicht für Videoelemente oder Iframes, sondern nur für Bilder. Händler, die Produktvideos, YouTube-Rezensionen oder Instagram-Einbettungen hinzufügen, müssen Lazy Loading separat behandeln. Sehen Sie sich unsere an Leitfaden zur Shopify-Videooptimierung für Fassadenmuster und verzögerte Belastungstechniken. Weitere Informationen zu den Kompromissen finden Sie hier Lazy Loading vs. Eager Loading auf Shopify.
4. Responsive Ladeentscheidungen
Die section.index > 2 Ansatz ist eine grobe Heuristik. Was auf einem Desktop-Monitor „unterhalb des Falzes“ liegt, unterscheidet sich stark von einem Mobiltelefon. Ein Bildraster, das auf dem Desktop 4 Spalten anzeigt (alle sichtbar), zeigt auf dem Mobiltelefon möglicherweise 1 Spalte an (nur 1 sichtbar). Natives Lazy Loading passt sich nicht an die Bildschirmgröße an – es verwendet unabhängig vom Gerät dieselbe abschnittsbasierte Logik.
5. Skriptverzögerung
Das verzögerte Laden von Bildern ist nur die halbe Leistungsgleichung. Renderblockierende Skripte — sowohl von Ihrem Theme als auch von Apps — verursachen oft mehr Leistungsschäden als unoptimierte Bilder. Natives Lazy Loading befasst sich mit Bildern, tut aber nichts für JavaScript. Das Verzögern von App-Skripten, das Inline-Stellen von kritischem CSS und das Vorladen von Schriftarten erfordern ein völlig anderes Toolset.
Füllen Sie jede Lücke: Thunder bewältigt, was natives Lazy Loading nicht kann
Thunder Page Speed Optimizer ergänzt das native Lazy Loading Ihres Themes und schließt die oben genannten Lücken. Es erkennt Ihr LCP-Bild automatisch und lädt es sofort. Inhalte außerhalb des anfänglich sichtbaren Bereichs, einschließlich von Apps eingefügter Inhalte, werden verzögert geladen. Außerdem verschiebt Thunder unkritische Skripte, auf die das Lazy Loading von Bildern keinen Einfluss hat.
- ✦ Verschiebt App-Skripte – der größte Geschwindigkeitskiller, den kein noch so großes Bild-Lazy-Loading beheben kann
- ✦ Intelligente LCP-Erkennung – lädt Inhalte im anfänglich sichtbaren Bereich niemals verzögert, unabhängig vom Gerät
- ✦ Funktioniert mit jedem Thema – alt, neu, benutzerdefiniert oder sofort einsatzbereit
- ✦ Integriert kritisches CSS + lädt Schriftarten vor – umfassende Optimierung, nicht nur das Laden von Bildern
Die meisten Shops erzielen nach der Installation eine Verbesserung des Geschwindigkeitswerts um mehr als 27 Punkte, weil Thunder den gesamten Optimierungsstapel berücksichtigt und nicht nur das Laden von Bildern. Preise ansehen.
Thunder installieren – Kostenlose Testversion →So überprüfen Sie, ob Ihr Shopify-Shop über Lazy Loading verfügt
Bevor Sie Änderungen vornehmen, überprüfen Sie, ob Ihr Theme bereits Lazy Loading implementiert. Hier sind drei Möglichkeiten zur Überprüfung:
Methode 1: Element prüfen (30 Sekunden)
- 1. Öffnen Sie Ihren Shop in Chrome
- 2. Scrollen Sie nach unten zu einem Bild weit unterhalb des Falzes (z. B. ein Produkt in der dritten Zeile einer Kollektion).
- 3. Klicken Sie mit der rechten Maustaste auf das Bild → Untersuchen
- 4. Suchen Sie nach
loading="lazy"im<img>-Tag
Wenn Sie sehen loading="lazy", Ihr Theme verfügt über natives Lazy Loading für dieses Bild. Wenn Sie sehen loading="eager" oder überhaupt kein Ladeattribut, ist nicht der Fall.
Methode 2: Chrome DevTools-Netzwerkregisterkarte
- 1. Öffnen Sie DevTools (F12) → Registerkarte „Netzwerk“.
- 2. Filtern nach „Img“
- 3. Hard Reload (Strg+Umschalt+R)
- 4. Beobachten Sie die Bildanzahl – wenn alle Bilder sofort geladen werden, funktioniert Lazy Loading nicht
- 5. Scrollen Sie nun langsam nach unten – wenn beim Scrollen neue Bildanfragen auftauchen, ist Lazy Loading aktiv
Methode 3: PageSpeed Insights
Führen Sie Ihren Shop durch Google PageSpeed Insights. Wenn Ihnen die Empfehlung „Bilder außerhalb des Bildschirms verschieben“ angezeigt wird, werden Ihre Bilder im unteren Bereich nicht verzögert geladen. Wenn diese Empfehlung nicht angezeigt wird, funktioniert Lazy Loading wahrscheinlich. Sie können auch unsere nutzen kostenloser Shopify-Geschwindigkeitstest für eine schnelle Einschätzung.
Natives Lazy Loading manuell zu Shopify hinzufügen
Wenn Ihr Theme nicht über Lazy Loading verfügt oder es schlecht implementiert, erfahren Sie hier, wie Sie es manuell hinzufügen. Dazu müssen Sie die Liquid-Dateien Ihres Themes bearbeiten – erstellen Sie zunächst ein Backup.
Schritt 1: Verwenden Sie image_tag anstelle von img-Tags
Finden Sie Fälle, in denen Ihr Theme Raw verwendet <img> -Tags und ersetzen Sie sie durch die von Shopify image_tag -Filter. Dies allein bietet Ihnen reaktionsfähige Bilder, WebP-Konvertierung und die Grundlage für Lazy Loading.
Vorher (manuelles IMG-Tag):
<img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}" />Nachher (image_tag mit Lazy Loading):
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy", alt: product.title }}Schritt 2: section.index-Logik hinzufügen
Um ein verzögertes Laden von Bildern über dem Falz zu vermeiden, fügen Sie eine bedingte Logik basierend auf der Abschnittsposition hinzu:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Schritt 3: Fetchpriority zu Ihrem LCP-Image hinzufügen
Fügen Sie für Ihr Heldenbild oder Hauptproduktbild (das wahrscheinliche LCP-Element) hinzu fetchpriority="high" , um dem Browser mitzuteilen, dass er ihm Priorität einräumen soll:
{{ section.settings.hero_image | image_url: width: 1200 | image_tag: loading: "eager", fetchpriority: "high" }} ⚠️ Wichtig: Nur verwenden fetchpriority="high" auf 1–2 Bildern pro Seite. Die Verwendung auf mehreren Bildern macht den Zweck zunichte – wenn alles hohe Priorität hat, hat nichts Priorität. Für LCP-Optimierungsstrategienfinden Sie in unserem speziellen Leitfaden.
Häufige Native Lazy Loading-Fehler bei Shopify
❌ Faules Laden des Heldenbildes
Hinzufügen loading="lazy" zu Ihrem Hero-Banner oder vorgestellten Produktbild zwingt den Browser, darauf zu warten, dass der IntersectionObserver bestätigt, dass es sichtbar ist – was Ihrem LCP 200–1000 ms hinzufügt. Das Performance-Team von Shopify bestätigte, dass dies durchschnittlich 1,0 Sekunden LCP kostet.
❌ Natives und JS Lazy Loading mischen
Einige Themes enthalten lazysizes.js und nativ loading="lazy". Dadurch entsteht eine doppelte Verarbeitung: die nativen Lazy-Loading-Trigger des Browsers, und Die JS-Bibliothek führt ihre eigene Schnittlogik aus. Dies verschwendet CPU-Zeit und kann dazu führen, dass Bilder blinken oder zweimal geladen werden. Wählen Sie eines aus – Native ist im Jahr 2026 die richtige Wahl.
❌ Fehlende Breiten- und Höhenattribute
Lazy Loading ohne explizites Laden width und height Attribute (oder CSS-Seitenverhältnis) verursachen Kumulative Layoutverschiebung (CLS). Wenn das verzögerte Bild geladen wird, springt die Seite, da das Bild den Inhalt nach unten verschiebt. Die
Der image_tag -Filter fügt Dimensionen automatisch hinzu – ein weiterer Grund, ihn anstelle von Raw zu verwenden <img> -Tags.
❌ Angenommen, alle Abschnitte verwenden image_tag
Auch in Themen, die allgemein verwendet werden image_tag, benutzerdefinierte Abschnitte und Abschnitts-Apps von Drittanbietern verwenden häufig Raw <img> -Tags. Ein falsch geladener Abschnitt kann die Leistung der gesamten Seite beeinträchtigen. Überprüfen Sie alle Abschnitte, nicht nur die Theme-Standardeinstellungen.
Genau diese Fehler sind der Grund, warum viele Händler eine umfassende Lösung bevorzugen. Wenn Sie das vollständige Bild davon verstehen möchten, was Ihr Geschäft verlangsamt, diagnostizieren Sie die Geschwindigkeitsprobleme Ihres Shops mit unserer Schritt-für-Schritt-Anleitung, oder einfach Befolgen Sie die vollständige Optimierungsanleitung.
Häufig gestellte Fragen
Lädt Shopify Bilder automatisch verzögert?
Teilweise. Der Liquid-Filter image_tag von Shopify setzt loading='lazy' für Bilder in Abschnitten mit einem section.index größer als 2. Die ersten beiden Abschnitte laden ihre Bilder sofort, die übrigen verzögert. Das funktioniert jedoch nur in Themes, die image_tag korrekt verwenden. Viele ältere und benutzerdefinierte Themes nutzen den Filter überhaupt nicht, sodass ihre Bilder standardmäßig sofort geladen werden. Thunder Page Speed Optimizer wendet intelligentes Lazy Loading automatisch auf alle Themes an.
Verfügt das Dawn-Theme über integriertes Lazy Loading?
Ja. Dawn verwendet den Liquid-Filter image_tag von Shopify und die Eigenschaft section.index, um Bilder in Abschnitten nach den ersten beiden automatisch verzögert zu laden. Außerdem verwendet es fetchpriority='high' für LCP-Bilder. Die Implementierung von Dawn erfasst jedoch keine dynamisch von Apps eingefügten Bilder, per CSS gesetzten Hintergrundbilder, Videos oder Iframes. Auch diese Elemente können von verzögertem Laden profitieren.
Benötige ich eine Lazy-Loading-App, wenn mein Theme sie bereits hat?
Das hängt von der Implementierungsqualität Ihres Themes ab. Wenn Ihr Theme den nativen Filter image_tag von Shopify korrekt verwendet und Sie nur wenige Apps haben, kann das integrierte Lazy Loading ausreichen. Wenn Sie jedoch mehrere Apps verwenden, die eigene Bilder und Skripte einfügen, ein benutzerdefiniertes Theme haben oder eine umfassende Optimierung mit Skriptverzögerung, kritischem CSS und dem Vorladen von Schriftarten wünschen, liefert eine App wie Thunder deutlich bessere Ergebnisse als Lazy Loading auf Theme-Ebene allein.
Was ist der Unterschied zwischen dem nativen Lazy Loading von Shopify und dem Browser Lazy Loading?
Browser Lazy Loading nutzt das HTML-Attribut loading='lazy', das den Download eines Bildes verzögert, bis der Nutzer beim Scrollen in dessen Nähe kommt. Das funktioniert in über 96 % der modernen Browser. Das native Lazy Loading von Shopify bezeichnet den Liquid-Filter image_tag, der loading='lazy' automatisch zu Bildern in Abschnitten außerhalb des anfänglich sichtbaren Bereichs hinzufügt. Beide arbeiten zusammen: Liquid von Shopify setzt das Attribut, der Browser führt das verzögerte Laden aus.
Kann das native Lazy Loading von Shopify meinen Geschwindigkeitswert beeinträchtigen?
Ja. Wenn das Theme loading='lazy' auf Bilder im anfänglich sichtbaren Bereich anwendet, verzögert es den LCP durch einen unnötigen IntersectionObserver-Schritt. Das Performance-Team von Shopify stellte fest, dass Shops, die ihr LCP-Bild verzögert laden, einen um 1,0 Sekunden langsameren medianen LCP haben als Shops, die es sofort laden. Gut implementierte Themes vermeiden dies mit section.index, aber nicht alle Themes setzen es richtig um.
Das Fazit zum nativen Lazy Loading von Shopify
Shopify verfügt zwar über natives Lazy Loading – es handelt sich jedoch um ein Tool für Theme-Entwickler und nicht um eine Funktion für den gesamten Shop. Wenn Sie ein modernes Thema wie Dawn verwenden, ist dies der Fall image_tag und section.index richtig, Ihre Themenbilder werden wahrscheinlich richtig Lazy-Loaded. Dadurch bleiben jedoch App-injizierte Inhalte, CSS-Hintergrundbilder, Videos und – was entscheidend ist – Render-blockierende Skripte völlig unberücksichtigt.
Bei den meisten Geschäften deckt natives Lazy Loading etwa 30–40 % der Optimierungsmöglichkeiten ab. Der Rest erfordert Skriptverschiebung, Bildoptimierung, kritisches CSS-Inlining und intelligente Ressourcenpriorisierung – genau das Thunder Page Speed Optimizer funktioniert automatisch.
Beginnen Sie mit dem Testen Ihres Shops: Führen Sie einen kostenlosen Geschwindigkeitstest durch um zu sehen, wo Sie stehen, und entscheiden Sie dann, ob natives Lazy Loading ausreicht oder ob Sie einen umfassenderen Ansatz benötigen.