Skip to main content

Under The Hood

This article explains how Turbo works under the hood for developers and technically-minded users.

Updated over 3 weeks ago

This article explains how Turbo works under the hood for developers and technically-minded users.

Prefetching Implementation

Turbo uses <link rel="prefetch"> to preload pages when users hover over links. After a short delay to filter out accidental hovers, Turbo injects a prefetch link element that tells the browser to fetch the target page in the background.

<link rel="prefetch" href="/products/example" as="document">

Prefetched pages are cached by the browser, making subsequent navigation nearly instant.

Shopify’s Speculation Rules API

Since June 2025, Shopify sends Speculation Rules via HTTP headers on all storefronts. These rules use “conservative” eagerness, meaning prefetching triggers on mousedown (when the user starts clicking).

{
  "prefetch": [{
    "where": { "href_matches": "/*" },
    "eagerness": "conservative"
  }]
}

Why Turbo Still Adds Value

Shopify’s implementation triggers on mousedown, but Turbo triggers on hover - typically 200-300ms earlier. This means:

  1. Turbo prefetches first - On hover, before the click starts

  2. Shopify’s rules provide backup - On mousedown, as additional insurance

  3. Combined effect - Maximum speed for visitors

Why We Don’t Use Speculation Rules Directly

Inline <script type="speculationrules"> elements don’t work reliably on Shopify due to Content Security Policy restrictions and service worker conflicts. Turbo uses traditional link prefetch instead, which is more reliable across all Shopify stores.

Safari Fallback

Safari has limited support for <link rel="prefetch">. Turbo detects Safari and uses the Fetch API as a fallback:

fetch(url, {
  credentials: "include",
  cache: "force-cache",
  priority: "low"
})

This warms the browser cache similarly to prefetch, ensuring Safari users get the same speed benefits.

Performance Considerations

  • Prefetch requests use low priority to avoid competing with critical resources

  • Only the HTML document is prefetched, not subresources

  • Prefetched pages are deduplicated (same URL won’t be prefetched twice)

  • All safety checks (battery, data saver, connection) run before any prefetch

Did this answer your question?