Fix für Hero-Banner Eager Loading in Shopify (2026)

Zuletzt aktualisiert
•
Von Experten geprüft
•
5 Min. Lesezeit
Jacques Blom
Jacques Blom
CTO bei Fudge.

Das Wichtigste in Kürze

  • Shopifys image_tag-Filter wendet automatisch loading="lazy" auf Bilder nach den ersten drei Abschnitten an – dein Hero braucht ausdrücklich loading="eager".
  • Füge fetchpriority="high" zum Hero-<img> hinzu, um es in der Download-Warteschlange des Browsers nach vorne zu schieben.
  • Für Heroes mit CSS-background-image musst du ein <link rel="preload">-Tag im <head> der theme.liquid hinzufügen. Die URL muss exakt übereinstimmen, sonst lädt der Browser das Bild zweimal herunter.
  • Der Fix erfolgt in sections/image-banner.liquid (oder slideshow.liquid/deinem Hero-Abschnitt), nicht in der theme.liquid selbst – mit Ausnahme des Preload-Hints.
  • Nicht so technisch versiert? Beschreibe den Fix einfach Fudge und es bearbeitet die Section-Dateien für dich.

Wenn dir ein Lighthouse- oder PageSpeed Insights-Audit gerade gesagt hat, dass dein Hero-Bild lazy-loaded ist – oder dass das LCP-Element zu spät gepreloadet wurde – bist du hier genau richtig. Dieser Guide führt dich durch die exakten Liquid-Anpassungen, damit dein Hero eager lädt, mit fetchpriority und bei Bedarf einem Preload-Hint.

Warum du uns vertrauen kannst

Wir haben mit hunderten Shopify-Brands an der Storefront-Performance gearbeitet und Fudge entwickelt – einen KI-Storefront-Editor mit einer 5.0-Bewertung im Shopify App Store. Die untenstehenden Patterns wenden wir selbst an und empfehlen sie in unseren Audits.

Warum dein Hero-Bild lazy-loaded ist

Ein paar Dinge verursachen das typischerweise:

1. Shopifys Standardverhalten. Wenn du ein Bild mit dem image_tag-Filter renderst und das loading-Attribut nicht setzt, wendet Shopify loading="lazy" auf jedes Bild an, das nach dem dritten Abschnitt im Template kommt1. Wenn dein Hero-Abschnitt der vierte auf der Seite ist (wegen einer Announcement-Bar, einer Sticky-Promo oder einem App-Abschnitt darüber), wird er standardmäßig lazy-loaded.

2. Das Theme hat loading="lazy" hardcodiert. Einige ältere Themes wenden loading="lazy" unterschiedslos auf jedes Bild an, einschließlich des Heros.

3. Der Hero ist ein CSS background-image. Wenn der Hero anstelle eines <img>-Tags als background-image: url(...) gerendert wird, sieht der Browser ihn beim initialen Parsen nicht. Es gibt kein loading-Attribut, das man setzen kann, und fetchpriority wird nicht angewendet.

4. Eine App oder Anpassung hat es überschrieben. Einige Apps injizieren Skripte, die bei jedem Bild ein eager gegen lazy austauschen, um “die Performance zu verbessern”. Das ist genau das Gegenteil von dem, was du für dein LCP-Element willst.

So diagnostizierst du es

Rechtsklick auf das Hero-Bild in deiner Storefront → Untersuchen (Inspect). Schau dir das <img>-Tag im HTML an.

Lass pagespeed.web.dev über deinen Store laufen. Unter der Diagnose zeigt der Eintrag “Largest Contentful Paint-Element”, welches Element gemessen wird. Wenn es dein Hero ist und der Wert bei “Load Delay” (Ladeverzögerung) hoch ist, wird das Bild zu spät abgerufen.

Verwandt: Shopify-Theme schneller machen.

Das <img>-Tag in deiner Hero-Section fixen

Der Hero befindet sich normalerweise in einer dieser Section-Dateien – nicht in der theme.liquid:

Schritt 1. Dupliziere dein Theme. Immer.

Schritt 2. Öffne die entsprechende Section-Datei im Code-Editor.

Schritt 3. Finde das <img>-Tag oder den Aufruf des image_tag-Filters. Bei älteren Themes sieht das so aus:

<img
  src="{{ section.settings.image | image_url: width: 2000 }}"
  alt="{{ section.settings.image.alt }}"
  width="2000"
  height="1000"
  loading="lazy"
