⚡ Make Gatsby faster with Preact (1 LOC)

Note: I went into more detail on the why for this in my personal blog on the post Speed up your Gatsby site with 1 line of code 🤯. There's also a bonus tip there fore further improvements ;)

1. Gatsby uses React as its rendering engine;
2. Preact has the same API and is compatible with React, but is significantly smaller;
3. gatsby-plugin-preact automatically does the change for you, with no side effects (at least known to me);
4. Simply yarn add gatsby-plugin-preact preact and add 'gatsby-plugin-preact' to your gatsby-config.js plugins array;
5. And, voilà, you've got yourself a website with ~100kb less minified JS (uncompressed, 30.5kb for gzipped), which will load and parse faster, waste less bandwidth and perform better on Lighthouse scores, leading to better SEO 🎉

Again, for more info on this, refer to the full post on my blog 😉

Comments

[Sung M. Kim]

Hi Henrique,

This looks like a good post here. Might you be able to share this in full on DEV?

DEV generally asks that folks share their posts in full if possible and there is tooling provided (dev.to/settings/publishing-from-rss) to make it so that it's relatively easy to repost from outside blogs.

Hope you'll consider sharing the full post going forward.

[Henrique Doro]

Cool, didn't know that, Sung! Will do eventually as it's both easier and a better experience, thanks for the tip ;)

[Jack Lyons]

Wow, awesome post and I wonder why everyone isn't doing this!?
I'd love to see some stats on the performance differences!

Thanks for sharing