Shopify Lazy Loading: Bilder, Videos und mehr

Was ist Lazy Loading?

Lazy Loading ist eine Strategie, die verzögert das Laden nicht kritischer Ressourcen, bis sie tatsächlich benötigt werden. Anstatt jedes Bild auf der Seite herunterzuladen, sobald ein Besucher ankommt, lädt der Browser die Bilder nur, wenn der Besucher zu ihnen scrollt.

Stellen Sie es sich wie eine Restaurantküche vor: Anstatt jedes Gericht auf der Speisekarte sofort zuzubereiten, sobald das Restaurant öffnet, kochen sie jedes Gericht, wenn ein Kunde es bestellt. Das Ergebnis? Schnellerer erster Service und weniger verschwendeter Aufwand.

Auf einer typischen Shopify-Produkt- oder Kollektionsseite befinden sich möglicherweise 20–50 Bilder. Ohne Lazy Loading versucht der Browser, sie alle gleichzeitig herunterzuladen, kämpft um Bandbreite und verlangsamt die Bilder, die Ihr Besucher tatsächlich zuerst sieht – das Hero-Banner, das Produktfoto, die Navigationssymbole.

Bei Lazy Loading werden nur die über dem Falz -Bilder werden sofort geladen. Alles unterhalb der Falte wartet, bis der Besucher in die Nähe scrollt. Das Ergebnis: schnelleres Rendern der ersten Seite, geringere Bandbreitennutzung und ein besseres Erlebnis – insbesondere auf Mobilgeräten.

Warum Lazy Loading für Shopify Stores wichtig ist

Shopify-Shops sind von Natur aus bildlastig. Produktfotos, Lifestyle-Bilder, Sammlungsbanner, Vertrauensabzeichen, App-Widgets – eine typische Homepage kann problemlos mehr als 30 Bilder mit insgesamt 5–15 MB Daten enthalten.

Ohne Lazy Loading konkurrieren alle diese Bilder beim ersten Laden der Seite um Bandbreite. Das bedeutet in der Praxis Folgendes:

Durch ordnungsgemäßes Lazy Loading kann das anfängliche Seitengewicht reduziert werden 40–70% auf bildlastigen Seiten. Das führt direkt zu einer schnelleren Erstlackierung und einem besseren Benutzererlebnis. Lazy Loading ist jedoch nur ein Teil des Puzzles – das vollständige Bild finden Sie in unserem vollständige Optimierungsanleitung.

Der Fehler Nr. 1 beim Lazy Loading (und er kostet Sie 1 Sekunde)

Hier ist die kontraintuitive Wahrheit: Der häufigste Lazy-Loading-Fehler besteht nicht darin, dass Lazy Load nicht funktioniert, sondern dass Lazy Loading zu aggressiv erfolgt.

Insbesondere das verzögerte Laden Ihres Heldenbildes oder LCP-Elements. Laut Shopifys eigenes Performance-Team:

Warum passiert das? Wenn Sie einstellen wird geladen="faul" Bei einem „above thefold“-Bild fügen Sie einen unnötigen Schritt hinzu:

Dieser zusätzliche Erkennungsschritt fügt Ihrem wichtigsten Bild eine Verzögerung von 200–1000 ms hinzu. Auf Mobilgeräten mit langsamerer JavaScript-Ausführung ist es noch schlimmer.

Die Regel ist einfach:

• ✓ Oberhalb der Falte: Eager Load (Nr wird geladen -Attribut, oder Loading="eager")
• ✓ Unterhalb der Falte: Lazy Load (wird geladen="faul")
• ✗ Niemals: Lazy Load des Heldenbildes, des Produktbilds oder eines beliebigen LCP-Kandidaten

Klingt einfach, oder? In der Praxis ist es schwierig. „Above the Fold“ ist auf jedem Gerät, jeder Bildschirmgröße und jeder Seitenvorlage unterschiedlich. Was sich auf einem 27-Zoll-Desktop-Monitor oberhalb der Falte befindet, könnte sich auf einem iPhone SE unterhalb der Falte befinden. Um dies manuell richtig zu machen, ist ein reaktionsfähiges Bewusstsein über Dutzende von Haltepunkten hinweg erforderlich.

Native vs. JavaScript Lazy Loading: Was im Jahr 2026 verwendet werden sollte

Es gibt zwei Ansätze für das verzögerte Laden von Bildern, und diese Entscheidung ist wichtiger, als den meisten Shopify-Entwicklern bewusst ist.

Natives verzögertes Laden (wird geladen="faul")