/>

Schritt 4. Ändere loading="lazy" zu loading="eager" und füge fetchpriority="high" hinzu:

<img
  src="{{ section.settings.image | image_url: width: 2000 }}"
  alt="{{ section.settings.image.alt }}"
  width="2000"
  height="1000"
  loading="eager"
  fetchpriority="high"
/>

Wenn dein Theme den modernen image_tag-Filter nutzt:

{{ section.settings.image
  | image_url: width: 2000
  | image_tag: loading: 'eager', fetchpriority: 'high', alt: section.settings.image.alt
}}

Schritt 5. Speichern und neu laden. Mach einen Rechtsklick auf den Hero, klicke auf “Untersuchen” und vergewissere dich, dass die neuen Attribute vorhanden sind.

Das sauberere Pattern: section.index

loading="eager" hardzucodieren funktioniert zwar, aber es kann passieren, dass die Section verschoben wird (ein Händler zieht sie im Theme-Editor auf der Startseite nach unten) und plötzlich ist sie nicht mehr das LCP-Element, lädt aber weiterhin eager. Das portable Pattern nutzt dafür section.index:

{%- liquid
  assign loading = 'eager'
  assign fetchpriority = 'auto'
  if section.index == 1
    assign fetchpriority = 'high'
  elsif section.index > 2
    assign loading = 'lazy'
  endif
-%}

{{ section.settings.image
  | image_url: width: 2000
  | image_tag: loading: loading, fetchpriority: fetchpriority, alt: section.settings.image.alt
}}

Das bedeutet: Wenn ich die erste Section auf der Seite bin, lade mich mit hoher Priorität (fetchpriority). Wenn ich in den ersten drei bin, lade mich eager. Ansonsten lade mich lazy. Das ist das Pattern, das Shopify selbst für jede Bilder-Section empfiehlt, die im LCP-Slot landen könnte oder eben auch nicht1.

Willst du, dass dieser Fix in Sekunden für dich erledigt wird? Beschreibe es Fudge.
Try Fudge for Free

Einen CSS background-image Hero preloaden

Wenn dein Hero als background-image: url(...) im CSS gerendert wird, weiß der Browser nichts von dem Bild, bis er dein Stylesheet geparst, das Bild heruntergeladen und auf das Element angewendet hat. Bis dahin tickt die LCP-Uhr munter weiter.

Der Fix ist ein Preload-Hint im <head> deiner theme.liquid. Er sagt dem Browser, dass das Bild sofort abgerufen werden soll, noch bevor das CSS überhaupt geparst wird.

Schritt 1. Öffne layout/theme.liquid.

Schritt 2. Füge innerhalb des <head>-Blocks einen bedingten Preload hinzu, der nur auf der Seite feuert, auf der sich der Hero befindet (meistens die Startseite):

{%- if template.name == 'index' -%}
  {%- assign hero_section = sections['image-banner'] -%}
  {%- if hero_section.settings.image -%}
    <link
      rel="preload"
      as="image"
      href="{{ hero_section.settings.image | image_url: width: 2000 }}"
      fetchpriority="high"
    >
  {%- endif -%}
{%- endif -%}

Die URL in deinem Preload-Tag muss exakt mit der URL übereinstimmen, die der Browser ansonsten anfordern würde. Gleicher width-Parameter, gleicher crop, gleiches format. Wenn sie sich auch nur um ein einziges Zeichen unterscheiden, lädt der Browser beide herunter und du hast die Situation eher verschlimmert.

Schritt 3. Wenn sich dein Bild je nach Viewport ändert (Mobilgeräte erhalten einen anderen Zuschnitt), verwende imagesrcset und imagesizes, damit der Browser auch das richtige Bild preloaded:

<link
  rel="preload"
  as="image"
  imagesrcset="{{ hero_section.settings.image | image_url: width: 800 }} 800w,
               {{ hero_section.settings.image | image_url: width: 1200 }} 1200w,
               {{ hero_section.settings.image | image_url: width: 2000 }} 2000w"
  imagesizes="100vw"
  fetchpriority="high"
>

Schritt 4. Noch besser: Wandle das CSS-background-image innerhalb der Section in ein echtes <img>-Tag um. Dann bekommst du fetchpriority, automatisches srcset und das eigene Preload-Verhalten von Shopifys HTTP-Headern. CSS-Hintergründe für das LCP-Element sind nämlich ein Anti-Pattern2.

