Increasing Lighthouse score to 100 - how I did it on my blog

October 8, 2024

I know, I know - on a static site, a blog. It's not an incredibly demanding site, by any means. But the same strategy to improving perf applies on larger sites. Here's how I hit 100 on Performance stat for this site.

If you have direct control over the scripts and CSS you run on your site, you're in a good spot. It's pretty likely that Chrome's "Eliminate render-blocking resources" guide is going to be your best friend here.

On this blog, I had a few scripts and stylesheets running: particularly, littlefoot for footnotes, and instant.page to allow instant page loads. Adding async to these script tags and deferring the CSS load was the bulk of changes I needed to make directly on the site.

The print media trick for CSS works well here:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

We're setting the media property here to "print", meaning that it's only relevant when printing this page. But when onload fires, we change the media property to all - meaning it's relevant to the page again. The browser will then load the CSS. It's a tricky but effective way of deferring CSS until after page load.

I also did some work on my Cloudflare config for this site to improve time to paint metrics. You can see in the below chart when I turned on caching at the Cloudflare level for my site:

I created a rule that is literally just "Cache Everything"¹, with a 60 second time-to-live setting. That means that my site is basically on a rolling sixty second cache, at the edge server level, not at the browser. bearblog doesn't seem to have any caching headers included, so instead of trying to lean on it for any sort of knowledge about when and why to cache, this implementation is simple. When a page is hit, it refreshes the cache, then serves out of it for a minute. After a minute, the cache is restarted. I have Cloudflare's "stale while revalidate" param set to true, so it serves stale content while it refreshes the cache.²

There's more work to do with SEO, but the site feels super fast. As more traffic comes here from my SEO experiments, it will be satisfying to know that the site is really fast, no matter where you're accessing it from.

#webdev