My new custom portfolio blog scores a perfect 100 on Lighthouse

I've been meaning to make a portfolio site forever. Upon embarking on any project, I always scan the landscape to see what people are using. Hugo and Jekyll are the two most well known. In the clojure space there is Cryogen, Clerk, and borkdude's quickblog.

I was amazed to see people recommending a new one called Astro which claims it's a frontend agnostic chimera with SSG capabilities. It's probably cool and everything but I have no idea what purpose it serves to be able to swap out frontend frameworks like react and svelte instead of just choosing one. I don't know how anyone is supposed to learn to be proficient in anything when new frameworks and build tools come out at breakneck speed, with changes breaking APIs and its users' sanity as they inevitably evolve.

Later I started talking to yogthos about my intent to make a portfolio site and he showed me you can make a babashka script that launches an http-kit server using hiccup and htmx in a single file. He just pasted it to me in a DM. I was pretty blown away, reminded me of the days I could just FTP things with PHP.

I benchmarked what he sent me and it was spitting out hiccup generated HTML at 70k/rps. This is intepreted clojure with instant startup. For context, rails tested several months ago on the same laptop does about 100 requests per second for a small JSON response.

None of the existing blogging solutions really appealed to me. Not because they're bad, but I'm lazy and don't want to learn anything especially when it's going to be more verbose than clojure. I also have some ideas in the future to grow this site to do more complex things than a static site can do. So I ended up turning that code Dmitri pasted to me into what this is today.

The lighthouse score was a bit of a surprise to me. It started off not being so perfect but was still very high.

That shows:

• 100 Performance
• 100 Accessibility
• 100 Performance
• 100 SEO

This is my first time using HTMX and I'm using boosted URLs on every link, which just makes an ajax request and swaps out the html instead of doing a full page load. The savings are pretty negligible and probably only barely perceptible to someone with a slow 3G connection and I'm ambivalent on whether I'll keep it this way.

I figured HTMX would send something announcing itself in its ajax requests and I was right, finding hx-boosted being included in the headers.

So I inlined all the site's CSS excluding font imports for the first page request and any boosted requests would not serve any JS or CSS.

I also convert all images to webp and set their original sizes in the image tag to prevent layout shifts while loading.

I'm used to a compile + deployment time of about a minute on my current projects for both backend and frontend. All I have to do with this is type bb go where it'll build the css, rsync the project, restarts the process and it's all done under a few seconds.

Despite the score, this site still feels significantly slower than the SPAs I made previously because every page is being loaded on demand. Initial page load is much faster but ~150ms latency is very perceptible.

I could have with just as little effort made this site a snappy SPA but decided against it for optimal search engine compatibility. Both have their tradeoffs and merits, but SPAs exist for a good reason and provide the optimal experience if done right.

To see everything this site is doing, you can find the source in the Aboot page