Setze nicht bei jedem Bild fetchpriority="high"

fetchpriority="high" ist eine begrenzte Ressource. Wenn du fünf Bilder mit hoher Priorität markierst, muss der Browser wählen – und er wird die anderen nach hinten reihen, um dies auszugleichen. Wende es auf genau ein Bild pro Seite an: das LCP-Element.

Das Gleiche gilt für Preload-Hints. Einen pro Seite. Mehrere Preloads, die um Bandbreite wetteifern, verlangsamen genau den Aspekt, den du eigentlich beschleunigen willst.

Den Fix überprüfen

1. Untersuche (Inspect) das gerenderte HTML. Stelle sicher, dass loading="eager" und fetchpriority="high" auf dem Hero-<img> vorhanden sind.

2. Öffne die Chrome DevTools → Network-Tab (Netzwerk) → Seite neu laden mit deaktiviertem Cache. Sortiere nach Priorität (Priority). Dein Hero-Bild sollte ganz oben oder fast ganz oben mit der Priorität “Highest” stehen.

3. Checke die Seite erneut mit pagespeed.web.dev. Die Diagnose “Largest Contentful Paint-Element” sollte einen geringeren Load Delay anzeigen. Der gesamte LCP-Wert sollte sinken, oft um 500-2000 ms bei einer langsamen Mobilverbindung.

4. Wenn du einen Preload hinzugefügt hast, öffne den Network-Tab und suche nach der Bild-URL. Sie darf nur einmal auftauchen, nicht zweimal. Wenn du zwei Einträge siehst, stimmt die Preload-URL nicht mit der gerenderten Bild-URL überein – korrigiere diese Abweichung.

Keine Lust, Liquid zu bearbeiten?

Der gesamte bisherige Ablauf geht davon aus, dass du es dir zutraust, eine Section-Datei zu öffnen und ein Tag zu ändern. Wenn du das lieber vermeiden möchtest, übernimmt Fudge das über einen einfachen Prompt für dich. Etwa so:

“Setze in der Hero-Section auf der Startseite loading=eager und fetchpriority=high für das Banner-Bild. Wenn es sich um einen CSS-Hintergrund handelt, füge einen Preload-Hint in der theme.liquid für das Index-Template hinzu.”

Fudge generiert die exakte Code-Änderung, zeigt dir eine Vorschau im Live-Theme an und speichert erst in deinem Store, wenn du es absegnest. Kein Theme duplizieren, keine Liquid-Syntax erlernen.

Häufige Stolpersteine

Der Hero ist in einer Slideshow mit mehreren Slides. Bei initialem Paint ist nur das erste Slide sichtbar. Wende Eager Loading und fetchpriority="high" daher nur für das Bild des ersten Slides an – lade den Rest lazy.

Der Hero ändert sich je nach Template. Ein Startseiten-Hero und ein Kategorie-Seiten-Hero (Collection) sind unterschiedliche Sections. Wende den Fix auf beide an und grenze deine Preload-Hints mit if template.name == 'index' usw. ein.

Dein Bild wird nicht als WebP ausgeliefert. Shopifys CDN liefert standardmäßig WebP aus, wenn der Browser dies unterstützt – aber nur, wenn es über image_url oder img_url verarbeitet wird. Ein rohes src="...assets/banner.jpg" erhält kein WebP. Nutze die Liquid-Filter.

Eine App überschreibt deine Änderungen. Wenn du die Section repariest, aber das Element im HTML dennoch loading="lazy" anzeigt, manipuliert offensichtlich das JavaScript einer App das DOM nach dem Seitenaufbau. Prüfe deine installierten Apps auf “Performance”- oder “Bildoptimierungs”-Tools – einige schalten unterschiedslos bei allem pauschal wieder loading="lazy" ein.

Verwandt: Bilder in Shopify lazy-loaden.

Verwandt: Bilder in Shopify komprimieren.

Verwandt: Render-blockierende Skripte in Shopify beheben.

Wann man mit einer spürbaren Reduzierung des LCP rechnen kann

Wenn dein Hero bisher lazy-loaded und groß war, erwarte eine LCP-Verbesserung von 1–3 Sekunden unter langsamen 4G-Netzwerken. Wenn er schon eager geladen wurde, aber das fetchpriority fehlte, rechne mit etwa 200–800 ms. Falls du noch ein CSS-background-image mit einem Preload-Hint fixst, addiert sich der Geschwindigkeitsgewinn.

