HTML NEW Speculation Rules API makes your website super faster!
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
No comments yet. Be the first to comment.
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.
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.
<script type="speculationrules">
{
"prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }],
"prefetch": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]
}
</script>
Downloads only the HTML of the target page in the background
Uses minimal resources
Ideal for lightweight performance improvements
Fully loads the page (HTML, CSS, JavaScript, images)
Keeps it ready to be displayed instantly
Provides the best perceived speed, but uses more resources
moderateTells 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
✔ 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.
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
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 <3
Ahmed Muhammady.