Shopify Offscreen-Bilder zurückstellen: Die PageSpeed-Warnung beheben

Warum PageSpeed Offscreen-Bilder auf Shopify markiert

PageSpeed markiert Offscreen-Bilder, wenn Bilder außerhalb des ursprünglichen Ansichtsfensters heruntergeladen werden, bevor sie benötigt werden. Bei Shopify geschieht dies häufig in Homepage-Bereichen, Sammlungsrastern, Megamenüs, Empfehlungsblöcken, Blog-Miniaturansichten, Rezensionsmedien, Instagram-Feeds und Produktmediengalerien.

Die Kosten hängen nicht nur von der Bandbreite ab. Frühe Bilddownloads konkurrieren mit CSS, Schriftarten, JavaScript und dem Bild, das tatsächlich die erste Ansicht definiert. Die LCP-Anleitung von Google empfiehlt, das wahrscheinlich größte Contentful Paint-Element schnell sichtbar zu machen. Ein guter LCP beträgt bei mindestens 75 % der Besuche 2,5 Sekunden oder schneller, und die Verschwendung früher Netzwerkpriorität für Bilder auf niedrigeren Seiten macht dies schwieriger.

Wenn Ihre Warnung neben großen Nutzlasten oder Warnungen zur Bildübermittlung erscheint, lesen Sie Shopify-Bildoptimierung, verbessert die Bildbereitstellung, und enorme Netzwerknutzlasten. Die Bildverzögerung außerhalb des Bildschirms ist ein Teil des umfassenderen Bildgeschwindigkeitsstapels.

Die Regel: Unterhalb der Falte faul, über der Falte eifrig

Die einfache Regel ist nützlich: Bilder unterhalb des Falzes sollten normalerweise verwendet werden wird geladen="faul", während Bilder, die wahrscheinlich im ersten Ansichtsfenster sichtbar sind, Eager Loading verwenden sollten. Das Schwierige daran ist, dass Shopify-Abschnitte wiederverwendbar sind. Ein Bannerbereich kann sich an erster Stelle auf der Startseite, an dritter Stelle auf einer Zielseite und innerhalb einer Produktseitenvorlage befinden. Das gleiche Snippet kann je nach Platzierung eine unterschiedliche Priorität benötigen.

Die Leistungsrichtlinien von Google warnen vor dem verzögerten Laden des LCP-Bildes. Für Shopify bedeutet das normalerweise das Hauptbild der Homepage, das Hauptproduktbild oder das Banner der Top-Kollektion. Wenn Sie diese Assets verzögert laden, erkennt der Browser sie möglicherweise zu spät und LCP wird schlechter, selbst wenn sich die Warnung vor Bildern außerhalb des Bildschirms verbessert.

Manuelle Schritt-für-Schritt-Anleitung: Fix „Offscreen-Bilder aufschieben“ auf Shopify

1. Identifizieren Sie das Bild, das nicht zurückgestellt werden soll

Suchen Sie in PageSpeed Insights das LCP-Element. Wenn es sich um ein Hero-Banner, ein Produktbild oder ein Kollektionsbild „above thefold“ handelt, laden Sie es nicht per Lazy-Load. Geben Sie ihm klare Dimensionen und hohe Priorität.

<!-- Above-the-fold hero image -->
&lbrace;&lbrace; section.settings.hero_image
  | image_url: width: 1600
  | image_tag:
    widths: '750, 1100, 1600',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.hero_image.alt
&rbrace;&rbrace;

Für weitere Einzelheiten verwenden Sie die Anleitung zum Vorladen von Shopify Hero-Bildern und Leitfaden zur LCP-Optimierung.

2. Lazy-Load-Karten wiederholter Produkte unterhalb der ersten Reihe

Sammlungsraster können Dutzende Produktbilder gleichzeitig herunterladen. Behalten Sie die erste sichtbare Zeile als Eager oder Standard bei und laden Sie dann die unteren Zeilen verzögert. Wenn Ihr Raster mit einem Schleifenindex gerendert wird, verwenden Sie diesen, um die Priorität zu bestimmen.

{% assign image_loading = 'lazy' %}
{% assign image_priority = 'auto' %}

{% if forloop.index <= 4 %}
  {% assign image_loading = 'eager' %}
  {% assign image_priority = 'high' %}
{% endif %}

