Home / PWA and Offline / Instant-loading Blog
Instant-loading Blog in JavaScript, Free with Live Demo
Free instant-loading blog in plain JavaScript. The Speculation Rules API prerenders posts while you hover, so they open almost instantly. Timing shows the difference.
Runs on: Speculation Rules. Prerendering: Chrome and Edge 109+. Other browsers load pages normally.
What is the Instant-loading Blog?
Hover over a post title for a moment, then click. The page opens almost instantly because the browser already built it in the background. A timer at the top shows how fast the page appeared and whether it was prerendered.
This uses the Speculation Rules API, a small JSON block that tells the browser which links it may prerender and how eager to be. You can switch between eager, moderate and conservative to see the trade off.
Good for
- Blogs and news sites
- Product pages in shops
- Improving Largest Contentful Paint
- Multi page sites that want app like speed
What this project does
- Prerenders post pages when you hover or press on a link
- Timer shows how fast this page appeared and whether it was prerendered
- Choose eagerness: conservative, moderate or eager
- Works on static hosting, posts live in the query string
- No effect in browsers without support, links work as normal
How it works
- Declare the rulesA JSON script tag says which links may be prerendered and how eager the browser should be.
- Prerender on hoverWith moderate eagerness, holding the pointer on a link for about 200 ms starts building that page in a hidden tab.
- Swap on clickClicking activates the finished page. activationStart shows it was prerendered and how much time was saved.
The key JavaScript
This is the heart of the project. The full file has the rest, including the screen layout and error handling.
<script type="speculationrules">
{
"prerender": [{
"where": { "href_matches": "/*\\?post=*" },
"eagerness": "moderate"
}]
}
</script>
<script>
const nav = performance.getEntriesByType("navigation")[0];
const wasPrerendered = nav.activationStart > 0;
</script>How to use it
- Click Download HTML file above.
- Open the file in a code editor, like VS Code.
- Run it from a local server with
npx serve .so the camera, microphone and AI features are allowed. - Change the text and colors, then upload it to GitHub Pages, Netlify or your own site. It is one file with no build step.
Questions people ask
What are speculation rules?
A script tag of type speculationrules with JSON inside. It lists URLs the browser may prefetch or prerender before the user clicks.
Does prerendering waste data?
It can, which is why moderate eagerness waits for a short hover. Only pages people are likely to open get prerendered.
Which browsers support it?
Chrome and Edge. Other browsers ignore the rules and load pages normally, so nothing breaks.
More PWA and Offline projects
021. Offline-first Todo PWA
A todo app you can install that works with no internet
022. Expense Tracker PWA
A spending tracker with charts that syncs when back online
023. Reminder Notifications
A reminder app with Done and Snooze buttons in the notification
024. Local Markdown Editor
A Markdown editor that saves real files on your disk
025. Share Target Link Saver
A reading list app that appears in your phone's share menu