2019 zur HTML-Spezifikation hinzugefügt, wird natives Lazy Loading jetzt unterstützt von 96 %+ der Browser (alle modernen Chrome-, Firefox-, Safari- und Edge-Versionen). Sie fügen einfach hinzu wird geladen="faul" zu Ihrem <img> oder <iframe> -Tag:

<img
  src="product-photo.jpg"
  loading="lazy"
  alt="Blaue Laufschuhe – Seitenansicht"
  width="800"
  height="600"
/>

Das ist es. Keine JavaScript-Bibliothek, keine Konfiguration, keine Erhöhung der Bundle-Größe. Der Browser erledigt alles.

JavaScript Lazy Loading (Lazysizes usw.)

Vor dem nativen Lazy Loading bestand der Standardansatz in der Verwendung von JavaScript-Bibliotheken wie Lazysizes. Diese Bibliotheken verwenden die IntersectionObserver-API, um zu erkennen, wann sich Bilder dem Ansichtsfenster nähern, und tauschen dann einen Platzhalter aus Datenquelle mit dem echten Quelle.

<!-- JS lazy loading pattern -->
<img
  data-src="product-photo.jpg"
  class="lazyload"
  alt="Blaue Laufschuhe – Seitenansicht"
/>
<script src="lazysizes.min.js" async></script>

Dies funktioniert immer noch, verursacht aber zusätzlichen JavaScript-Overhead – normalerweise 5–10 KB zusätzliches Skript, das heruntergeladen, analysiert und ausgeführt werden muss, bevor das verzögerte Laden beginnt.

Vergleich

Was man mit Lazy Load laden sollte (und was NICHT)

Nicht alle Ressourcen sollten gleich behandelt werden. Hier ist eine praktische Aufschlüsselung für Shopify-Shops:

✓ Lazy Load Diese

✗ Niemals faul laden

So implementieren Sie Lazy Loading in Shopify Liquid

Wenn Sie Ihren Theme-Code manuell bearbeiten, erfahren Sie hier, wie Sie Lazy Loading in der Template-Sprache Liquid von Shopify korrekt implementieren.

Methode 1: Shopifys image_tag-Filter (empfohlen)

Shopify's Liquid Der image_tag Der -Filter wird automatisch eingestellt wird geladen="faul" auf Bildern. Es ist auch reaktionsfähig Quelle und Größen -Attribute für optimale Lieferung.

{{- product.featured_image | image_url: width: 800 | image_tag:
    loading: 'lazy',
    widths: '200,400,600,800',
    sizes: '(min-width: 768px) 50vw, 100vw',
    alt: product.featured_image.alt -}}

Stellen Sie für Ihr Hero/LCP-Image explizit Eager Loading ein:

{{- section.settings.hero_image | image_url: width: 1200 | image_tag:
    loading: 'eager',
    fetchpriority: 'high',
    widths: '600,900,1200,1800',
    sizes: '100vw',
    alt: section.settings.hero_alt -}}

Methode 2: Roh-HTML mit Loading-Attribut

Wenn Sie Roh-HTML schreiben (benutzerdefinierte Abschnitte, Snippets), fügen Sie das Attribut direkt hinzu:

<!-- Below-fold image: lazy load -->
<img
  src="{{ image | image_url: width: 600 }}"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="lazy"
  decoding="async"
/>

<!-- Above-fold image: eager load -->
<img
  src="{{ image | image_url: width: 1200 }}"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="eager"
  fetchpriority="high"
/>

Methode 3: Intelligentes Laden basierend auf der Abschnittsposition

Dawn und andere Shopify 2.0-Themes verwenden ein cleveres Muster: Sie verfolgen, welcher Abschnitt zuerst auf der Seite ist, und laden nur Bilder in diesem Abschnitt per Eager herunter.

{%- liquid
  # In the layout or page template:
  assign first_section = true
-%}

{%- for block in section.blocks -%}
  {%- if first_section -%}
    {%- assign loading_strategy = 'eager' -%}
    {%- assign fetch_priority = 'high' -%}
    {%- assign first_section = false -%}
  {%- else -%}
    {%- assign loading_strategy = 'lazy' -%}
    {%- assign fetch_priority = 'auto' -%}
  {%- endif -%}

  {{- block.settings.image | image_url: width: 800 | image_tag:
      loading: loading_strategy,
      fetchpriority: fetch_priority -}}
{%- endfor -%}

Dieser Ansatz ist besser als pauschales Lazy Loading, aber er ist immer noch unvollkommen – er berücksichtigt nicht, wie viele Bilder über dem Falz in jedem Abschnitt sichtbar sind, und er variiert je nach Gerät.

