# HTML NEW Speculation Rules API makes your website super faster!

# Make Any Website Load Faster with Just 6 Lines of HTML

Website performance is no longer a “nice to have” — it’s a critical part of user experience.  
Faster websites keep users engaged, reduce bounce rates, and directly impact SEO rankings.

In this article, I want to share a **simple yet powerful technique** that can noticeably improve perceived page load speed using **only 6 lines of HTML** — no frameworks, no heavy refactoring.

# The Core Idea

Instead of waiting for the user to click a link before loading the next page, modern browsers can be instructed to **prepare pages in advance**.

Google Chrome recently introduced the **Speculation Rules API**, which allows developers to define rules for **prefetching** and **prerendering** pages that users are likely to visit next.

The result?  
Pages feel almost instant when the user clicks.

# The magic code

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

# How It Works

### 🔹 Prefetch

* Downloads only the HTML of the target page in the background
    
* Uses minimal resources
    
* Ideal for lightweight performance improvements
    

### 🔹 Prerender

* Fully loads the page (HTML, CSS, JavaScript, images)
    
* Keeps it ready to be displayed instantly
    
* Provides the best perceived speed, but uses more resources
    

### 🔹 Eagerness: `moderate`

* Tells the browser to wait for a short user signal (like hovering over a link)
    
* Avoids aggressive preloading
    
* Strikes a balance between speed and resource usage
    

# Why This Matters

✔ **Faster navigation**  
Pages appear instantly when users click links.

✔ **Better user experience**  
Smooth transitions make the website feel responsive and modern.

✔ **Improved engagement**  
Users stay longer on fast websites.

✔ **SEO benefits**  
Page speed is a confirmed ranking factor for search engines.

# Important Notes

* This feature is currently supported in **Chrome 121+**
    
* Other browsers will safely ignore the rule
    
* If resource usage is a concern, you can use `prefetch` without `prerender`
    
* Best suited for content-heavy websites with frequent internal navigation
    

---

# Final Thoughts

Performance optimization doesn’t always require complex architecture or advanced tooling.  
Sometimes, **a few well-placed lines of HTML** can make a real difference.

If you’re a Frontend or Full-Stack developer, this is definitely worth experimenting with.

Thanks &lt;3

Ahmed Muhammady.