Reducing Gatsby Page Sizes by 172.2%
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%.
Achieving such a drastic reduction doesn’t need to be difficult, the changes and plugins that helped achieve this goal were:
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.
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.
Remember to append the
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.
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.
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.
Of course Lighthouse doesn’t have to be the only checker you use, consider testing your site with these other services: