DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Henrique Doro
Henrique Doro

Posted on

โšก 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 ๐Ÿ˜‰

Top comments (3)

Collapse
 
dance2die profile image
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.

Collapse
 
hdoro profile image
Henrique Doro Author

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

Collapse
 
jackedwardlyons profile image
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

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›