Jenseits von Bildern: Lazy Loading von Videos, Iframes und Abschnitten

Bilder sind das offensichtliche Ziel, aber die Lazy-Loading-Prinzipien gelten auch für andere schwere Ressourcen.

Video-Einbettungen (YouTube, Vimeo)

Eine YouTube-Einbettung wird geladen 500–800 KB JavaScript plus die Benutzeroberfläche des Videoplayers – auch wenn der Besucher nie auf „Play“ klickt. Zwei häufige Korrekturen:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  title="Videotitel"
  allow="accelerometer; autoplay; encrypted-media; gyroscope"
  allowfullscreen
></iframe>

<div class="video-facade" data-video-id="VIDEO_ID">
  <img
    src="https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg"
    alt="Video-Miniaturansicht"
    loading="lazy"
  />
  <button class="play-btn" aria-label="Video abspielen">▶</button>
</div>

Shopify Section Rendering API

Shopify hat das eingeführt Abschnitts-Rendering-API , mit dem Sie bei Bedarf ganze Abschnitte laden können – nicht nur Bilder. Das ist wie Lazy Loading bei Steroiden: Anstatt später nur das Bild zu laden, laden Sie den gesamten HTML-, CSS- und JavaScript-Code des Abschnitts nur bei Bedarf.

In Kombination mit IntersectionObserver können Sie eine echte „Load-on-Scroll“-Erfahrung erstellen, bei der es im ursprünglichen HTML überhaupt keine Abschnitte unterhalb der Falte gibt. Dies ist besonders wirkungsvoll für:

• • Produktempfehlungsabschnitte
• • Widgets überprüfen
• • Instagram-Feed-Abschnitte
• • Schwer App-Widgets von Drittanbietern

App-Skripte von Drittanbietern

Hier verbergen sich die wahren Leistungsgewinne. Die meisten Shopify-Apps injizieren renderblockierende Skripte in Ihr Geschäft <head>. Sie können ein Skript zwar nicht direkt mit dem „Lazy Load“ laden wird geladen -Attribut, können Sie aufschieben oder asynchron sie:

<!-- Blocking (bad) -->
<script src="app-widget.js"></script>

<!-- Deferred (better) -->
<script src="app-widget.js" defer></script>

<!-- Async (good for independent scripts) -->
<script src="app-widget.js" async></script>

Das Problem? Sie können nicht immer steuern, wie Apps ihre Skripte einfügen. Viele Apps codieren synchrone Skript-Tags fest, die Sie nicht ändern können, ohne die App zu beschädigen. Dies ist der Hauptgrund, warum die manuelle Optimierung an ihre Grenzen stößt – und warum Thunder existiert. Thunder fängt das Laden aller Skripte automatisch ab und ordnet sie neu, unabhängig davon, wie Apps sie einfügen.

So testen Sie, ob Lazy Loading funktioniert

Du hast hinzugefügt wird geladen="faul" zu Ihren Bildern – aber woher wissen Sie, dass es tatsächlich funktioniert? Hier sind vier Möglichkeiten zur Überprüfung:

1. Chrome DevTools-Netzwerkregisterkarte

2. Element prüfen

Klicken Sie mit der rechten Maustaste auf ein beliebiges Bild unten → Überprüfen. Schauen Sie sich das an <img> -Tag im Elementebedienfeld. Das solltest du sehen wird geladen="faul" als Attribut.

3. PageSpeed Insights Audit

Führen Sie Ihre Seite durch PageSpeed Insights oder Testen Sie die Geschwindigkeit Ihres Shops mit unserem kostenlosen Tool. Wenn Lazy Loading nicht implementiert ist, wird folgender Vorschlag angezeigt: „Offscreen-Bilder zurückstellen“ mit einer Schätzung des Einsparpotenzials (in KB und Sekunden).

4. Leuchtturm in DevTools

Chrome DevTools verfügt über eine integrierte Lighthouse-Registerkarte. Führen Sie eine Leistungsprüfung durch und prüfen Sie, ob zwei Diagnosen vorliegen:

• • „Offscreen-Bilder zurückstellen“ – Lazy Loading nicht implementiert oder unvollständig
• • „Größtes Contentful Paint-Bild wurde träge geladen“ – Sie laden Ihr LCP nur langsam (beheben Sie das Problem sofort!)

Thunder vs. manuelles Lazy Loading

Häufig gestellte Fragen

Verwandte Ressourcen