Kritische Anforderungsketten von Shopify: Behebung der PageSpeed-Warnung (2026)

Schnelle Lösung mit Thunder

Was PageSpeed unter kritischen Anforderungsketten versteht

Eine kritische Anfrage ist eine Ressource, die der Browser als wichtig für die Darstellung der aktuellen Seite ansieht. Eine Kette entsteht, wenn eine kritische Ressource eine andere verzögert: Der HTML-Code erkennt das CSS, das CSS erkennt eine Schriftart, ein blockierendes Skript verzögert das Bild-Markup oder ein Skript lädt ein anderes Skript, bevor die Seite nützlich werden kann.

Neuere Lighthouse-Berichte nennen dies das Netzwerkabhängigkeitsbaum. In älteren Berichten und vielen Shopify-Community-Threads wird es immer noch genannt Vermeiden Sie die Verkettung kritischer Anfragen. In jedem Fall ist die praktische Frage dieselbe: Welche Ressource lässt das erste Ansichtsfenster warten?

Bei dieser Diagnose handelt es sich nicht um eine Feldmetrik von Core Web Vitals, sie erklärt jedoch häufig eine Schwachstelle Core Web Vitals-Bericht. Lange Ketten erhöhen die Ladeverzögerung für LCP, verzögern First Contentful Paint und sorgen dafür, dass die mobilen Ergebnisse stark schwanken, da langsame Telefone jede Abhängigkeit stärker spüren.

Die Shopify-spezifische Kette, die Sie normalerweise sehen

Ein sauberes Shopify-Theme kann immer noch eine kritische Kette wie diese erzeugen:

document
  -> theme.css
    -> storefront font file
  -> theme.js
    -> app embed script
      -> widget script
  -> Heldenbild spät entdeckt

Der Browser kann die sichtbare Seite nicht zeichnen, bis genügend CSS verfügbar ist. Ein Bild, das es nicht entdeckt hat, kann nicht priorisiert werden. Es kann nicht schnell reagieren, wenn App-JavaScript den Hauptthread erfasst, während die Seite noch geladen wird. Aus diesem Grund überschneiden sich die Anforderungen der Anforderungskette mit renderblockierende Ressourcen, Haupt-Thread-Arbeit, und JavaScript-Optimierung.

Schritt 1: Identifizieren Sie den tatsächlichen kritischen Pfad

Run PageSpeed Insights, open the Network Dependency Tree or critical request chain section, and write down the deepest chain. Then open Chrome DevTools -> Netzwerk, Cache deaktivieren, bei mobiler Drosselung neu laden und nach Startzeit sortieren.

Reparieren Sie nicht jede Datei im Wasserfall. Suchen Sie nach Ressourcen mit hoher Priorität, die das erste Ansichtsfenster blockieren: globales CSS, Schriftarten, Heldenbilder, Theme-Skripte im Head, App-Skripte und Anfragen von Drittanbietern, die gestartet werden, bevor die Seite nützlich ist. Wenn die Warnung auf 30 Dateien hinweist, sich aber nur eine über dem Falz befindet, beheben Sie diese zuerst.

Für einen breiteren Workflow verwenden Sie unseren Shopify-Geschwindigkeitsaudit-Leitfaden before touching code. It keeps you from spending an hour on request chains when the bigger problem is oversized images or an app stack.

Schritt 2: Unkritische Theme- und App-Skripte zurückstellen

Skripte im Kopf können das Parsen blockieren und neue kritische Anfragen erstellen. Wenn zum Rendern des ersten Ansichtsfensters kein Skript erforderlich ist, verschieben Sie es:

<script src="{{ 'theme.js' | asset_url }}" defer></script>

Verwendung aufschieben für Skripte, die eine Dokumentreihenfolge erfordern. Benutzen asynchron only for independent scripts such as simple analytics beacons. For app scripts you do not control, Thunder is safer because dependency-aware deferral prevents common breakage from blindly moving files.

Schritt 3: Laden Sie nur das echte Above-the-Fold-Asset vor

Das Vorladen ist leistungsstark, da es die Erkennungsreihenfolge ändert. Es ist auch leicht zu missbrauchen. Laden Sie das Heldenbild nur dann vorab, wenn es das eigentliche LCP-Element ist, oder laden Sie die kritische Schriftart nur vor, wenn die Textwiedergabe durch eine verspätete Schriftartanforderung blockiert wird.

{%- 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: 1600 }} 1600w"
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

Laden Sie niemals jeden Karussellschlitten vor. Laden Sie niemals ein Desktop-Bild vorab, das mobile Besucher nicht verwenden werden. Das Ziel ist eine kürzere Kette, keine lautere Warteschlange. Wenn Ihr LCP-Image verzögert geladen wird, beheben Sie das ebenfalls mit Loading="eager" und fetchpriority="hoch" Stattdessen.

Schritt 4: Renderblockierendes CSS reduzieren

Shopify-Themes enthalten oft eine große CSS-Datei für jede Vorlage. Dadurch entsteht eine einfache, aber teure Kette: HTML wartet vor dem Rendern auf CSS, auch wenn der Großteil des CSS zu Abschnitten unterhalb der Falte gehört.

Der sichere manuelle Pfad besteht darin, das globale Layout-CSS in der Hauptdatei zu belassen und dann das CSS für schwere Abschnitte näher an den Abschnitt zu verschieben, der es benötigt. Wenn Ihr Theme abschnittsspezifische Assets unterstützt, verwenden Sie diese für Slider, Lookbooks, Videoabschnitte und komplexe Produktgalerien.

{%- comment -%}Load section CSS only where the section appears{%- endcomment -%}
{{ 'featured-collection.css' | asset_url | stylesheet_tag }}

Für eine tiefergehende Bereinigung folgen Sie unserem Shopify CSS-Optimierungsleitfaden und Bereinigung nicht verwendeter CSS- und JavaScript-Dateien.

Schritt 5: App-Einbettungen aus dem ersten Ansichtsfenster verschieben

Bewertungen, Bundles, Abonnements, Chat, Popups und Analysetools erzeugen oft zusätzliche Abhängigkeitsketten. Sie laden ein kleines Boot-Skript, dann ein weiteres Skript, dann CSS, dann einen API-Aufruf und dann ein Widget. Diese Kette kann unterhalb der Falte in Ordnung sein, aber im Kopf schmerzhaft sein.

In Shopify Admin, open Online Store -> Themes -> Customize -> App embeds. Deaktivieren Sie alles, was nicht jede Seite benötigt. Überprüfen Sie dann die Produkt-, Kollektions- und Warenkorbvorlagen auf alte App-Snippets. Wenn eine App nur auf Produktseiten benötigt wird, laden Sie sie nicht global von theme.liquid.

Dies ist auch ein guter Zeitpunkt, um Ihren Stack mit unserem zu vergleichen Forschung zur Auswirkung auf die App-Geschwindigkeit und Apps, die Shopify-Shops verlangsamen.

Manueller Fix vs. Thunder Fix

Testen Sie die Anforderungskette erneut

Führen Sie nach jeder Änderung dieselbe URL erneut auf dem Mobilgerät aus. Überprüfen Sie, ob die tiefste Kette kürzer ist, ob die LCP-Anfrage früher beginnt und ob die Gesamtblockierungszeit sinkt. Wenn sich eine Zahl verbessert und eine andere verschlechtert, überprüfen Sie den Wasserfall, bevor Sie die Änderung beibehalten.

Für einen vollständigen Plan verwenden Sie die Leitfaden zur Shopify-Geschwindigkeitsoptimierung. Wenn Sie eine Automatisierung anstelle einer manuellen Bearbeitung des Theme-Codes wünschen, vergleichen Sie Thunders Optimierungsfunktionen oder prüfen aktuelle Preise.

Referenzen und Validierung

Vergleichen Sie für die zugrunde liegende Diagnose Ihren Bericht mit Anleitung zur kritischen Anforderungskette von Chrome und die neuere Lighthouse Network Dependency Tree-Sprache. Zum Vorspannen verwenden Sie Anleitung zum Vorladen responsiver Bilder von web.dev.

Shopify-Community-Beispiele zeigen normalerweise das gleiche Muster: Händler folgen der Warnung, nachdem sie Apps, Seitenersteller, Slider oder schwere Hero-Medien hinzugefügt haben. Die beste Lösung sind nicht mehr Preload-Tags. Dadurch werden unnötige Abhängigkeiten entfernt, Skripte zurückgestellt und die erste sichtbare Ressource für den Browser sichtbar gemacht.