Over the past month I have been considering switching this website to a Static Site Generator which does not produce any client-side JavaScript. Whilst I am a huge fan of React and Gatsby, the technology which powers this blog, I don’t feel a my static website needs anything more than HTML and CSS to load posts.
Given a switch to a tool like 11ty from Gatsby would be a significant undertaking, I decided to explore what options I had in the Gatsby ecosystem and came across the gatsby-plugin-no-javascript project. This strips the script files created by Gatsby, but leaves the rest of your site intact.
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.
Results
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).
Conclusion
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.