11ty vs Gatsby: Web Bloat And Core Web Vitals
You may or may not have even noticed this, but my Gatsby blog (this one) has been completely redeveloped using 11ty .
The design is practically the same with some minor modifications, but I’ve gone from GatsbyJS + Bootstrap (reactstrap) to 11ty + Tailwind.
But I thought you said Gatsby was the greatest!
Indeed.
Still my favorite tool by far.
But I’ve had some issues of late and some major concerns in the lead up to Google’s Core Web Vitals algorithm update that’s due to hit us in the coming weeks.
Lighthouse v6 just does not like GatsbyJS right now.
Let me explain.
UPDATE: Make sure to read my follow-on article where I explain how to optimize GatsbyJS for Core Web Vitals .
NEW UPDATE (2022): Okay, so I’ve moved back to Gatsby (99 score on this post). Redeveloped the site from scratch using vanilla-extract and other best practices I’ve discovered. Plus Gatsby has made some big performance improvements since I wrote this post.
GatsbyJS is not prepared for Core Web Vitals… yet
Actually to be fair, it’s not Gatsby or even React that’s at fault.
It’s Google’s ridiculous expectations that I blame.
Before Lighthouse v6 rolled out, I had consistently high (95%+) Lighthouse performance scores on my language blog.
Once v6 hit, I was getting around 25%.
I’ve spent the past month tweaking, trimming down, consulting with Kyle Mathews (Gatsby founder), reading every optimization guide and tutorial I can get my hands on.
As it stands, my main blog ( The Mezzofanti Guild ), has reached 75% after all that work (I’ll share some of my strategies so far in my next post - UPDATE: Here ya go ).
Core Web Vitals are still complaining on and off as well.
However, when you visit my site it’s blazing fast (no discernible speed problems for visitors).
I could theoretically remove one or two more node modules but it would require me redesigning parts of my site and subtracting from the UX.
I’m quite sure that at most, I could get my main Gatsby blog to around 80 or 85, but 100 is virtually impossible.
What about this site?
So this blog - DonovanNagel.com - has always been my test site.
Whenever I want to test something out for The Mezzofanti Guild, I usually play around with it here first (you can see the exact same Gatsby template I was using over my BSD site ).
I don’t really care about slower speeds on my personal blog, but I wanted to see what I could achieve by moving this Gatsby site to 11ty with a much lighter CSS framework.
The results have been impressive.
11ty gives me a 100 performance score with perfect Core Web Vitals
Test this page out.
Admittedly, there are little to no images. I have implemented 11ty’s image plugin with AVIF support, but I rarely use it (images are too costly and/or time consuming to find or make).
I think the main reason is that the end result is just a plain, minified HTML file.
No heavy Javascript bundles.
No hydration.
Just straight up, old-fashioned web (btw, see Luke Smith’s video on Soy Devs and how it’s ruining the web).
But here’s the thing: as great as this may be, I’m really quite down about it, to be honest.
I love Gatsby and I want it to achieve perfect speeds (without gutting my site and sacrificing UX).
But unless I can solve this bundle bloat issue and get top speeds again (or unless Google rolls out a Lighthouse update that accounts for React hydration and bundling), then I may end up having to redevelop The Mezzofanti Guild using something more primitive like 11ty.
Not the end of the world but a real shame (also, I’ll lose SPA, PWA and Gatsby’s unbeatable image work).
What about Next or Gridsome?
I could potentially see improvements moving to another React or Vue framework.
But why go to all that bother only to find out it did nothing or only made a tiny difference? I just don’t want to go down that road.
If I have to redevelop away from Gatsby bloat, then it’ll be a lightweight static site generator like 11ty or Hugo.
I have heard great things about Next (see my post on NextJS 10 ), but I’d need to be really sure before making that move.