Following the installation instructions was fairly simple, and I had the plugin working within minutes. Adding this plugin also gave me the final kick I needed to remove Google Analytics and any tracking scripts from this blog. If I want to add analytics back at any point, I will use a tool like Netlify Analytics, to provide statistics on server side requests.
Based on my testing, the initial page load for both the home page, and the most recent blog post, the number of requests and the data transferred has been significantly reduced:
- Home page:
- Before: 25 requests, 125 kB transferred, 332 kB resources
- After: 4 requests, 25.5 kB transferred, 48.2 kB resources
- Blog post:
- Before: 22 requests, 104 kB transferred, 308 kB resources
- After: 3 requests, 9.3 kB transferred, 35.1 kB resources
My analytics shows most visitors to my website don’t browse, and instead land from Google to the blog post they want to read, then leave. This means all the benefits of Gatsby’s pre-rendering of pages is not valuable to them.
Whilst this is a massive gain in client-side performance, I have found a few downsides. Firstly, I have lost any clever tricks the gatsby-image was performing to optimise images. Secondly, the plugin does not work locally when using the
gatsby develop command, so to confirm everything is working, I do have to run
npm run build && npx serve public before pushing to GitHub (although this should be the motivation for me to write some true integration tests).
Overall I am very happy with this plugin and would strongly recommend it for any static site looking to remove some page bloat, assuming it has no requirement for client-side JS.
Longer term, I am planning to move away from Gatsby, but this plugin has saved me a lot of time in my effort to remove all client-side JS.