So nutzt du die Speculation Rules API bei Shopify

Wichtigste Erkenntnisse

• Shopify liefert bereits Speculation Rules in jedem Storefront aus. Es sendet einen Speculation-Rules-Response-Header, der auf eine JSON-Datei verweist, die Produkt-, Collection-, Seiten-, Such-, Blog- und Richtlinien-URLs mit der Eagerness moderate vorlädt (prefetch).
• Shopify nutzt nur Prefetching. Es nutzt niemals Prerendering. Das Hinzufügen deiner eigenen prerender-Regel in der theme.liquid ist die eigentliche Chance, und Shopifys eigene Theme-Dokumentation besagt, dass Themes zusätzliche Regeln hinzufügen dürfen.
• Prefetch lädt das HTML herunter. Prerender rendert die gesamte Seite in einem versteckten Tab, inklusive Subressourcen und JavaScript. Prerender ist deutlich schneller und deutlich ressourcenintensiver, also schränke den Geltungsbereich eng ein.
• eagerness steuert den Auslöser: immediate, eager, moderate (200ms Hover auf dem Desktop) und conservative (Mausklick/Pointer down). Document-Regeln sind standardmäßig conservative, List-Regeln immediate.
• Die wahren Risiken bei Shopify sind Nebeneffekte bei Warenkorb und Rabatten, doppelt gezählte Analytics und Drittanbieter-Skripte, die feuern, bevor der Käufer überhaupt auf der Seite ist. Schließe die Pfade /cart, /account, /checkouts und /discount aus und mache Analytics von document.prerendering abhängig.

Um die Speculation Rules API bei Shopify zu nutzen, behalte die Prefetch-Regeln bei, die Shopify bereits ausliefert, füge deine eigene prerender-Regel in der theme.liquid für die Seiten hinzu, die Käufer normalerweise als Nächstes öffnen, und schließe Warenkorb-, Konto-, Checkout- und Rabatt-URLs aus. Die API ermöglicht es einer Seite, dem Browser mitzuteilen, welche URLs der Besucher wahrscheinlich als Nächstes öffnen wird, damit der Browser sie im Voraus abrufen oder vollständig rendern kann. Bei Shopify ist es eine der wenigen verbleibenden Möglichkeiten, eine Navigation nicht nur schnell, sondern sofort (instant) wirken zu lassen.

Die meisten Leitfäden zu Speculation Rules gehen davon aus, dass du bei null anfängst. Bei Shopify ist das nicht der Fall. Die Plattform injiziert bereits ein Regelwerk für dich, und die eigentliche Arbeit besteht darin, zu wissen, was es abdeckt, was es absichtlich auslässt und was du in der theme.liquid gefahrlos noch hinzufügen kannst.

Warum du uns vertrauen kannst

Wir sind seit über vier Jahren im Shopify-Umfeld tätig und haben mit hunderten von Shopify-Marken an ihren Storefronts gearbeitet. Jacques hat über 15 Jahre Entwicklungserfahrung. Wir entwickeln Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store und “Built for Shopify”-Status. Wir arbeiten also genau in der Theme-Ebene, in der diese Regeln leben.

Was ist die Speculation Rules API?

Es handelt sich um einen JSON-Block in einem <script type="speculationrules">-Tag. Das JSON benennt URLs oder ein Muster (Pattern), das auf Links im Dokument zutrifft, und weist den Browser an, diese mit prefetch oder prerender vorzuladen.

<script type="speculationrules">
    {
        "prerender": [{"where": {"href_matches": "/products/*"}, "eagerness": "moderate"}]
    }
</script>

Es ersetzt die alten Resource Hints. <link rel="prefetch"> hat nur den HTTP-Cache aufgewärmt und dir keine Kontrolle über das Timing gegeben. <link rel="prerender"> wurde nie konsistent implementiert und ist mittlerweile veraltet (deprecated). Speculation Rules bieten dir Pattern Matching, Ausschlüsse (Exclusions), Triggers pro Regel und ein definiertes Set an Einschränkungen dafür, was eine per Speculation vorgeladene Seite überhaupt tun darf.

Die Regeln sind ein Hinweis (Hint), kein Befehl. Ein Browser, der das Script-Tag nicht versteht, ignoriert es einfach. Chrome selbst weigert sich zu spekulieren, wenn der Datensparmodus (Save-Data) aktiviert ist, der Arbeitsspeicher des Geräts knapp ist, der Energiesparmodus bei niedrigem Akkustand aktiv ist oder der Nutzer das Preloading von Seiten deaktiviert hat.¹ Es geht nichts kaputt, wenn keine Speculation stattfindet. Der Besucher bekommt einfach eine normale Navigation.

Prefetch vs. Prerender

Prefetch ist der sichere Standard. Prerender bringt die größten Leistungssprünge und birgt jedes Risiko, das in diesem Leitfaden beschrieben wird.

Welche Speculation Rules führt Shopify bereits aus?

Shopify hat die Speculation Rules Ende Juni 2025 plattformweit ausgerollt und eine durchschnittliche Verbesserung von 130ms auf dem Desktop und 180ms auf Mobilgeräten über alle Perzentile und alle Lademetriken hinweg gemeldet, also TTFB, FCP und LCP zusammen.²

Die Regeln befinden sich nicht in deinem Theme. Shopify sendet einen Speculation-Rules-Response-Header, der auf eine JSON-Datei auf seinem CDN verweist, die als application/speculationrules+json bereitgestellt wird. Wenn du diese Datei in einem beliebigen Live-Storefront abrufst, erhältst du das aktuelle Plattform-Regelwerk:

{
    "tag": "shopify_storefront_moderate",
    "prefetch": [
        {
            "where": {
                "or": [
                    {"href_matches": "/(products|collections|pages|search|shop|blogs|policies){/*}?"},
                    {
                        "href_matches": "/([a-z]{2,3}|zh-hans|zh-hant)(-[a-z]{2,3})?/(products|collections|pages|search|shop|blogs|policies){/*}?"
                    },
                    {"href_matches": "/"},
                    {"href_matches": "/([a-z]{2,3}|zh-hans|zh-hant)(-[a-z]{2,3})?{/}?"}
                ]
            },
            "eagerness": "moderate"
        }
    ]
}

Drei Dinge lassen sich aus diesem Block herauslesen:

Es ist nur Prefetch. Es gibt nirgendwo einen prerender-Key. Shopify ruft lediglich das Dokument frühzeitig ab, mehr nicht.

Es ist eine Allowlist, keine Blocklist. Nur Produkte, Collections, Seiten (Pages), Suche, Shop, Blogs, Richtlinien und die Startseite stimmen überein, jeweils sowohl im Root-Verzeichnis als auch mit Markt-Präfix. Warenkorb-, Konto- und Checkout-URLs matchen nie, werden also nie spekuliert (speculated).

Die Eagerness ist moderate. Shopify hat mit conservative begonnen und den Standardwert später erhöht, wobei mediane Desktop-Leistungssprünge von 285ms TTFB, 224ms FCP und 228ms LCP verzeichnet wurden, wobei etwa 10% der spekulierten Navigationen eine TTFB von 0ms erreichten. Der zusätzliche Nutzen durch den Wechsel zu moderate war auf Mobilgeräten mit rund 25ms TTFB, 20ms FCP und 24ms LCP deutlich geringer. Der Preis dafür war ein Anstieg der gesamten HTML-Requests um 14% bei unterstützenden Browsern.³

Shopifys Dokumentation zur Theme-Performance bestätigt, dass Themes zusätzlich eigene Regeln hinzufügen dürfen. Deine Aufgabe besteht also nicht darin, Prefetching neu zu implementieren. Es geht darum zu entscheiden, wo sich Prerendering wirklich lohnt.

Eagerness-Level und welches du wählen solltest

eagerness ist der Trigger, nicht die Priorität. Er beantwortet die Frage: „Wann reagiert der Browser auf diese Regel?“

Mobile hat kein Hover, deshalb greift Chromium auf Viewport-Heuristiken zurück. Auf mobilen Geräten feuert eager kurz nachdem ein Anker-Link (Anchor) in den Viewport kommt. Dieses Verhalten hat sich in Chrome 143 geändert; davor verhielt sich eager wie immediate. Bei moderate auf Mobile wird gewartet, bis das Scrollen zum Stillstand kommt.

Die Standardwerte (Defaults) unterscheiden sich je nach Regeltyp. Eine List Rule mit urls hat standardmäßig immediate. Eine Document Rule mit where hat standardmäßig conservative. Wenn du eine Document Rule schreibst und eagerness vergisst, bekommst du das vorsichtigste Verhalten – und das ist meistens nicht das, was du wolltest.

Für einen Shopify Storefront ist moderate der vernünftige Startpunkt für Prerendering. Ein immediate Prerender auf einer Collection Page würde versuchen, bis zu zehn Produktseiten zu rendern, die der Shopper vielleicht niemals öffnet – und das auf einem Gerät, das du nicht kontrollierst.

Document Rules vs. List Rules

List Rules benennen URLs direkt. Sie eignen sich für einen bekannten, festen nächsten Schritt.

{"prefetch": [{"urls": ["/collections/all", "/pages/size-guide"]}]}

Document Rules erfassen Links, die bereits auf der Seite existieren, über das where-Feld. Sie eignen sich für einen Storefront, bei dem die interessanten URLs durch Liquid generiert werden und sich pro Seite ändern.

href_matches nutzt die Syntax von URL Pattern. Das * ist also ein Wildcard und {...}? markiert eine optionale Gruppe. selector_matches nimmt einen CSS-Selektor entgegen, womit du einzelne Links über eine CSS-Klasse ausschließen kannst. Beide akzeptieren Arrays, und mit and, or und not lassen sie sich kombinieren.

Diese Kombination ist es, die Exclusions (Ausschlüsse) so praktisch macht. Du kannst sagen: „Jeder Link auf der Seite, außer denjenigen, die den Serverstatus (Server State) ändern.“

So fügst du Speculation Rules zu einem Shopify-Theme hinzu

Die Regeln kommen ins Layout, damit sie auf jeder Seite existieren, die dieses nutzt. Öffne deinen Theme-Code-Editor, bearbeite layout/theme.liquid und platziere das Skript kurz vor dem schließenden </head>-Tag. Wenn du noch nie Theme-Dateien bearbeitet hast, lies dir zuerst unseren Guide zum Thema Shopify Theme bearbeiten durch und dupliziere das Theme, bevor du etwas änderst.

Die gezielte Version: Produkte von Browse-Seiten prerendern

Das ist die Version, mit der du anfangen solltest. Sie prerendert Produktseiten, aber nur von den Templates aus, bei denen der Käufer gerade wirklich ein Produkt auswählt.

{%- if request.page_type == 'collection'
   or request.page_type == 'index'
   or request.page_type == 'search' -%}
  <script type="speculationrules">
  {
    "tag": "theme-product-prerender",
    "prerender": [
      {
        "where": {
          "and": [
            { "href_matches": [
                "/products/*",
                "/([a-z]{2,3}|zh-hans|zh-hant)(-[a-z]{2,3})?/products/*"
              ]
            },
            { "not": { "selector_matches": ".no-prerender" } },
            { "not": { "selector_matches": "[rel~=nofollow]" } }
          ]
        },
        "eagerness": "moderate"
      }
    ]
  }
  </script>
{%- endif -%}

Das Liquid-if nutzt request.page_type, das Shopify auf Werte wie collection, index, search, product oder cart setzt. Durch diese Bedingung wird die Regel nicht auf Templates geladen, bei denen ein Prerendering der Produktseite ohnehin sinnlos wäre.

Der zweite href_matches-Eintrag deckt die Shopify-Märkte ab. Shopify stellt lokalisierten URLs ein Locale-Segment voran, und die Gruppe hier ist aus Shopifys eigenen Regeln kopiert, sodass sich beide exakt gleich verhalten.

Die .no-prerender-Ausnahme ist wichtig. Füge diese Klasse jedem Link hinzu, bei dem ein Shop-Manager später entscheidet, dass er nicht spekuliert werden soll, und schon ist keine weitere Code-Änderung mehr nötig.

Die breite Version: Alles außer den gefährlichen Pfaden

Wenn du eine größere Abdeckung möchtest, kehre die Logik um. Matche alle Links und ziehe dann die Routen ab, die den Status verändern.

