Rebuilding our website for high performance

We’ve recently relaunched our new website here at ClarityDX. As you can imagine, doing what we do our website is pretty important to get right! We have a backlog of things we want to improve and add over the coming months, but the new site is already a big step forwards for us.

The updated site reflects our experience, ethos and approach more clearly, better profiles our award winning team and gives our own marketing team more flexibility with the new WordPress Gutenberg editor.

But a key goal of the relaunch was to improve the performance of the site – this of course includes speed, but also UX, accessibility, SEO, security and best practices. These are all things that of course come up regularly on the client briefs we receive.

We wanted to demonstrate that you can have a dynamic, flexible and marketing focused site built with the new Gutenberg editor, and with clever features and integrations with platforms like HubSpot – but at the same time develop a fast and optimised site. WordPress can be super quick when delivered in the right way.

This post shares some of the approach and results of the rebuild in relation to performance.

Setting the scene

Why does performance matter? There are a few reasons.

The most obvious is that a fast site equals a good user experience. If your site takes ages to load, people will leave. Simple.

Second, it’s long been recognised that speed is an important ranking factor within SEO. There is some nice research that demonstrates this too. Google likes fast sites, because a fast site means better UX and people getting to the content they need quicker. Of course lots of factors contribute to SEO rankings overall, but if you are in a competitive industry then speed is key.

Accessibility is a topic that is receiving ever greater amounts of attention, and rightfully so. In the US where many laws support the right that no one should be discriminated against simply because they happen to have a disability, there has been a spike in lawsuits around websites not meeting accessibility guidelines. There were 2,258 lawsuits in 2018, up from 814 the year before.

Whilst lawsuits are less common in the UK, accessibility is still critical and within certain sectors that we work with it’s a priority.

In addition, in March 2018 Google announced its move to mobile first indexing, and our own site began to be indexed mobile first in September 2018. This means Google will view your website from the perspective of how it works on mobile first, and desktop second. Mobile is effectively more important in Google’s eyes, and this change reflects the fact that over half of Google searches now come from mobile devices. Ensuring that speed and UX are optimised for mobile is important.

Over the last couple of months, our own website has received 84.5% of traffic from desktops, about 14.5% from mobile and only about 1% from tablet. We’re in a B2B environment where this might be expected, but many of our clients have over 50% of traffic coming from mobile, and so demonstrating we prioritise mobile UX and performance is key for us as a WordPress Agency.

How we measure success

Google uses a tool called Lighthouse to measure the performance of sites, and this is the same tool that gives you your page score inside Google PageSpeed Insights. This is Google’s tool for measuring speed, so we can assume it uses the metrics from Lighthouse to feed into its ranking algorithms with various weightings relating to speed.

Lighthouse audits can be run inside the Google Chrome browser (instructions here), so the results below are based on running audits within the latest version of Google Chome (Version 75.0.3770.142) in an Incognito window. There are also some results from a few other page speed tools. The page URL used in all of the tests below was the homepage of claritydx.global.

The results

The below are the ‘Mobile’ audit scores from Lighthouse. As you can see we’re achieving strong results across the board now:

We did notice a variance in Lighthouse scores across different devices and computers which we aren’t able to explain, so be aware you might get different scores from device to device even on the same network.

Performance

In terms of speed and performance itself, we’re getting razor fast speeds and sometimes even able to get our ‘First Contentful Paint‘ (one of a number of ways of measuring speed) in just 0.2 seconds.

WebPageTest, one of my favourite deep dive speed audit tools, gives us a Load Time of just 0.837 seconds and ‘First Interactive’ of just over 2 seconds to begin with:

We then ran this test again once HubSpot was installed, we saw lower speeds thanks to all the JavaScript it inserts, so this is worth considering.

HubSpot is definitely guilty of loading lots of scripts and causing more main thread work. But then it is also a very powerful piece of marketing software if you want all the insights it can provide!

GTMetrix gives us a ‘Relative Fully Loaded Time’ of 1.5 seconds (its average score from sites tested on GTMetrix is 7.4 seconds):

As you can see, there are a number of definitions of ‘load time’ based on when different milestones in the overall load of a page are reached, but these results are all very fast for a dynamic and flexible site like our own.

Accessibility

The audit in Lighthouse tests against a few accessibility principles. Not all accessibility tests can be automated in a tool, but those that can are tested against below:

We didn’t quite get a 100 score because of using some text over images and the contrast not being quite high enough to meet WCAG AA guidelines. We plan to work on this, but it will probably need a redesign of certain modules.

Best Practices

Lighthouse also tests against a number of what is considers to be ‘Best Practices’ which can be seen below:

The one warning seen above relates to WordPress’ reliance on version 1.12.4 of jQuery. Lighthouse sees this as a security vulnerability, but it’s not really an issue and is well documented.

SEO

Lighthouse also runs a number of basic SEO checks, all of which pass:

The reason we get a score of 97 out of 100 on SEO is that some of our link ‘tap sizes’ are a bit too small on mobiles. They should be a minimum of 48px x 48px to ensure good UX on mobile, but some of ours are not quite large enough – we’ll have this fixed soon.

Too good to be true?

Of course not everything will be perfect when building a highly functional site and testing speed on certain tools.

When testing on GTMetrix we get a couple of low scores around DNS lookups and using cookie free domains. We’re reliant on all of the tools below to deliver integrations and functionality on our site, and so have to accept we might make a few speed sacrifices.

As a couple of examples, our web fonts are delivered by TypeKit and we integrate with HubSpot for marketing automation and analytics. We have lots of external JavaScript loading in order to power our analytics and tracking. We cannot change how these services work or integrate with our site – they are simply outside of our control.

On the Google PageSpeed Tool itself, we also get notified of some opportunities, but these are really things that are as compressed or optimised as they can be so far:

The reality is that when building any website (not just WordPress) that is functional and effective from a marketing angle, it won’t always be possible to get perfect scores across all measurement tools. If you connect with external tools, integrate with marketing automation software like HubSpot, or are reliant on certain plugins, some things will be outside of your control. Some resources will not be cacheable. Your site might make a few too many DNS lookups than is ideal. You might not be able to minify or merge all files. This comes with the territory of dynamic CMS based marketing focused websites, and is not a limitation just of WordPress.

Website optimisation will always be a balancing act with real world marketing and business needs, so you need to take a pragmatic approach. Of course if speed was the only thing you cared about, you could build a boring looking static site with no functionality, but then that probably wouldn’t help you achieve your marketing objectives!

We’ve also noticed that different devices/computers have presented us different Lighthouse scores despite accessing the same site on the same network. This is a known issue in Lighthouse, and more evidence that speed testing is not an exact science.

Overall though, we’ve achieved some exceptional results in Google’s Lighthouse tests and at the same time have a site with all of the integrations and functionality we need. It’s hard to argue with these scores:

We achieved these results thanks to our experienced development team (thanks in particular to our front end developer Andrew who led the build), adherence to best practices and proactively working hard at performance, along with some clever technology to give us a final boost. If you want to know how we did it, get in touch and we would be happy to share more detail.

In summary, achieving a fast, accessible and optimised WordPress site is possible, but it definitely takes time. If you are considering reaching out to a WordPress Agency and performance or accessibility are important to you, make sure to make this clear and have the budget and timelines available for them to achieve the performance levels you need.