Web Performance Optimisation: Are you Doing it Right?

How your website performs comes down to more than how high you are ranking on SERPs. 

There are many technical aspects that make up how your site loads and the content that is displayed to users. 

We’ve covered before that site speed is more important than ever due to mobile-first indexing. Here we’ll cover what else you can do to optimise your site to the highest level. 

Page Speed Optimisation

Page speed helps with SEO by developing better and faster crawling, indexation and efficiency. But it is more than that. It also helps with user experience – you don’t want you users to wait for your pages to load. 

A recent study by Kissmetrics.com showed that “47% of people expect your site to load in less than 2 seconds”, and “405 will abandon it entirely if it takes longer than 3 seconds”.  So, can you really afford to have a slow website? 

There are several tools you can use to measure your site speed, many will even give you recommendations on how to improve. This is not an exhaustive list, just some interesting tools which you could benefit from. These include:

• Page Speed Insights – this is a tool by Google which analyses the content of a web page and then generates suggestions to make that page faster. You will receive a score for mobile the desktop and the mobile versions of your page. 
• Webpagetest.org – this is an open-soured tool where you can see how a particular page loads. Your metrics are displayed in useful charts and visuals and you can also set the test location and the browser. 
• Google Chrome’s Lighthouse extension – this is an open-source, automated tool for improving the quality of web pages, and it’s another Google tool. This is a great as it provides important data to improve your website using the guidelines and policies of Google itself. 
• Speed curve – this is a paid tool (30-day free trial is available) that shows you how to measure experienced load time and what you can do about them. 

Client-side Speed Basics

Images are an area where you can save a lot of space and time. Make sure you’ve compressed them as much as possible (without compromising on quality before you upload them. You may be surprised by how much space you can save. 

Also, if you’re uploading an image that’s 1280 x 1024 in dimensions but you’re going to resize it on your website to 300 x 240, then you’re missing an opportunity there too. Crop and resize your images before your upload them to shave off unnecessary file size and to avoid adding unnecessary lines of CSS. 

You can also consider using modern image formats such as WebP or jpg-xr which are designed to be more efficient. The only drawback is that these are only supported by Chrome at the moment. 

You don’t need to load all of your files at once. Think about which files you can load asynchronously to prevent blocking the render. Essentially, if it’s not something that is going to be seen or used immediately by your visitors, then it doesn’t need to load immediately. 

Try to minify your files as much as possible. This means shrinking your CSS and JavaScript files etc. Doing this will shorten variables and remove any unnecessary line breaks. 

It’s amazing how much difference changes like these can make to your performance optimisation. 

Server-side Speed Basics

 The performance optimisation of your server comes down to:

• What servers are you using? Are they best suited for what you want to achieve? 
• What does your database and its structure look like when dealing with the queries they have to answer?  
• Are you using a MySQL database and is that using any type of caching? 
• Are you running fully in HTTP2?
• Are you sure you’re leveraging browser caching correctly? 
• Have you considered edge caching? 

That’s a lot to think about, but it’s worth it! 

The TTFB (Time to First Byte) measures the responsiveness of your server so this is a good metric to look out for when using some of the page speed tools we mentioned earlier. The faster the TTFB then the faster the requested resources can be delivered to your visitors’ browser. 

Broadly, a TTFB below 200ms is good, 500ms is already too long, and 1s or more is bad and needs addressing immediately. 

Another nice win is to use a CDN (Content Delivery Network), such as Cloudflare, for websites with lots of images and other static files. The latency of your users should reduce after this. It’s worth noting that for local sites that are hosted locally, the TTFB may increase if the Cloudflare server is further away. 

When it comes to caching, it’s generally recommended that images are cached for at least a couple of days. 

Hopefully this gives you a good starting point for your web performance optimisation. Once you’ve got these down you can start to look at some more advanced optimisation methods.