Project 27, PWA and offline

Instant-loading Blog

Hover over a post title for a moment, then click. The page was already built in the background, so it opens instantly. The timer at the top proves it.

Main API: Speculation Rules
Measures: activationStart
Dependencies: None
Your browser: Checking

0 ms

until this page was ready

Eagerness

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.

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/*\\?post=*" },
    "eagerness": "moderate"
  }]
}
</script>
<script>
  const nav = performance.getEntriesByType("navigation")[0];
  const wasPrerendered = nav.activationStart > 0;
</script>