loading...

⚡ Make Gatsby faster with Preact (1 LOC)

hdoro profile image Henrique Doro ・1 min read

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 😉

Posted on by:

hdoro profile

Henrique Doro

@hdoro

Web builder diving into web sustainability 💚 Consultant helping organizations with powerful content workflows with Sanity.io

Discussion

markdown guide
 

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.

 

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

 

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