Minor papercuts in Astro

If you haven’t heard of Astro, it’s a blazing fast, minimal-JS framework that you should definitely try for your next personal website or blog. I would not recommend it to build the next Facebook — Astro themselves don’t. It’s not trying to be a full fledged app-development platform but rather a targeted product for content-centric websites.

Overall I’m actually very happy with Astro. The websites are pretty snappy, and for a simple website like a blog it really is the perfect solution. It gives just enough composability with its component and layout structures to handle personal project level use cases.

1. Enable compression!

I have no idea why this isn’t in the default template, but it was pretty annoying to set up a brand new framework that advertises speed, only to see a 98 on the Lighthouse score under performance.

A brand new astro create project showing… less than perfect results

And the opportunities are pretty obvious!

Then, in the astro.config.mjs file, make sure to add the new integration:

import compress from "astro-compress";

export default { integrations: [compress()] };

So surely after this, we’ll be at 100 right? Wrong.

Performance after setting compression

I completely understand that 100 isn’t always better than 99 on Lighthouse, but it‘s just a bit odd that the a framework whose primary purpose is speed doesn’t get a perfect performance score right off the bat. Maybe it says something about the state of all the other web frameworks that folks are literally bragging about getting 99 out of 100 with Astro.

2. Enable Prettier

It seems that Astro themselves cannot agree on the right formatting. When you first run pnpm create astro@latest, everything is single-quotes and semicolons. Not my favorite, but whatever — as long as it’s consistent, it doesn’t matter.

Then we follow the docs’ suggestion to add Tailwind: pnpm astro add tailwind, and we get this:

Mismatched quotation mark styles in imports

Astro, please standardize. Our collective OCD will thank you.

Speaking of Prettier, it looks like it actually doesn’t work out of the box with PNPM. With PNPM, you have to run prettier --write --plugin-search-dir=. .. The docs are helpful in suggesting this, but it would be great if there was a pnpm astro add prettier command, just like for Tailwind, which would do this along with creating the required .prettierrc.cjs file.

3. Custom Fonts

The documentation is pretty good for adding custom fonts. One thing that’s not quite obvious is that it’s actually crucial to add font-display: swap, or you block the page from rendering anything until the client downloads the font files.