<script type="speculationrules">
{
  "tag": "theme-broad-prerender",
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": [
              "/cart{/*}?",
              "/checkouts/*",
              "/account{/*}?",
              "/discount/*",
              "/apps/*",
              "/([a-z]{2,3}|zh-hans|zh-hant)(-[a-z]{2,3})?/cart{/*}?",
              "/([a-z]{2,3}|zh-hans|zh-hant)(-[a-z]{2,3})?/account{/*}?",
              "/([a-z]{2,3}|zh-hans|zh-hant)(-[a-z]{2,3})?/discount/*"
            ]
          }},
          { "not": { "href_matches": "/*\\?*(^|&)logout=*" } },
          { "not": { "selector_matches": "[rel~=nofollow]" } },
          { "not": { "selector_matches": ".no-prerender" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

/discount/* verdient eine eigene Zeile. Shopify-Rabattlinks wenden einen Code an und setzen ein Cookie bei einem einfachen GET-Request. Wenn man einen solchen Link prerendert, wird der Rabatt angewendet, bevor der Käufer überhaupt auf irgendetwas geklickt hat.

Teste beide Versionen zuerst in einem unveröffentlichten Duplikat deines Themes. Eine Speculation Rule ist schnell geschrieben – und ebenso schnell macht man unauffällige, aber fatale Fehler.

Browser-Support im Jahr 2026

Speculation Rules sind ein Chromium-Feature. Prerendering über die API wurde in Chrome 109 ausgeliefert, und Edge, Opera sowie Samsung Internet zogen über dieselbe Engine nach.

Die globale Unterstützung liegt bei etwa 75 % des getrackten Traffics.⁴ Für einen Shopify-Store, dessen Traffic stark zu iOS Safari tendiert, ist der erreichbare Anteil deutlich geringer. Das ist allerdings eher ein Grund dafür, die Kosten für deine Regeln niedrig zu halten, als sie ganz wegzulassen.

Nicht unterstützende Browser ignorieren das Script-Tag komplett. Es gibt kein Polyfill, du brauchst keinen Fallback und es gibt keinen Nachteil, der über ein paar hundert Bytes Markup hinausgeht.

Die echten Risiken bei Shopify

Verschwendete Bandbreite und zusätzliche Serverlast

Jede Speculation, der kein Klick folgt, ist ein Request, den niemand genutzt hat. Shopify hat bereits einen Anstieg von 14 % bei den HTML-Requests gemessen, nur weil die Eagerness bei Prefetch um eine Stufe angehoben wurde. Prerender ist noch deutlich schwerfälliger, da es auch Sub-Ressourcen lädt und Skripte ausführt.

Shopify fängt die Last auf der Serverseite für dich ab, deine Apps und Drittanbieter-Endpunkte tun das jedoch nicht. Wenn eine Produktseite beim Laden eine Reviews-API oder einen Personalisierungsdienst abfragt, werden diese auch durch ein Prerendering aufgerufen.

Doppelt gezählte Analytics

Eine via Prerender geladene Seite führt ihr JavaScript aus, bevor der Shopper sie überhaupt gesehen hat. Belässt man es dabei, werden Pageviews künstlich aufgebläht und sämtliche Conversion-Rates verfälscht.

Die Lösung ist es, alles, was Daten trackt oder feuert, bis zur Aktivierung (Activation) hinauszuzögern:

if (document.prerendering) {
    document.addEventListener('prerenderingchange', initAnalytics, {once: true})
} else {
    initAnalytics()
}

Google Analytics handhabt Prerendering von Haus aus (nativ). Bei Custom-Tracking, Chat-Widgets, Popup-Timern und der Gruppenzuteilung (Bucketing) für A/B-Tests ist das im Regelfall nicht so. Überprüfe (Audit) die Skripte, die dein Theme lädt, bevor du Prerendering aktivierst. Falls dir dieses Inventar unbekannt vorkommt, ist unser Guide zu Render-Blocking Scripts in Shopify ein guter Weg, sie aufzulisten.

Nebenwirkungen bei Warenkorb und Sessions

Das ist die Shopify-spezifische Gefahr. Jede URL, die den Status per GET-Request ändert, ist ein Risiko fürs Speculative Loading: Rabattlinks, ?logout=-Links, Warenkorb-Permalinks, Query-Parameter fürs automatische Hinzufügen zum Warenkorb, Referral- und Affiliate-Landing-URLs. Shopifys eigenes Regelwerk umgeht das Problem elegant, indem es ausschließlich schreibgeschützte Routen per Allowlist erlaubt. Mach dir diesen Instinkt zu eigen.

Du kannst in Liquid nicht serverseitig filtern

Browser senden Sec-Purpose: prefetch oder Sec-Purpose: prefetch;prerender bei spekulativen Requests, und ein normales Backend kann basierend auf diesem Header Fallunterscheidungen vornehmen. Liquid kann das nicht. Das request-Objekt bietet nur Zugriff auf host, origin, path, page_type, locale, design_mode und visual_preview_mode, aber keinen Zugriff auf Request-Header. In einem Shopify-Theme muss also jeder Schutzmechanismus direkt in der Regel selbst oder über clientseitiges JavaScript realisiert werden.

Überschneidung mit existierenden Prefetch-Skripten im Theme

Viele kostenpflichtige Themes liefern immer noch ein Hover-Preload-Skript mit, sei es instant.page oder eine eigene Kopie davon. instant.page lädt nach 65 ms Hover über einen eigenen Fetch-Aufruf vor, der komplett unabhängig von der Speculation-Mechanik des Browsers ist. Wenn du das zusammen mit Shopifys moderate-Prefetch laufen lässt, rufen zwei völlig unterschiedliche Systeme ungefähr beim selben Auslöser (Trigger) exakt dasselbe Dokument ab.

Durchsuche deine Theme-Assets nach instant.page und nach rel="prefetch", bevor du eigene Regeln hinzufügst. Wenn ein Skript nur das dupliziert, was die Plattform ohnehin schon tut, entferne es. In unserem Guide So fügst du Custom JavaScript in Shopify hinzu erfährst du, wo sich diese Snippets üblicherweise verstecken.

So misst du, ob es funktioniert hat

Chrome DevTools. Öffne das Application-Panel und suche nach Speculative loads unter Background services. Es hat drei Tabs: den Status der aktuellen Seite, jedes auf der Seite gefundene Regelwerk (Rulesets) und jede durch diese Regeln spekulierte URL mitsamt ihrem Ergebnis. Misserfolge werden mit Begründungen aufgelistet, etwa wegen einer Non-2xx-Response oder einem bereits erreichten Limit. Lade die Seite neu, nachdem du das Panel geöffnet hast, sonst bleibt es leer.

Field Data. CrUX schlüsselt Metriken seit März 2024 nach Navigationstyp auf, und prerender ist einer der Typen, neben navigate, back_forward_cache und restore. Das ist der ehrlichste Weg, um zu sehen, wie viel von deinem echten Traffic tatsächlich auf einer prerendered Seite landet und wie der LCP im Vergleich zu einer kalten Navigation aussieht.

Was du erwarten kannst. Prerender verbessert hauptsächlich den LCP, da die Seite bereits gezeichnet (painted) ist, wenn der Klick landet. Der INP kann sich als Nebeneffekt verbessern, da Skripte bereits geparst und ausgeführt wurden. Für den Anteil der Nutzer, die über Safari oder Firefox kommen, bewegen sich die Metriken überhaupt nicht – ein seitenweiter Durchschnitt wird den Effekt für Chrome-Nutzer also immer untertreiben.

Speculation Rules sind eine Optimierung der Navigation, keine Lösung für riesige und überladene Seiten (Page-Weight). Eine langsame Produktseite ist immer noch langsam, wenn jemand sie zum ersten Mal aufruft. Kombiniere dies am besten mit den Grundlagen aus unserem Guide Wie man ein Shopify-Theme schneller macht, und schau dir den Stand der Shopify-Performance im Jahr 2026 an, um zu sehen, wo typische Shops aktuell stehen.

Wo Fudge ins Spiel kommt

Speculation Rules sind nur ein kleiner JSON-Block, aber die Arbeit drumherum ist klassische Theme-Arbeit: den richtigen Platz in der theme.liquid finden, sie an request.page_type knüpfen, überprüfen, welche Skripte beim Laden feuern, und ein veraltetes Preload-Skript entfernen, das die Plattform jetzt ohnehin dupliziert.

Fudge ist der KI-Operator für Shopify-Stores und schreibt natives Liquid, CSS und JavaScript direkt in dein Theme. Du kannst ihn bitten, ein Prerender-Regelwerk für Produktlinks auf Collection-Seiten hinzuzufügen oder das Hover-Preload-Skript zu finden und zu entfernen, das mit deinem Theme ausgeliefert wurde, und den Entwurf mitsamt Code überprüfen, bevor du ihn veröffentlichst.

Da der Output direkter Theme-Code ist und kein App-gerenderter Layer, gibt es kein zusätzliches Script-Tag von einem Drittanbieter und nichts verschwindet, wenn du die App deinstallierst. Das Gleiche gilt für alles andere, was du mit dem Shopify-Store-Editor baust.

FAQ