This article is currently an experimental machine translation and may contain errors. If anything is unclear, please refer to the original Chinese version. I am continuously working to improve the translation.
Currently, this blog is built using Hexo for SSG (static site generation). I simply write articles in Markdown and push them to GitHub, after which Cloudflare automatically builds the static pages and deploys them to Cloudflare Pages.
Thanks to Cloudflare’s solid performance, the site loads quickly and with low latency overseas. PageSpeed Insights gives it a performance score of 99. However, since Cloudflare lacks nodes within mainland China, access latency increases noticeably for users there.
I’ve previously tried using domestic CDNs and also experimented with Cloudflare IP optimization methods. While they did help, they introduced some deployment complications, so I eventually stopped using them.
Then came the star of today’s post — Instant.page. It leverages the browser’s native Prefetch mechanism: before clicking a link, a user must first move their mouse over it, press, and release the left button.
This tiny library takes advantage of the time gap between these actions. When a user hovers over a link, Instant.page triggers the browser to prefetch that page. If the user doesn’t actually click, nothing harmful happens. But if they do click, the browser has likely already started loading the page hundreds of milliseconds earlier — saving that much loading time.
Since it relies entirely on native browser behavior and the site is purely static, compatibility issues are virtually non-existent.
Installation is simple: just use Hexo’s Injector API to inject the script into the body_end section of every page, and it works immediately.
You can now open DevTools (F12) to see it in action. Switch to the Network tab, hover your mouse over any link here, and you’ll see the browser immediately initiate a request. When you actually click the link, the request will show as （prefetch cache）. On my connection, the page often finishes loading before I even click — resulting in an almost instant navigation experience.
That’s about it. Just a quick and effective little optimization that took minimal effort — sharing because it works surprisingly well 😊
This article is licensed under the CC BY-NC-SA 4.0 license.
Author: lyc8503, Article link: https://blog.lyc8503.net/en/post/hexo-blog-prefetch/
If this article was helpful or interesting to you, consider buy me a coffee¬_¬
Feel free to comment in English below o/