I was inspired by Turntrout⁴ to optimize my website more, and two changes took page load times from “fast enough” to “effectively instant: Switching from CloudFront⁵ to Bunny CDN⁶ to optimize CDN cache misses, and efficiently navigating with Micromorph⁷.

Bunny CDN

I’ve been serving my personal website from CloudFront (Amazon’s CDN) for years, which was nice because it costs a few cents a month, but it annoyed me that cache misses get served slowly from S3. In some cases, this can take several hundred milliseconds. Completely unacceptable!

I finally decided to look up if anyone would let me serve all of my files from the CDN all of the time, and apparently Bunny CDN⁶¹ does. It’s “expensive” (over 10 cents per GB per month!), but since my entire website is ~30 MB, I just told them to store the entire thing on SSDs in every edge region.

Result: Every page loads in ~40 ms from anywhere remotely near an edge location², regardless of how recently anyone else has requested the page.

My “unacceptable” above is mostly tongue-in-cheek, but there really is something nice about every link loading instantly rather than in half a second.

The code to do this is also much simpler since Bunny CDN has a CLI that handles sync properly, and cache “misses”³ are so fast that I’m just not hot-caching HTML pages.

Micromorph

The second trick is Micromorph⁷, a tiny library that intercepts same-origin link clicks, fetches the destination HTML, diffs the DOM, and then applies the change instead of navigating.

Practically, that means:

• The browser never re-parses CSS, re-downloads fonts, or re-runs the theme-toggle script.
• Parts of the page that don’t change stay stable across navigations (Turntrout uses this to keep a video running⁸).
• The transition feels smoother.

I also was already using instant.page⁹, which prefetches links on hover so the HTML is already in the browser’s HTTP cache by the time you click.

There was one snag: By default, Micromorph intercepts all same-site links, which caused it to try to morph HTML pages into RSS feeds or EPUBs. I fixed that with an include whitelist that only morphs paths ending in .html or with no extension:

import listen from 'https://cdn.jsdelivr.net/npm/micromorph@0.4.5/spa/+esm';
listen({
  include: (anchor) => {
    if (anchor.origin !== location.origin) return false;
    const lastSegment = anchor.pathname.split('/').pop();
    return lastSegment === '' || !lastSegment.includes('.') || lastSegment.endsWith('.html');
  }
});

Did it actually help?

Here’s the Lighthouse¹⁰ performance scores before and after all recent changes:

And you can probably feel it for yourself if you click any of the links.