27 Aug

Improve Gatsby Performance Using NGINX

As a multi-national web platform with millions of visitors per month, website performance is of the utmost importance. We recently worked with a Silicon Valley based customer who was dealing with a slow loading Gatsby website, who engaged us to improve Gatsby performance metrics.

Their homepage regularly took up to 15 seconds to load on mobile and Lighthouse performance scores for desktop screens were a measly 42 out of 100. For our client, anything less than 75 is unacceptable. The effects of slow load time on user experience and conversion rates are well documented.

It was clear that we were going to improve the performance scores, but refactoring the Gatsby codebase could cost our client weeks of man-hours. How could we improve these performance scores without breaking the bank?

Using Chrome’s Dev Tools, we analyzed the page load times, images, bundle sizes and anything else that would cause inefficiencies. We focused on identifying the most egregious offenders to help improve Gatsby performance.

Using Chrome DevTools to analyze a website’s network requests and file sizes

Among other issues, we found that our client’s servers were not configured to compress files as they were being served. To address this problem, we launched a new server and installed NGINX. Our client’s files were being stored in an S3 bucket. NGINX gave us the ability to forward traffic to the S3 bucket and gzip the responses along the way.

The performance scores improved dramatically. Load times on mobile fell from 15 seconds to 2 seconds and the Lighthouse performance score went from 45 / 100 to 98 / 100. Better still, we were able to make these improvements at a minimal cost to our client.

If you have a codebase that seems unmanageable, it isn’t always necessary to pay for a complete refactor. With a little bit of analysis and research, you may find a way to get a big payoff with little effort.