Prefetching webpages on my blog
I came across a great blog post while browsing Hacker News titled It's time for modern CSS to kill the SPA. It was a really interesting read because I don't keep up with what browsers can really do these days. My day job is strictly focused on backend services and the only exposure to frontend web technologies is through my own blog and any other side projects I'm interested in. While my own website is incredibly simple, there was something that jumped out at me while reading Jono's post that I could immediately take advantage of: speculation rules.
Speculation rules are "designed to improve the performance of future navigations" on a website. For my purposes, my mind jumped to loading a web page before someone actually clicks a link. However, after reading up on the feature, the speculation rules API can do much more than that.
With this small piece of HTML added to my website's pages, when someone hovers over a link, that page will speculatively be retrieved from the webserver and prerendered. When the link actually gets clicked ideally the page has already been retrieved and the navigation is instant.
<script type="speculationrules">
{
"prerender": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>