Shopify Hero Image Preload: LCP mit fetchpriority und Liquid reparieren (2026)

Schnelle Lösung mit Thunder

Wenn das Vorladen von Heldenbildern tatsächlich hilft

Largest Contentful Paint misst, wann das größte sichtbare Text- oder Bildelement mit dem Rendern fertig ist. Der gute Schwellenwert von Google liegt bei 2,5 Sekunden oder weniger für mindestens 75 % der echten Nutzer. Auf Shopify-Homepages, Landingpages und Sammlungsseiten ist das LCP-Element häufig das Hero-Bannerbild.

Vorladen hilft, wenn der Browser das Heldenbild sonst zu spät entdecken würde. Dies geschieht, wenn die Bild-URL in einem Abschnittsausschnitt vergraben ist, über JavaScript geladen wird, hinter reaktionsfähiger Logik verborgen ist oder nach vielen CSS- und Skript-Tags referenziert wird. Durch das Vorladen wird dem Browser mitgeteilt, dass er dieses wichtige Bild frühzeitig abrufen soll.

Das Vorladen repariert kein 900-KB-Bild, einen Schieberegler, der auf JavaScript wartet, oder renderblockierende Ressourcen , die die gesamte Seite verzögern. Es ist ein Teil der LCP-Kette. Verwenden Sie es mit Bildkomprimierung, korrekten Abmessungen und Skriptbereinigung.

Schritt 1: Bestätigen Sie das LCP-Element

Führen Sie PageSpeed Insights oder Chrome DevTools Performance aus. Erweitern Sie in Lighthouse die LCP-Diagnose und prüfen Sie, welches Element gemeldet wird. Wenn es sich um das Heldenbild handelt, fahren Sie fort. Wenn es sich um eine Überschrift oder ein Produktbild handelt, laden Sie stattdessen diese Ressource vorab.

Raten Sie nicht. Shopify-Themen zeigen oft unterschiedliche Hero-Assets auf dem Desktop und auf Mobilgeräten an, und Schieberegler können dazu führen, dass ein anderes Element LCP auf Mobilgeräten gewinnt. Unser Leitfaden zu Geschwindigkeitstestergebnissen erklärt, wie man den Bericht liest, ohne der falschen Metrik nachzujagen.

Schritt 2: Laden Sie die genaue Shopify-Bild-URL vorab

Fügen Sie den Preload-Link hinzu theme.liquid im Kopf, vor schweren Skripten. Verwenden Sie dasselbe Bildobjekt und dieselbe Breite wie Ihr Held.

{%- if template.name == 'index' and settings.hero_image != blank -%}
  <link
    rel="preload"
    as="image"
    href="{{ settings.hero_image | image_url: width: 1600 }}"
    imagesrcset="
      {{ settings.hero_image | image_url: width: 800 }} 800w,
      {{ settings.hero_image | image_url: width: 1200 }} 1200w,
      {{ settings.hero_image | image_url: width: 1600 }} 1600w
    "
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

Der genaue Objektname variiert je nach Thema. Es kann sein section.settings.image, Settings.hero_imageoder ein Blockbild. Wenn die Vorlade-URL nicht genau genug mit der URL des gerenderten Bildes übereinstimmt, lädt der Browser möglicherweise zwei Bilder herunter.

Schritt 3: Markieren Sie das Heldenbild als „Eifrig“ und „Hohe Priorität“.

Das Bild-Tag selbst sollte nicht verzögert geladen werden. Verwenden Sie Eager Loading und hohe Abrufpriorität für das erste „above-the-fold“-Heldenbild.

{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
    widths: '800, 1200, 1600',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.heading
}}

Das Lazy-Loading des Helden ist einer der häufigsten Shopify LCP-Fehler. Lazy Loading ist für Produktbilder und Galerien unterhalb des Falzes geeignet. es ist falsch für das eine Bild, das der Browser sofort benötigt. Nutzen Sie für den Rest Ihres Shops unsere Leitfaden zur Shopify-Bildoptimierung.

Schritt 4: Vermeiden Sie den doppelten Download von responsiven Bildern

