Recently, we migrated our old manual setup to Gatsby and as a result increased our website's performance greatly. In this article, I’ll explain how we did that and give a look at the results.
But before we dive into what we did, I think it's important to understand the why.
Why should I care about performance?
Spoiler alert: improving performance is a taxing job, but it pays dividends in the long run.
For UX, a slow website or app can be the most frustrating thing for a user and can even be perceived as broken depending on how long it takes to load. That beautiful design and animations you worked so hard on can easily be shadowed by a painfully slow load time.
The bad UX of a slow app can bring down conversion rates, cut down sales on an e-commerce, and even cause churn from frustrated users.
Studies show that 40% of users will leave a website if it takes more than four seconds to load (four seconds is about the time it took you to read this sentence).
One study from Amazon concluded that every second it takes to load a page on their website meant a loss of around $1.6 billion dollars.
Google concluded that if a search on their website was 0.4 seconds slower it would mean 8 million less searches — a lot of lost money on advertisement.
As you can see, load time is very important. Most users will perceive your website as not functional (something like "ok, this thing is broken") if it doesn't load under 4 seconds.
And if none of that convinced you: Google takes the speed index of websites into consideration when ranking them on search results. So if you care about SEO, you might want to check your website's performance.
How we did it
When it comes to client-side development, achieving a good performance is a demanding job. There are several optimisations that need to be done, all of which are non-trivial and require a lot of time to get right.
Luckily, we came across a tool (a static site generator, to be more specific) that does most of the heavy lifting for us.
Gatsby takes care of generating very optimised static assets for your page by using a pattern called PRPL idealised by Google. If you're curious, this is what this acronym means:
- Push critical resources for the initial URL route using <link preload> and http/2.
- Render initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.
In other words, Gatsby compiles React page components into static HTML pages, so that your user can see your content even before your React and other JS components have been loaded. Overall, you end up with a super fast initial load time. Pretty neat, huh?
On top of that, Gatsby offers out of the box tools like image optimisation (including base64 conversion) and lazy loading, PWA setup, offline support, and a very vast ecosystem of easy to use plugins.
What we achieved
By migrating from our old Create React App manual setup to Gatsby, we were able to achieve some pretty impressive results in a reasonably short amount of time (if we consider the amount of time it would take to do all the optimizations manually).
Our Google Lighthouse performance audit scores went from an underwhelming 36 points to 100 points.
Our load time for the first content on the page is now ~400% faster, and the time it takes for the first user interaction is now ~80% faster.
