From 65 to 83: Attempts at Performance Optimization

Tonight, I went to [PageSpeed Insights](https://pagespeed.web.dev/analysis/https-brennan-day/0pwed2f655?form_factor=mobile) ran a Lighthouse audit on my site. The results? A performance score of 65.

Let's be honest: for a JAMstack site, this is a failure. A static site should be hitting +95s across the board. We're talking about pre-built HTML, minimal JavaScript, and a CDN. This is supposed to be the fast lane of the web.

I have made design choices that prioritize aesthetics and user experience over raw speed. And I think that's okay. I use Google Fonts instead of web fonts (Zach Leatherman would hate this, I know.) I use PT Serif, Public Sans, and JetBrains Mono for body, headings, and metadata respectively.

Right off the bat, that's three font files adding ~750ms to first paint. I could easily use system fonts and shave off that time, but I would lose design. Speaking of fonts, I also use FontAwesome icons to add visual context and personality to the interface. The cute little envelope icon next to "Contact" and the RSS icon in navigation? Not essential at all, but they make the site feel more human and approachable. That's another 340ms.

A bigger elephant in the room is that I currently have CSS architecture with 13 separate files, because it keeps my code organized and maintainable. Until yesterday, I actually was stuffing all my CSS into one massive file. This was over 3,000 lines because I get so in-the-weeds with styles, and bloated the critical path.

I try my best to keep my use JavaScript to things that are optional and not actually improtant. Like hovering tooltips, the post graph being clickable, the scroll progress bar, theme toggling, and a few easter eggs. All of this adds bytes and execution time, but I like to think the joy and fun it adds to the UX is worth it.

You can read more about my design choices in my [colophon](/colophon/).

After some simple fixes, I was able to get the score to 83 through a series of optimizations, each tested individually to ensure nothing broke.

## The Starting Line

Here's what Lighthouse initially told me:

- **Performance**: 65 - **First Contentful Paint (FCP)**: 4.2s - **Largest Contentful Paint (LCP)**: 4.8s - **Cumulative Layout Shift (CLS)**: 0.142 - **Estimated savings from render-blocking resources**: 1,050ms - **Estimated savings from image delivery**: 71 KiB - **Forced reflows**: 74ms each, happening twice

The audit identified several key issues: render-blocking CSS, layout shifts, missing image dimensions, and some JavaScript performance problems.

## 1. Critical CSS: The Biggest Win (1,050ms savings)

The biggest culprit was render-blocking CSS. Since I split my CSS up, my site was now loading 13 CSS files synchronously, blocking the entire page render. Whoops.

The solution? [Cr