Understanding script type=”speculationrules”

Web performance plays a huge role in user experience. No matter how powerful your JavaScript or backend is, if your page feels slow, users leave.

That’s where Speculation Rules API comes in. You may have seen a snippet like this in modern web code:

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

If you’re wondering what this means, don’t worry. In this blog, we’ll break it down step by step.

What is the Speculation Rules API?

The Speculation Rules API is a new browser feature that helps improve web performance by prerendering or prefetching pages before the user actually clicks on them.

Think of it like this:

  • You’re about to click a link, and before you even do, the browser has already prepared the next page in the background.
  • When you click, the page appears instantly, as if it was already open.

This makes your website feel faster and smoother.

Breaking Down the Code

Script Tag

<script type="speculationrules"> ... </script>
  • This tells the browser that inside this script, you’re defining speculation rules (not normal JavaScript).
  • It’s purely instructions for the browser.

The JSON Object

{
  "prerender": [
    { "source": "document", "eagerness": "moderate" }
  ]
}
  • prerender: Tells the browser to preload and render a page in the background.
  • source: "document": Means the prerendering is based on the current page/document.
  • eagerness: "moderate": Defines how aggressive the browser should be about prerendering.

What Does "eagerness" Mean?

The eagerness property controls when the browser should start prerendering.

  • conservative → Only prerender when very likely (e.g., hover over a link).
  • moderate → Balanced, starts prerendering earlier than conservative.
  • eager → Aggressive, prerenders links as soon as possible.

In our example:

"eagerness": "moderate"

This means the browser doesn’t wait too long but also doesn’t go too aggressive—it tries to predict intelligently.

Why Use Speculation Rules?

Here’s why modern websites are adopting it:

✅ Faster navigation → Pages load instantly after a click.
✅ Better user experience → Smooth browsing like a mobile app.
✅ Improved Core Web Vitals → Helps with SEO ranking.
✅ Progressive enhancement → Works in browsers that support it, ignored by others.

Simple Example: Prerendering a Link

Suppose you have a blog, and you know most users click on the “Next Post” button. You can tell the browser to prerender it:

<script type="speculationrules">
{
  "prerender": [
    { "source": "list", "urls": ["/next-post"] }
  ]
}
</script>

This means when a user is reading the current article, the next article is already prepared in the background.

Real-World Use Cases

  • E-commerce → Preload the checkout page when users view a product.
  • Blogs → Preload “Next Article” for smooth reading.
  • Web Apps → Speed up dashboard navigation.

Browser Support

As of now, Chrome supports Speculation Rules API, while other browsers are gradually exploring it. Since unsupported browsers just ignore it, there’s no downside to adding it.

1. What is <script type="speculationrules"> used for?

It is used to define Speculation Rules API in HTML, allowing browsers to prerender or prefetch web pages in the background for faster navigation.

2. What is prerendering in HTML?

Prerendering means the browser loads and renders a page in the background before the user clicks a link. This makes the page appear instantly when opened.

3. What’s the difference between prefetch and prerender?

  • Prefetch → Only downloads resources in advance.
  • Prerender → Downloads and fully renders the page in the background.

4. What are the eagerness levels in speculation rules?

  • conservative → Prerenders only when very likely needed.
  • moderate → Balanced, prerenders earlier than conservative.
  • eager → Aggressively prerenders as soon as possible.

5. Does <script type="speculationrules"> work in all browsers?

No, it is currently supported mainly in Chrome. Other browsers safely ignore it, so it won’t break your site.

6. Why is speculation rules good for SEO?

Because prerendering improves page speed, Core Web Vitals, and user experience, which are important ranking factors for Google.