Make Any App Faster — 6 Lines of HTML

Use speculationrules and prerendering to speed up navigation and improve user experience with a simple 6-line snippet.

Make Any App Faster — 6 Lines of HTML
Free Games
quiz

Website performance is one of the biggest factors affecting user experience and SEO. A slow page load can lead to higher bounce rates and lower conversions. While techniques like prefetching and caching help, there’s a powerful new API that can make pages load almost instantly: the Speculation Rules API.

In this post, we’ll break down what it is, how it works, and how you can start using it today to make your site feel lightning fast.


What Is the Speculation Rules API?

The Speculation Rules API is a modern browser feature that lets developers tell the browser which pages a user is likely to visit next — so the browser can prerender them in the background.

Instead of just downloading assets (like prefetch), this API fully renders the page in a hidden tab. When the user clicks the link, the page shows up instantly.

When Was It Introduced?

  • First Proposal: 2021 by the Chrome team

  • Early Implementation: Chrome 108 (Nov 2022)

  • Stable Release: Chrome 121 (Jan 2024)
    Currently, it’s supported in Chromium-based browsers like Chrome, Edge, Brave, and Opera. Safari and Firefox may add support in the future.


Why It’s Better than Old Prerender

The old "prerender" had security and privacy issues. The new API is safer, giving browsers more control and letting developers choose how aggressively to prerender.

How It Works

Here’s a basic example:

<script type="speculationrules">
{
  "prerender": [
    { "source": "document", "eagerness": "moderate" }
  ]
}
</script>

  • prerender: Tells the browser to fully prerender likely next pages.

  • source: "document": Looks at links in the current document.

  • eagerness: Controls how aggressively to prerender.

    • conservative → Only very likely clicks

    • moderate → Balanced

    • eager → Almost everything

When the user clicks a prerendered link, navigation feels instant — no white screen, no spinner.

Benefits of Speculation Rules API

Blazing Fast Navigation – Pages load instantly
Better Core Web Vitals – Improves LCP and FID
User Satisfaction – Feels like a smooth SPA experience
SEO Friendly – Faster pages = better ranking potential

Caveats

  • Extra Resource Usage: Prerendering uses bandwidth and CPU. Use it wisely.

  • Side Effects: If a page triggers analytics, logs users out, or runs payment flows on load, prerendering might fire those early.

  • Limited Browser Support: Works only in Chromium browsers for now.


Best Practices

  • Use progressive enhancement – it should only run where supported.

  • Target specific URLs (checkout, next step, article pagination) rather than prerendering everything.

  • Monitor analytics to ensure prerendered views aren’t skewing metrics.

Example of targeting just one page:

<script type="speculationrules">
{
  "prerender": [
    { "url": "/checkout" }
  ]
}
</script>

Conclusion

The Speculation Rules API is an exciting step toward the future of the web — where page loads feel instant. While adoption is still limited, early use can give you a competitive advantage and delight users with blazing-fast navigation.

If you care about performance, SEO, and user experience, this is a feature worth experimenting with.