⚡ 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 ;)
- Gatsby uses React as its rendering engine;
- Preact has the same API and is compatible with React, but is significantly smaller;
- gatsby-plugin-preact automatically does the change for you, with no side effects (at least known to me);
- Simply
yarn add gatsby-plugin-preact preact
and add'gatsby-plugin-preact'
to yourgatsby-config.js
plugins array; - 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 😉