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

<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 <3

Ahmed Muhammady.