This Blog is Impossibly Fast

This blog was already very fast by any reasonable measure, but I was still curious if I could make it even faster. And apparently yes I could, and substantially so.

To get the basics out of the way all content here is static and CDN-hosted via AWS Amplify. The default Cache-Control headers were pretty weak (only included intermediary s-maxage timing), so I added the following:

customHeaders:
  - pattern: "**"
    headers:
      - key: Cache-Control
        value: public, max-age=900, s-maxage=31536000, immutable

But that only got me part of the way there…

Speculation Rules

I can’t avoid revalidation-on-refresh (default Chrome behivour, even when cache is fresh), but I can aggressively pre-fill the private cache to speed up navigation after the initial load. I first considered generating meta link tags to prefetch assets, but this luckily wasn’t necessary. There’s an experimental browser feature that incorporates similar behaviour, but with even better controls over which content to prefetch and when to do so: the Speculation Rules API. It also has the added benefit of allowing pre-rendering of content in a background tab such that a navigation event doesn’t even pass through the initial local-cache fetch-and-render.

As I noted above all of the content on this blog is static, but it’s also very lightweight by modern web standards. The first two posts were both less than 6kb (gzipped), so I have no concerns with pre-fetching and pre-rendering even dozens of posts (I will eventually paginate the index, if I ever write that much). The overhead of traffic and local resource usage is going to be negligable. So, I set a pre-render target for all local links on the page:

<script type="speculationrules">
  {
    "prerender": [
      {
        "eagerness": "eager",
        "source": "document",
        "where": {
          "href_matches": "/*.html"
        }
      }
    ]
  }
</script>

Preloading is Disabled

Unfortunately uBlock Origin disables browser pre-fetching and I’m sure it has a good reason to do so. So, the extra bump in render performance will likely go unseen by many, including myself! Oh well, I’m still pretty happy with the non-speculative performance. If you’d like to see the application of the speculative rules and whether a page was pre-rendered on load go to:

Chrome Devtools > Application > Background Services > Speculative Loads