Reducing Gatsby Page Sizes by 172.2%

2020-11-08

Time for a Change

As I mention on my projects page, this site is built using GatsbyJS. Out of the box, Gatsby does a fantastic job of making itself extremely flexible and extensible with more plugins than I could possibly count, however for a humble blog such as my own this is generally excessive. Although Gatsby certainly has less “bloat” to it than some competitors, the average page generated can still be substantially larger than what may be produced with a more hand-crafted approach.

This excessiveness I mentioned is something I discussed in a previous post, having decided to redesign my site in order to focus on producing better content by stripping out as many components as possible that would hinder that goal. As such I thought I’d put together some of the changes I made so that you too may be able to apply them to your own site. With just these simple changes I was able to take my average page-weight from 375kB to just 28kB without any visual degradation. A saving of 172%.

Changes Made

Achieving such a drastic reduction doesn’t need to be difficult, the changes and plugins that helped achieve this goal were:

Preact

For a strong start, install preact. This plugin is a drop-in replacement for the standard React framework that Gatsby extends upon. Preact itself is an extremely optomised React alternative that weighs in at just 3kB, as oposed to the 100+kB that vanilla React provides.

To install preact in your project, run the following:

npm i gatsby-plugin-preact preact

Remember to append gatsby-plugin-preact in your gatsby-config file for an instant reduction in page size.

No-JavaScript

Even if you’re not using it, Gatsby bundles a considerable amount of JavaScript in when you build your site. Most of this JS is dedicated to handling caching and service workers which, although useful, may not always be the most relevant to your use-case. One way to remove this JS and drastically reduce the size of your website in the process is via the no-javascript plugin which removes all the JavaScript that Gatsby bundles in during the build phase.

To install no-javascript in your project, run the following:

npm i gatsby-plugin-no-javascript

Remember to append the gatsby-plugin-no-javascript to the end of your gatsby-config file. It is important that this plugin be put at the end of the file. Doing so ensures that any JS generated by the preceeding plugins is removed correctly.

Local Fonts

Somewhat of a more extreme suggestion that may come as a suprise is to consider using local fonts, or at the least checking the size of your current fonts. I was suprised to find that the font I was previously using was pulling in almost 100kB. Of course, you don’t need to scrap external fonts entirely but it may be worth checking what size those you currently use actually are and looking for smaller alternatives if neccessary.

It can be easy to consider adding external fonts as just a natural part of creating a website however websafe fonts can not only look nice, they can do so without any external requests.

Conclusion

With these changes in place, not only will your site load faster and use less bandwidth, your efforts should also be reflected in your Lighthouse scores.

Alternative Services

Of course Lighthouse doesn’t have to be the only checker you use, consider testing your site with these other services: