Lazy Loading vs. Eager Loading auf Shopify: Korrigieren Sie Ihr Heldenbild-LCP

Schneller Vergleich: Lazy Loading vs. Eager Loading

Bevor wir in die Tiefe tauchen, hier ist der grundlegende Unterschied. Beide Strategien kontrollieren wann Der Browser lädt eine Ressource herunter – aber ihre Ziele sind entgegengesetzt.

Der ideale Shopify-Shop verwendet beides – Eager Loading für den Inhalt, den Besucher zuerst sehen, Lazy Loading für alles, zu dem sie später scrollen. Die Herausforderung besteht darin, zu wissen, wo die Grenze zu ziehen ist, insbesondere wenn „above the Fold“ je nach Gerät unterschiedlich ist. Testen Sie die Geschwindigkeit Ihres Shops , um zu sehen, wie Ihre aktuelle Ladestrategie funktioniert.

Wie jede Ladestrategie unter der Haube funktioniert

Eager Loading: Der Standardpfad

Eager Loading ist das Standardverhalten des Browsers. Wenn der HTML-Parser auf ein <img>-Tag ohne loading-Attribut stößt, stellt er das Bild sofort zum Herunterladen in die Warteschlange:

Dies ist schnell und vorhersehbar für Bilder, die über dem Falz liegen. Der Nachteil? Wenn Sie 40 Bilder auf einer Sammlungsseite haben, versucht der Browser, alle 40 gleichzeitig herunterzuladen. Ihr Heldenbild – das, das Sie bestimmt LCP-Score – muss die Bandbreite mit 39 anderen Bildern teilen, zu denen der Besucher nicht gescrollt hat.

Lazy Loading: Aufgeschoben, bis es benötigt wird

Beim Hinzufügen loading="lazy" zu einem Bild, der Browser registriert es aber lädt es nicht herunter , bis der IntersectionObserver erkennt, dass sich das Bild dem Ansichtsfenster nähert:

Dieser zusätzliche Schritt ist genau der Grund, warum das verzögerte Laden Ihres LCP-Bildes so kostspielig ist – Sie müssen unnötig auf Ihr wichtigstes visuelles Element warten. Aber für Bilder unterhalb des Falzes ist dieser Aufschub ein reiner Vorteil: weniger Bandbreitenkonkurrenz und schnelleres anfängliches Rendern.

Wann sollte Eager Loading auf Shopify verwendet werden?

Laden Sie eifrig jedes Element, das im ersten Ansichtsfenster erscheint – was der Besucher sieht vorher Scrollen. Bei Shopify bedeutet dies normalerweise:

Wann sollte Lazy Loading auf Shopify verwendet werden?

Lazy Load alles, was der Besucher erst sieht, wenn er scrollt. In den meisten Shopify-Shops sind das die meisten Bilder:

Weitere Einzelheiten zum Lazy Loading und zur technischen Umsetzung finden Sie in unserer vollständigen Version Shopify Lazy Loading-Anleitung.

Ladestrategie nach Shopify-Seitentyp

Verschiedene Seitenvorlagen haben unterschiedliche LCP-Elemente und Inhaltsstrukturen. Hier ist die optimale Ladestrategie für jeden:

So implementieren Sie beide Ladestrategien in Shopify Liquid

Hier ist der praktische Liquid-Code zum Implementieren der richtigen Ladestrategie für Ihr Thema. Das folgt Shopifys natives Lazy Loading Best Practices.

Basic: Abschnittsindexbasiertes Laden

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

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

Erweitert: LCP-Bild mit Abrufpriorität

{%- if section.index == 1 -%}
  {%- comment -%} Hero section — LCP image, maximum priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high", decoding: "sync" }}
{%- elsif section.index == 2 -%}
  {%- comment -%} Second section — eager but normal priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "eager" }}
{%- else -%}
  {%- comment -%} Below fold — lazy load {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "lazy" }}
{%- endif -%}

Produktraster: Erste Reihe eifrig, Ruhe faul