Wenn Ihr Preload auf ein Desktop-Bild verweist, das Mobilgerät jedoch einen separaten mobilen Ausschnitt rendert, laden mobile Besucher möglicherweise die falsche vorinstallierte Datei herunter und laden dann das echte Mobilbild herunter. Das verschlimmert LCP.

{%- assign hero = section.settings.mobile_image | default: section.settings.image -%}

<link
  rel="preload"
  as="image"
  href="{{ hero | image_url: width: 1200 }}"
  imagesrcset="{{ hero | image_url: width: 600 }} 600w, {{ hero | image_url: width: 1200 }} 1200w"
  imagesizes="100vw"
  fetchpriority="high"
>

Verwenden Sie bei Themes mit wirklich unterschiedlichen Desktop- und Mobile-Hero-Bildern medienspezifische Preload-Links sorgfältig. Testen Sie beide Ansichtsfenstergrößen und überprüfen Sie die Registerkarte „Netzwerk“ auf doppelte Downloads.

Schritt 5: Seien Sie vorsichtig mit Schiebereglern

Shopify-Community-LCP-Threads weisen oft auf Hero-Diashows als verstecktes Problem hin. Selbst wenn nur eine Folie sichtbar ist, kann ein Schieberegler auf JavaScript warten, das Layout initialisieren, Bilder ausblenden, bis sie bereit sind, oder mehrere Folien vorab laden. Das Vorladen eines Bildes kann einen Helden, der von einem umfangreichen Karussellskript gesteuert wird, nicht vollständig reparieren.

Für das erste Ansichtsfenster ist ein statischer Held normalerweise besser als eine Diashow. Wenn Sie den Schieberegler beibehalten, laden Sie nur die erste sichtbare Folie vorab, legen Sie die Priorität „Eifrig“/„Hohe Priorität“ fest, laden Sie spätere Folien „Lazy Load“ und entfernen Sie die automatische Wiedergabe von JavaScript auf Mobilgeräten, wenn dadurch lange Aufgaben entstehen.

Hier ist auch Minimierung der Haupt-Thread-Arbeit ist wichtig. Ein Karussellskript kann das Bild verzögern, selbst wenn das Bild frühzeitig angefordert wird.

Manueller Fix vs. Thunder Fix

Erneut testen, ohne sich etwas vorzumachen

Öffnen Sie nach dem Hinzufügen von Preload das DevTools-Netzwerk mit deaktiviertem Cache. Stellen Sie sicher, dass das Heldenbild früh startet, stellen Sie sicher, dass das gerenderte Bild nicht zweimal heruntergeladen wird, und vergleichen Sie die mobilen Lighthouse-Ausführungen. Sehen Sie sich dann das LCP echter Benutzer im Web Performance-Dashboard von Shopify oder in den Search Console Core Web Vitals an.

Wenn die Hero-Anfrage früh startet, LCP aber immer noch langsam ist, liegt der Engpass wahrscheinlich an der Bildgewichtung, renderblockierendem CSS oder JavaScript. Benutzen Sie die Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung, dann prüfen Sie, ob auch PageSpeed flaggt Shopify kritische Anfrageketten, enorme Netzwerknutzlasten, oder Gesamtblockierungszeit. Vergleichen Thunders Optimierungsfunktionenund prüfen aktuelle Pläne , wenn Sie den automatisierten Pfad wünschen.

Referenzen und Validierung

Verwenden Sie für das metrische Ziel web.devs größte Contentful Paint-Anleitung: Ein guter LCP beträgt 2,5 Sekunden oder schneller beim 75. Perzentil. Hinweise zur Priorität finden Sie hier web.devs Fetchpriority-Anleitung; preload und fetchpriority lösen verschiedene Teile des Erkennungs- und Priorisierungsproblems.

Shopify-Community-LCP-Threads zeigen oft den gleichen Fehlermodus: Ein Händler lädt ein Heldenbild vorab und sieht wenig Bewegung, weil das Theme es noch verzögert lädt, das Karussellskript das Rendern verzögert oder renderblockierende Ressourcen Vorrang haben. Überprüfen Sie den Netzwerk-Wasserfall, die URL des gerenderten Bildes und das LCP-Element, bevor Sie den Vorladevorgang für unwirksam erklären. Die Lösung besteht in einer präzisen Ressourcenpriorität, nicht in weiteren Preload-Tags.