🔮 Speculative Loads (Speculation Rules)

Back

What are Speculative Loads?

Speculation Rules tell the browser to prefetch or prerender pages that the user is likely to navigate to next. This makes page transitions feel instant!

📥 Prefetch

Downloads the page's HTML in advance. When the user clicks, parsing and rendering still need to happen, but the network delay is eliminated.

Cost: Low (just the HTML)

🖼️ Prerender

Fully loads and renders the page in a hidden tab. When the user clicks, the page swaps in instantly — no loading at all!

Cost: Higher (full page load)

Active Speculation Rules

This page includes speculation rules that tell the browser to speculatively load the pages below. Hover or observe which ones get prefetched/prerendered.

🏠 Home Page

Prefetch
Application Home

Prefetched — HTML downloaded in advance

🔄 bfcache Demo

Prerender
Back/Forward Cache

Prerendered — fully loaded in background

🔔 Notifications

Prefetch
Notifications Demo

Prefetched on link hover

🌐 External Page

Prefetch
example.com

Cross-origin prefetch demonstration

Speculation Rules on This Page

Here's the actual speculation rules JSON embedded in this page:

Dynamic Speculation Rules

You can also add speculation rules dynamically via JavaScript:

Event Log

🔧 DevTools: Inspecting Speculative Loads

  1. Open DevTools → Application panel
  2. Expand Background services → click Speculative loads
  3. You'll see a list of all speculation rules on the page
  4. Each rule shows: type (prefetch/prerender), URL, status
  5. Status can be: Not triggered, Running, Ready, Failure
  6. Click on a rule to see why it succeeded or failed
  7. Network panel: Prefetched resources appear with type "prefetch"

📝 Practice Exercise

  1. Open the Speculative Loads section in the Application panel
  2. Check which speculation rules are active on this page
  3. What is their status? Are any triggered automatically?
  4. Hover over "Notifications Demo" — does the status change in DevTools?
  5. Click "Add Prefetch Rule" — does a new rule appear in DevTools?
  6. Check the Network panel — can you see resources loaded with "speculative" priority?
  7. Navigate to a prefetched page — was the transition faster?