All-in On Astro

Switching from Gatsby to Astro

After hearing the hype for some time now, I decided to finally dig in to Astro, the front-end web framework for content-focused websites.

I’ve been using Gatsby for a few years now to build static sites, and I’ve been very happy with it. It’s a great framework, and I’ve learned a lot about React and GraphQL by using it. For the past three years, this site has been built with Gatsby. I’ve built countless sites for clients using Gatsby for the front-end and WordPress for the CMS. I’ve got a nice boilerplate repo using Gatbsy that I use to get started on new projects. It’s been a great tool.

Lately, though, I keep hearing folks in the web dev community going on and on about how much they love Astro, due to both the ease of use (developer experience) and the performance of the sites it builds. Well, I’ve spent the past few days digging in to Astro and can concur on both points.

Getting a new Astro project going was incredibly simple with the Astro setup wizard. Authoring my styles using SCSS was simple to set up as was including PostCSS plugins. I was also able to use my preferred ES Lint, Stylelint, and Pretter configs with no issues. The setup wizard even makes using Typescript a breeze.

I really like the file-based routing that is included out of the box, as well how Astro just uses HTML anchor tags for internal links. Since Astro also works well with markdown, all I had to do was copy my blog posts straight over from my Gatsby project and they worked perfectly. Astro also has a great Image component that makes it easy to lazy load images and generate multiple sizes for different screen sizes. Also, there’s no more need to include a key prop when rendering a list of items!

And no more need for className, htmlFor, tabIndex. Just use class, for, and tabindex like in the good old days.

Here’s a few stats on how things stack up from a performance perspective. These stats from Chrome’s dev tools pertain to the homepage for this website. The first table is data collected from the Network tab and the second table is data collected from the Lighthouse audit.

	Requests	Data Transferred	Total Resources	Finished Loading	DOMContentLoaded
Gatsby	51	1.6 MB	2.1 MB	4.98 sec	1.09 sec
Astro	31	965 kb	1.1 MB	228 ms	147 ms

	Performance	First Contentful Paint	Largest Contentful Paint	Speed Index
Gatsby	96	.7 sec	.7 sec	2.0 sec
Astro	100	.3 sec	.3 sec	0.3 sec

Astro outperforms Gatsby in literally every category, sometimes by quite a significant margin (“Finished Loading”). Granted, this is a pretty lightweight page as it is, but the difference in loading time is substantial. I can’t wait to see how Astro performs on a more complex site.