The best way to improve your site’s performance
Performance used to be a nice-to-have. When we talk about performance, we generally refer to making websites faster. But these days there’s more of an onus on getting it right – it’s not just about user experience any more.
Performance has become a key part of search engine optimisation (SEO) – the way search engines, and therefore users and customers, find you online.
Core web vitals are metrics that are used by Google to determine the performance of a page so they’re crucial when it comes to optimising your site. You need good numbers in order to rank well.
Performance is now a key factor in any changes made to the website, and it has a significant effect on the bottom line. Every second of load time can affect your conversion rate – by an average of 4.42% within the first three seconds.
These are the core web vitals that determine the performance of your website and the performance criteria:
Core Web Vital | What it measures | What it should be |
Largest Contentful Paint (LCP). | Loading performance. | LCP should occur within 2.5 seconds of when the page first starts loading. |
First Input Delay (FID). | Interactivity. | Pages should have a FID of 100 milliseconds or less. |
Cumulative Layout Shift (CLS). | Visual stability. | Pages should maintain a CLS of 0.1 or less. |
You can read more about core web vitals here.
So how do you go about improving your website’s performance?
If you can't measure it, you can't manage it. So the first step in improving performance is to see how the site is currently performing. You’ll need to measure where you are and see where you rank, not only in terms of these core web vitals but also against other websites in the same sector.
Annertech has a lot of experience optimising websites for high traffic volumes. We use a range of tools for performance testing, including:
- GTmetrix – this lets you keep track of these things over time, so you can take a report and run it against another report.
- PageSpeed Insights – a free service run by Google, which downloads, parses and grades a website's performance. It tests browser performance, so all the assets required to render a page – HTML, images, CSS, JavaScript, fonts – are downloaded, including those on third-party sites.
- WebPageTest – These results are extremely detailed and very useful for in-depth performance monitoring and improvement. In particular, the tests are run twice against the site, so any efforts made to leverage browser-side caching on subsequent page loads are measured.
Once you have completed all your testing, you need to analyse how your site is performing against the Google benchmarks. Drill down to those three values that are on core web vitals. Take a couple of competitors and see how it’s performing against them.
Look at a couple of key landing pages and benchmark a few of those. Look at the values. Look how site is currently set up. Look at what has changed since the site was originally developed.
Now have a look at what’s on the site, how it’s done and what can be done to improve it.
Cutting time
In my experience, these are usually three things that contribute to sluggish performance.
1. Clutter
The simplest solution to performance is to post less stuff on the page. It is the number one recurring issue when it comes to performance.
Media assets such as videos and large images are usually the biggest culprits. If you have 100 images that are really big they will slow down your site. Most websites have too many images on the page, or images that are too large or are too-high resolution.
Do you really need that hero video that plays in the background? What about all those large images? Is their presence really worth compromising on performance? How many images does your site actually need? It’s probably fewer than you think.
Cutting the clutter can do wonders for a website’s performance.
2. Room for improvement
Assuming you’ve distilled the content down to only what is necessary, there will still be room for improvement.
Now that you’ve pared down the number of images it is time to look at their formats. New image formats such as WebP have better compression and quality characteristics. You can convert all the images on the site to another format, but it takes a bit of work to get it just right because there will be a trade-off between quality and size.
You can also lazy load images now using native web tools. This means that the browser will only download the images it needs when it needs them; it doesn’t download all the images on the page at once. The same applies to other media like video and even fonts. If you invest the time making sure they’re only downloaded when they’re needed, this will improve your performance results. However, bear in mind that, ultimately, the user still has to download everything.
Autoplay and background videos also have a huge impact on performance. Simple actions such as not autoplaying videos and not loading videos as backgrounds in hero areas can immediately improve the performance of your site, enabling it to work better on mobile devices and over low-bandwidth connections.
3. JavaScript
The third source of “stuff” on a page is 3rd party JavaScript. This is when a user copies a piece of code, and embeds it into every page of a website. A really popular script manager is Google Tag Manager, which not only lets you measure how much bang you’re getting for your buck when it comes to advertising but is also allows you to track your social networking sites and other applications.
These JavaScript vendors offer users certain features by putting their own JavaScript on a page, but this is often hijacked by other services so they can do tracking or analysis of the page and what we find is:
- People generally use these scripts arbitrarily with no consideration of performance.
- They’re added to every page. Site wide without targeting the URLs that they need to target. That’s both a client problem and a tool problem.
- Those tools don’t care too much for performance because it’s not their problem. We often find overlapping tools - three or four tools doing the same job. So you have four tools that target four different things for the client, but if you look at the stuff that’s in the report there will be an overlap, so there is a need to be more targeted about what tools are being used.
JavaScript doesn’t just affect the performance of your website, but there are also regulatory and privacy issues at play, especially for websites hosted in the EU. You can read more about these here.
In Conclusion
Ultimately, performance is also known as “death by 1000 cuts”. You will very rarely find a single big performance optimisation issue. What you will find is lots of micro-optimisations that all add up.
Once you’ve gone through your site with a fine-tooth comb and have eliminated all the unnecessary clutter and additional scripts you should notice a huge improvement in your site’s core web vitals.
Still struggling to optimise your site’s performance?
Let us take a look for you and advise on ways improve things.
Alan Burke Director of Technology
As Director of Technology, Alan plans and architects solutions to the complex problems Annertech solves on a daily basis.