My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

⚡ Make Gatsby faster with Preact (1 LOC)

Henrique Cavalieri's photo
Henrique Cavalieri
·Oct 13, 2019

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 😉