fox.agency b2b marketing

Blog

Why Gatsby makes for a ridiculously fast user experience

Posted by: Robert Marshall on 1 April 2019

After over three years living with the same WordPress theme and user experience, I recently updated my personal blog – thoughtsandstuff.com

There wasn’t anything massively wrong with the site, but it wasn’t the best experience on mobile. The fonts were terrible and far too small – if you’re writing articles for people to read, they need to be able to read them – and it wasn’t the fastest to load.

The problem with basic WordPress themes is they come with a load of bloat baked in, without much consideration for the end user. This causes the page to load far slower than I am comfortable with. The blog is not for profit, so it was not affecting my overheads, but I do want users to have an enjoyable experience whilst browsing. UX is often overlooked when designing and developing a website, but to me, a self-confessed UX fanatic, it’s always a massive consideration.

UX issues

There are plenty of options available to those wanting a fast website. You could cache the hell out of your WordPress site, but that only gets you so far. There are still the issues of pre-fetching pages, and assets such as the CSS and JS. What about code splitting – providing the user with exactly what they need, and nothing else? Well, unfortunately WordPress can’t do this, at least not out of the box and not without an awful lot of work.

Turns out Gatsby JS is the solution I’ve always been looking for. Gatsby JS is a GraphQL, React based static site generator that builds blazingly fast websites and apps. Built on top of React, a JavaScript library created by Facebook, it allows users to enjoy the best parts of modern web development such as the use of NPM (a great open source package library), with much of the initial setup already completed.

Not bad UX

Due to the code splitting and pre-fetching, the time between clicking a link and arriving on the next page is almost non-existent. It has PWA support built in, meaning no need to set up service workers, and images are automatically compressed and saved in various sizes to ensure the best experience on every device. This all adds up to create a website that loads incredibly fast.

UX gatsby lighthouse thoughtsandstuff

When I rolled out the first production build, I ran a Google Lighthouse audit. My old site was getting a reasonable score, between the high oranges and mid greens, but with Gatsby it’s scored 100% almost entirely across the board without practically any tinkering, and with a few tweaks I can guarantee it will get 100% on each category. The great thing about this is that Google takes site speed very seriously, meaning my ranking is likely to improve. This is due to several factors:

Fast sites are easier to crawl

A fast site means fewer overheads for Google. This lets them spend fewer resources crawling for new links and pages, so they can afford to visit more often.

Fast sites reduce bounce rates

Google knows that users prefer faster sites and ranks sites accordingly. After all, if a site takes too long to load or has assets that are not properly compressed, the user will get bored and leave.

Improved user experience

If a site loads fast, people will enjoy using it. If there’s no delay between pages and the site speed is very fast, as I found with Gatsby, users will stick around, or at least navigate to the pages they want to read. By making the site quick and easy to use, users are likely to return.

It is not just a SEO issue, it’s also down to revenue. The BBC found that they lose 10% of users for every extra second their site takes to load. This 10% of users could translate to potential leads for your business, and if you allocate a figure to this based on your user’s average spend, you may find you are losing a fair amount of income.

Rolling out a Gatsby site isn’t all laughs, and for someone less technically minded it is a potential minefield. For of all its benefits in reducing the amount of time to a completed project, it is a significate technology stack, dependent on the requirements. Just for my blog site I required the understanding of the following tech:

  • PHP server
  • Domain DNS records
  • WordPress
  • NPM
  • NodeJS
  • ReactJS
  • Gatsby
  • Github

However, this upskilling is well worth the investment when you consider the benefits of converting your website to a faster build. If you’re looking to create a site that has better user experience, better search ranking and better ROI, Gatsby is the way to go.

I am going to continue to improve my Gatsby blog and in doing so will most definitely discover faster ways of making better websites. If you are interested in the source code, the Github repository is: https://github.com/justlikethisdesign/gatsby-tns

We'd love to hear from you.

To see how we can help your business, why not drop us a line and say hello?

Contact us