Hourglass

5 Steps to Improve Your Site’s Loading Speed

People don’t like to wait. So if your site’s loading speed is on the slower side, you could be missing out on a significant number of visits and conversions.

 

With the ever-increasing shift to mobile (and often slower internet connections by association), delivering a speedy experience is becoming even more important. If your website’s speed seems “fine” on your high-powered WiFi-connected laptop, it doesn’t mean that it isn’t a problem for other users.

 

In this article I’ll explain how to analyse page speed and identify some of the most common (and easiest) improvements you can make.

 

Why bother?

 

If this seems like a lot of effort, then you might be wondering why you should bother to improve your site’s loading speed. Here’s a few reasons:

 
  • User experience. Site performance can be an important component of how users feel when they interact with your website, or business in general. You probably care about how your site looks and functions (and how that reflects on your business), so why not how quick it is?
 
  • Conversions. Even if you don’t care how long users have to wait (shame on you), you probably care about how well your site converts, right? There are numerous case studies demonstrating how even minuscule improvements in loading time can reduce bounce rates and increase conversions.
 
  • SEO. Together with the roll out of mobile-first indexing, Google have also confirmed page loading speed as a mobile search ranking factor. So not only can faster speeds improve performance from existing visitors, you might see an increase in organic traffic to your site too.
 

So, the short answer? Making some basic loading speed improvements could be one of the easiest ways to increase the ROI of your digital channels. Let’s figure out how.

 

1) Choose Your Pages

 

Before doing anything, you should choose 2-3 core pages on your site to analyse and optimise. While in many cases there are site-wide improvements to be made, some page templates can have different loading speeds and potential optimisations.

 

Here’s a few ideas:

 
  • Homepage
  • Product category page
  • Product page
  • Informational content page
  • Article/blog post
  • Custom landing page (e.g. for an advertising campaign)
 

Made your choice? Great. You can always test some others later.

 

2) Test Your Pages

 
GTmetrix Page Speed Analysis Tool

Fortunately, there’s a range of great page speed analysis tools out there. My personal preference is GTmetrix, a free tool which provides you with load time estimates, timing metrics, and a range of suggested improvements. You can also download PDF reports to easily document and share the information.

 

3) Identify Priorities

 

At this point you’ll probably have a big list of unfamiliar terminologies and associated scores. So where exactly are you supposed to start?

 

Before blindly trying to make improvements, it’s important to identify both the potential impact and level of difficulty of each action. In other words, begin with the easy stuff which could substantially decrease loading times.

 

Ideally, it’s best to take this information to your website developer and discuss the feasibility of each point. If that isn’t possible (or you’d like a few ideas to start with), then keep reading- I’ll explain some of the most common and significant improvements you can make below.

 

4) Start Making Improvements

 

Ready? Here are the activities I recommend starting with…

 

Image Optimisation

Images are ubiquitous on the web, but despite that I’d bet that the vast majority aren’t even close to being optimised for speed. However, optimising images can often reduce their file size by 50% or more, which adds up to a lot of savings for image-heavy pages. Here’s a simple process for optimising image file size:

 
  1. Choose a selection of pages/images you’re going to optimise. Your most visited pages and large banner images are probably the best places to start.
  2.  
  3. Save the images to your computer.
  4.  
  5. Check the images are saved in an appropriate format, i.e. PNG for graphics/logos/images requiring transparency and JPEG for photos.
  6.  
  7. Open the images using image-editing software which allows you to adjust the quality. I really like Paint.NET, which is free.
  8.  
  9. Re-save the images (in a different file format if appropriate) at the lowest level of quality which doesn’t noticeably compromise the image’s quality.
  10.  
  11. Further optimise the images by using a compression tool such as TinyPNG.
  12.  
  13. Re-upload the images. You’re done!
 
TinyPNG Optimisation Tool

Beyond that, you can also improve loading speeds by serving images which are scaled to device screen size and exploring next-gen image formats such as WebP (but be aware of browser compatibility). These are points to discuss with your web developer.

 

For more details on the above, take a look at Google’s image optimisation guide.

 

Minification

Minification is the process of removing unnecessary characters (such as whitespace and comments) from code, in this case CSS and JavaScript files. Although this formatting is useful for work-in-progress files, stripping it out of your site’s published code reduces file sizes, which in turn speeds up loading times.

 

Minification is a pretty simple concept, and there are plenty of free tools to help developers to minify code. So, if this is an issue which is flagged, it’s definitely one to talk to your web developer about resolving. Read more about minification in Google’s text content optimisation guide.

 

Compression

Compression is another way to reduce the transfer size of your website’s HTML, CSS, and JavaScript files, in this case by temporarily shortening these files during transfer from the server to the browser. Like minification, making these files smaller improves the page’s loading speed.

 

One of the most common compression methods is called GZIP, although Brotli (often more efficient but less well supported) is becoming more popular too. You can learn more about compression in Google’s text content optimisation guide.

 

Caching

Caching is the process by which a user’s browser (or another intermediate between the server and user) stores website files to be used later, rather than requesting them from the server every time a web page is visited. This reduces the number of requests and file downloads for repeat visitors, speeding up loading.

 

Caching rules can be implemented in a few ways, but the most important thing is the cache duration. While some files (e.g. frequently changing stylesheets or scripts) may need to be refreshed often and should have a short cache, other more static files (e.g. a favicon) can have a cache duration of up to a year.

 

By optimising the caching policy of different files, repeat visitors only re-download files when they need to. It’s probably best to discuss this with your developer or hosting provider, especially as the “right” caching policy for any given file or file type can be subjective. For more details, take a look at Google’s caching guide.

 

5) Review and Repeat

 

Congratulations! At this point you should have made some significant, fundamental improvements to your site’s loading speed. However, there’s probably still feasible and worthwhile improvements you can make.

 

I’d recommend starting the process again, either to identify less obvious optimisations to the pages you’ve been working on or by optimising a different area of your site. After all, even 100 milliseconds can count.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.