&lbrace;&lbrace; product.featured_image
  | image_url: width: 700
  | image_tag:
    loading: image_loading,
    fetchpriority: image_priority,
    widths: '350, 500, 700',
    sizes: '(min-width: 990px) 25vw, 50vw',
    alt: product.featured_image.alt
&rbrace;&rbrace;

3. Fügen Sie Abmessungen hinzu, damit träge Bilder das Layout nicht verschieben

Lazy Loading kann CLS erstellen, wenn der Browser nicht weiß, wie viel Speicherplatz reserviert werden muss. Der Bild-Tag-Helfer von Shopify kann Breite und Höhe ausgeben, benutzerdefiniertes Markup vergisst diese jedoch oft. Verwenden Sie das CSS-Seitenverhältnis für Karten und reservieren Sie stabile Steckplätze für Medien.

.product-card__media {
  aspect-ratio: 1 / 1.25;
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Wenn die Layoutverschiebung bereits fehlschlägt, überprüfen Sie das Shopify CLS-Korrekturanleitung bevor Sie das Bildladeverhalten im gesamten Theme ändern.

4. Verzögern Sie eingebettete Medien und Feeds unterhalb der Falte

Instagram-Feeds, Rezensionsfotowände, Lookbooks und Video-Thumbnails sind häufige Straftäter für Offscreen-Bilder. Laden Sie ihre Bilder verzögert und ziehen Sie in Betracht, das gesamte Widget nach dem Scrollen oder im Leerlauf zu laden, wenn es für die erste Kaufentscheidung nicht benötigt wird.

<img
  src="&lbrace;&lbrace; block.settings.image | image_url: width: 800 &rbrace;&rbrace;"
  loading="lazy"
  decoding="async"
  width="800"
  height="800"
  alt="&lbrace;&lbrace; block.settings.image.alt | escape &rbrace;&rbrace;"
>

5. Testen Sie LCP und die Offscreen-Bildprüfung gemeinsam erneut

Feiern Sie nicht die Offscreen-Bildwarnung, wenn sich LCP verschlimmert. Das richtige Ergebnis sind weniger unnötige frühe Image-Downloads und ein stabiles oder verbessertes LCP. Testen Sie zuerst Mobilgeräte, da langsamere Netzwerke und CPUs Probleme mit der Bildpriorität deutlicher machen.

Manueller Fix vs. Thunder Fix

Gängige Shopify-Vorlagen zum Überprüfen

Überprüfen Sie zuerst die Homepage, ob sie gestapelte Bildabschnitte, Hero-Banner, vorgestellte Sammlungen, Lookbooks, Testimonials und Blog-Raster verwendet. Überprüfen Sie die Produktseiten, ob sie große Mediengalerien, Rezensionsfotos, Empfehlungsblöcke oder UGC verwenden. Überprüfen Sie die Sammlungsseiten, wenn der erste Ladevorgang zu viele Produktkarten enthält.

App-Inhalte sind ebenfalls wichtig. Bewertungs-Apps, Instagram-Feed-Apps, Seitenersteller und Empfehlungs-Apps fügen häufig Bilder außerhalb der normalen Liquid-Snippets Ihres Themes ein. Thunder kann die Storefront-Grundlage verbessern, aber einige Widgets von Drittanbietern müssen noch auf App-Ebene eingestellt oder entfernt werden. Der Leitfaden zu Shopify-Apps, die Geschäfte verlangsamen hilft Ihnen bei der Entscheidung, was es wert ist, behalten zu werden.

So bestätigen Sie, dass der Fix funktioniert hat

Führen Sie dieselben URLs über PageSpeed Insights und das aus Shopify-Geschwindigkeitstest. Sehen Sie sich die Offscreen-Bildprüfung, die Gesamtübertragungsgröße, das LCP-Ressourcen-Timing und CLS an. Googles Anleitung zur LCP-Optimierung unterteilt LCP in Serverantwort, Ressourcenladeverzögerung, Ressourcenladedauer und Renderverzögerung, was nützlich ist, wenn Änderungen der Bildpriorität die Metrik nicht wie erwartet verschieben.

If the warning remains after lazy loading lower-page images, the remaining offenders may come from an app embed or a section that renders hidden images for sliders, tabs, or variant media. Hidden does not always mean free. Browsers may still discover images in markup, CSS backgrounds, or app-generated DOM.

FAQ