Great Gatsby: What we’ve learned about the fastest growing website framework
I wrote an article last November about Gatsby and the benefits that it can give us as an agency. Well, six months later, we’ve had the pleasure of using Gatsby – and we’ve learned a lot from that experience. So I’m going to share some of my thoughts. I’ll give you a quick rundown on what Gatsby is, in case you haven’t read my previous blog post.
Gatsby is a static site generator built with performance in mind. The old way of doing things involves having a server generating and serving a page for every user who visits it. Instead, a static-site generator generates a static version of the entire site, which gets served to everyone. There is no longer a need to spend time waiting for the server to respond before you can see a page you visit. With Gatsby, it’s almost instant. As speed is one of the signals used by Google’s algorithm to rank pages, it’s more important than ever to make sure we’re creating the fastest websites possible.
Still a bit confused? Don’t worry. The results speak for themselves.
We recently used this technology on a site for Dopsu, and we saw some great results. We’re looking at a 20% increase in the initial load times of the site and even more significant increases when navigating between pages. It has also decreased hosting costs considerably, as we no longer have to run any complex functions on a costly server. On top of this, we can still source our data from WordPress or pretty much any other CMS. This is because the CMS is detached from the actual website, providing much needed future-proofing in a world where web technology is constantly evolving. Great, right?
There are more benefits to this beyond speed, though. Having a static site allows us to utilise a Content Delivery Network (CDN), meaning the site is distributed across multiple data centres worldwide. This allows for almost no downtime whilst providing good performance to any location in the world.
Of course, Gatsby doesn’t work magic, and it doesn’t remove page loading altogether. The bottleneck here is mainly in the assets, such as images, which will always require time to load – users can still be hit with a ‘blank’ screen before the image appears.
So with image-heavy websites, the speed difference can be less noticeable. But we found a solution for Dopsu – the images are lazy-loaded, so it doesn’t affect the page rank on Google.
Another downside of Gatsby is when it comes to content editing. WordPress can provide instant content updates when something in the CMS is modified, as the page is generated each time someone visits. Gatsby generates these pages in bulk every time a change gets made. This means that changes could take between 10 and 30 seconds to get built and become visible on the website.
For websites that require frequent content editing, this isn’t ideal, and it might be a better idea to stick to a traditional WordPress build. But for sites that don’t require many content changes after going live, the benefits that Gatsby provides outweigh the costs of delayed content editing. This was the case for Dopsu and it meant that Gatsby was an ideal solution.
We had great success using Gatsby on Dopsu and were happy with the outcome. It’s given us speed, versatility, and future-proofing.
While there are downsides to using it, it was the right choice for this project, and the results demonstrate that. We recognise this is still new technology, though and won’t fit the needs of every project. We’ll always assess the client’s requirements first and make an informed decision on what technology would be best suited to best solve their problem.