Impressive performance gains in moving TypeIt from Gatsby to Astro

The previous version of typeitjs.com was on Gatsby for several years. It was chosen during the framework’s hype days, and had grown in complexity along the way (there was even a great deal of home-grown documentation features in there as well).

After building a few sites with Astro, I pulled the trigger on migrating TypeIt’s site over too. And I’m glad I did. The process was extremely straightforward, and I was able to shed a lot of the poor decisions that had accumulated over time.

On the performance front, things were pretty notable too.

- the total amount of JavaScript dropped by 74%. - total main thread blockage (the amount of time JavaScript is doing something, preventing anything else from occurring) decreased by 90%. - Largest Contentful Paint, one of the Core Web Vitals used by Google to judge the user experience of a page, was cut in half. - the overall performance score jumped by 12 points.

All of this was achieved by sticking with the same overall design and layout. It was really due to getting away from a heavy, React-based static site generator.

If you’re working with a similar type of site and looking to upgrade, rebuild, or migrate, I highly recommend Astro and its Starlight theme. I’ll be using it probably exclusively moving forward.

See the TypeIt site here:

https://typeitjs.com