{%- for product in collection.products -%}
  {%- if forloop.index <= 4 and section.index <= 2 -%}
    {%- assign img_loading = "eager" -%}
  {%- else -%}
    {%- assign img_loading = "lazy" -%}
  {%- endif -%}

  {{ product.featured_image | image_url: width: 600 | image_tag: loading: img_loading, alt: product.title }}
{%- endfor -%}

fetchpriority: Die dritte Ladestrategie, die Sie kennen sollten

Neben sofortigem und verzögertem Laden gibt es einen dritten Hebel: fetchpriority. Dieses Attribut steuert nicht, wann eine Ressource geladen wird, sondern wie wichtig sie im Vergleich zu anderen Ressourcen ist:

Die Kombination von loading="eager" + fetchpriority="high" auf Ihrem LCP-Image ist die aggressivste verfügbare Ladestrategie. Dem Browser wird gesagt: „Laden Sie dies sofort herunter und geben Sie ihm Vorrang vor allem anderen.“ Für LCP-Optimierung, diese Kombination verkürzt Ihre LCP-Zeit normalerweise um 100–300 ms.

Fix: Shopify Hero-Bannerbild wird eifrig in theme.liquid geladen

Eines der häufigsten Shopify-Geschwindigkeitsprobleme im Jahr 2026: Ihr Hero-Bannerbild wird standardmäßig verzögert geladen, wodurch Ihr LCP-Score zerstört wird. Viele Themen – darunter Dawn – setzen nicht fetchpriority="high" auf dem Heldenbild, sodass die Leistung auf dem Tisch bleibt.

Hier ist die genaue Lösung für Sie theme.liquid oder Heldenabschnittsdatei:

{%- comment -%} Fix: Force eager loading + high priority for hero banner image {%- endcomment -%}
{%- assign hero_image = section.settings.image -%}

{%- if hero_image != blank -%}
  {{ hero_image | image_url: width: 1400 | image_tag:
    loading: "eager",
    fetchpriority: "high",
    decoding: "sync",
    alt: hero_image.alt | default: section.settings.heading,
    class: "hero-banner__image"
  }}
{%- endif -%}

Nachdem Sie diese Änderung vorgenommen haben, Führen Sie einen Geschwindigkeitstest durch zur Überprüfung der LCP-Verbesserung. Sie sollten eine Verbesserung der LCP-Zeit um 100–500 ms feststellen, abhängig von der Bildgröße Ihres Helden und der Antwortzeit des Servers. Für Geschäfte, in denen die Codebearbeitung keine Option ist, Thunder erledigt dies automatisch – es erkennt Ihr LCP-Element und wendet die optimalen Ladeattribute an, ohne Ihre Designdateien zu berühren.

5 Fehler bei der Shopify-Ladestrategie, die Ihren Geschwindigkeitswert zerstören

Wir sehen diese Fehler in Hunderten von Shopify-Shops. Jeder kostet Sie echte PageSpeed-Punkte:

Häufig gestellte Fragen

Die richtige Ladestrategie macht einen echten Unterschied

Lazy Loading vs. Eager Loading ist keine binäre Entscheidung – es geht darum, die richtige Strategie auf das richtige Element anzuwenden. Laden Sie Ihr LCP-Bild eifrig mit hoher Priorität, laden Sie den Rest des Inhalts „above-fold“ eifrig und laden Sie alles „below-the-fold“ träge. Das ist die Formel, die Ihnen das schnellstmögliche anfängliche Rendern ermöglicht, ohne Bandbreite zu verschwenden.

Aber denken Sie daran: Die Strategie zum Laden von Bildern ist nur ein Teil der Gleichung. Eine korrekte Optimierung Ihrer Shopify-Bilder (Format, Komprimierung, Größe) ist genauso wichtig. Drittanbieter-Skripte von Apps beeinträchtigen die Leistung jedoch häufig stärker als nicht optimierte Bilder. Ein ganzheitlicher Ansatz, der Bilder, Skripte, CSS und Schriftarten gemeinsam berücksichtigt, liefert die besten Ergebnisse.

Nächster Schritt: Führen Sie Ihren kostenlosen Geschwindigkeitstest durch Um zu sehen, wie sich Ihre aktuelle Ladestrategie auf die Leistung auswirkt, erkunden Sie dann unsere Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung für das vollständige Bild.