I forgot to publish this, but it was mostly written and I did the work on the 9th so I’m counting it damn it.

Out of the box Astro’s blog template got me pretty decent Lighthouse, but it wasn’t perfect.

This became especially true after I went down the dark paths of considering analytics just for the sake of validating my assumption that no one would read this.

My previous knowledge of a lot of the things I was missing from a perfect Lighthouse score wasn’t great, much less the solutions.

External JS loading

One of the ones I hadn’t thought through was the consequence of how JS gets loaded in.

I had expected that a <script async... would… Well… async, not be treated as a blocking call.

I mean, it makes sense when you read the docs, but it’s not something I would have expected at face value from reading those words.

It was a great opportunity to find out about partytown.

Firstly this is just an amazing package name. I just… Need to give credit there.

Secondly, I adore this, I really do. I love that lets me control a third party script (eg: analytics) to without blocking the main thread.

That’s just great.

Caching

This one is 100% on me. I’ll admit that.

I had initially just used aws s3 sync to push my dist directory to S3.

This is simple, but also means that fonts and images weren’t getting uploaded with sensible cache policies.

This makes sense, and I’m fine admitting that’s on me.

I ended up moving to using this instead:

aws s3 sync --exclude '*.jpg' --enclude '*.png' --exclude '*.woff' dist/ s3://${bucket}/ --delete
aws s3 sync --exclude '*' --include '*.jpg' --include '*.png' --include '*.woff' dist/ s3://${bucket}/ --cache-control max-age=31536000

I’m sure I’ll need to tweak things overtime, but it’s a nice quick fix that does the job pretty well.

Compression

Apparently I just hadn’t turned compression on my Cloudfront distribution.

Unsure how I missed that.

Oh well, one line of Terraform, done.

Fonts

Ok, this one had me unsure and 100% relying on Google to work through.

I wasn’t sure how loading fonts was causing content shifting on a static site, especially given all the HTML is inlined.

I got to learn about the different uses of font-display.

I just flat out had never needed to learn this and find it super interesting.

Out of the box Astro had shipped using swap, so, it makes sense that it was rendering the content first and swapping the content after.

This actually not only lead to issues with content shifting but also with the header having a11y issues due to being laid out incorrectly and Lighthouse not recognising that until after the shift was fixed.

Moving this to optional seems to have cleaned this up and it works well now! There are probably trade-offs there for poor quality network connections, but I am happy to burn that bridge later when this doesn’t become massive.