Wenn du diese Anpassungen vornimmst und PageSpeed das LCP weiterhin als langsam einstuft, hat sich der Flaschenhals verlagert – auf render-blockierendes CSS oder JavaScript, die Antwortzeit des Servers oder ein schlichtweg zu riesiges Hero-Bild. Komprimiere dann zuerst das Bild und knöpfe dir anschließend die Skripte vor.

Jacques's signature
Behebe Performance-Probleme, indem du beschreibst, was du willst.
Fudge kostenlos testen
See how Fudge edits themes
5.0

FAQ

Warum wendet Shopify standardmäßig Lazy-Loading auf mein Hero-Image an?

Shopifys image_tag-Filter wendet loading="lazy" auf Bilder nach der dritten Section im Template an. Wenn dein Hero die 4. Section ist (z. B. nach der Announcement-Bar, Sticky-Promo, App-Section), wird es per Lazy-Loading geladen. Das ist ein gutes Standardverhalten für Nicht-LCP-Bilder, aber schlecht für das Hero – setze explizit loading="eager".

Sollte jedes Above-the-fold-Bild loading="eager" verwenden?

Nein. Verwende loading="eager" nur für das LCP-Element – typischerweise ein einziges Hero-Image. Andere Above-the-fold-Bilder (Logo, Navigations-Icons, sekundäre Banner) sind klein genug, dass Lazy-Loading im Vergleich zu Eager-Loading den LCP nicht nennenswert beeinflusst. Die Regel lautet auch: fetchpriority="high" auf nur einem Bild pro Seite.

Wird fetchpriority="high" auf jedem Bild meine Shopify-Seite schneller machen?

Nein – im Gegenteil. fetchpriority="high" ist ein relatives Signal. Wenn mehrere Bilder als “high” markiert sind, depriorisiert der Browser das eigentliche LCP-Element, um dies auszugleichen. Setze es auf genau einem Bild (dem LCP-Element) pro Seite. Das Gleiche gilt für Preload-Hints – einer pro Seite.

Kann ich einen Preload-Hint hinzufügen, ohne die theme.liquid zu bearbeiten?

Die theme.liquid ist der übliche Ort, da das <link rel="preload"> im <head> stehen muss und die theme.liquid jede Seite umschließt. Einige Sections unterstützen einen {% layout 'theme' %} Injection-Point, die meisten jedoch nicht. Wenn du die theme.liquid nicht direkt bearbeiten kannst, kann Fudge die Änderung sicher vornehmen, ohne dass du Code anfassen musst.

Wie überprüfe ich, ob der Eager-Loading-Fix funktioniert hat?

Drei Möglichkeiten: (1) Rechtsklick auf das Hero → Untersuchen → bestätigen, dass loading="eager" und fetchpriority="high" im <img>-Tag enthalten sind, (2) Chrome DevTools → Network-Tab → neu laden → nach Priority sortieren → das Hero sollte auf “Highest” stehen, und (3) PageSpeed Insights erneut ausführen – der LCP “Load Delay” sollte sinken und der allgemeine LCP-Score sich verbessern.

Jacques's signature
Behebe Performance-Probleme, indem du beschreibst, was du willst.
Fudge kostenlos testen
See how Fudge edits themes
5.0

Footnotes

  1. Shopifys offizieller Hinweis zum image_tag-Filter und den section.index-Standardwerten: Announcing new Liquid features for better web performance. ↩ ↩2

  2. Web.devs Empfehlung zur Vermeidung von CSS background-image für LCP-Elemente, siehe: Optimizing images for performance on Shopify. ↩

You might also be interested in

So beschleunigst du ein Shopify-Theme (2026)
Beschleunige deinen Shopify-Store mit Bildkompression, Lazy Loading, App-Bereinigung und Fixes für Render-blocking Scripts. Starte mit den effektivsten Maßnahmen.
So behebst du Render-blocking Scripts in Shopify (2026)
Behebe renderblockierende Skripte in Shopify. Füge defer- und async-Attribute hinzu, nutze Section-scoped JS und verschiebe nicht-kritische Skripte nach unten.
CSS und JavaScript in Shopify minifizieren (2026)
Wie Shopify die CSS- und JS-Minifizierung automatisch handhabt, wann du dennoch manuell minifizieren musst und die besten Tools für Custom Code Blöcke.