Also, taking into account Google’s return to search algorithm, where bounces back to Google SERPs can be used as a ranking signal, having a fast page load time is an increasingly important SEO factor.

So, in short, fast is ideal from a UX and SEO perspective!

Let’s run through some simple techniques you can deploy, to measure and improve your page load times.

Analytics Data and Tools

There are a number of free tools enabling you can use to measure site speed metrics and diagnose problems, as follows:

1. Google Analytics

Google Analytics provides a few reports to help you monitor site speed. You can view page load times by browser and country – the latter being particularly useful if you’re a global brand.

If you’re technically minded, Google will provide more granular data around page load times including: domain lookup, server connection and server response time, in addition to the actual page time. This will help you identify bottlenecks in the system.

Google Analytics will also offer page speed suggestions, which loads in reports from the Page Speed Insights tool below.

2. Page Speed Insights

Page Speed Insights from Google measures the page speed on mobile and desktop devices. It fetches the URL twice, once with a mobile user-agent, and once with a desktop-user agent.

The Page Speed score is out of 100, and Google recommends that a score of 85 or more indicates that the page is performing well.

In addition to making technical recommendations across your page, PageSpeed Insights also offers suggestions on improving above-the-fold versus full page load times. With mobile usage so ubiquitous nowadays, above-the-fold suggestions can be of significant value and can vastly improve engagement.

3. GT Metrix

It provides clear actionable recommendations in a very effective and easy-to-use report. Have a go yourself, and you will soon realise how great it is!

Making Page Speed Improvements

Putting the tools aside for a moment, I’ve highlighted below some of the more common ways to increase your page load times. This list isn’t exhaustive by any means, but the examples could help you make quick gains.

1. Improve Caching

When you view a web page, your browser needs to download all the associated files be they images or code. Once downloaded, these files are stored in the browser’s cache and will be used again should you revisit the same page.

So, there’s a simple principle when it comes to caching: only serve files to website visitors when the file has changed, or if it’s a first time visit. In all other instances, you should be serving files from the browser’s local cache.

If you set up your cache headers correctly, this will work a treat and will reduce the page load time. For further information, check out the (not so) beginner’s guide to cache headers.

2. Clean Up Your Code

Minifying your HTML, CSS and JavaScript code will have a positive impact on page load times. With web pages relying more and more on lengthy JS code to provide interactivity and logic, lengthy code can make your page quite laggy. A code clean-up can include any of the following:

Tidy up verbose code including lengthy comments from developers (but keep these comments on your staging server if required)

Remove inline CSS and JS and make them external files (which can then be cached)

Use “lazy loading” where images are only loaded when the browser requests them as visitors scroll down a page (here are some examples)

3. Optimise Your Images

The most obvious way of speeding up your page performance is to improve the way your images are optimised. I’ve seen too many examples of content managed sites or blogs with huge uncompressed images uploaded to a page. If you’re uploading PNG or JPG files, compress them using your photo editing software. An 8-bit (rather than a 24-bit) PNG will often suffice; or if you’re using JPGs, reduce the quality of your JPG files to optimise file size. I tend to aim for 65/100.

The sexier thing to do is to use CSS sprites which is useful if you have lots of images on one page (which equates to many potentially time-consuming HTTP requests). With CSS-sprites, you download a “single image” and use CSS to hide and show a specific part of that image. Neat eh!

4. Use A Cookieless Domain

This one is a bit technical, but pretty cool. The concept is actually quite simple: don’t serve static content like images and stylesheets from a domain that sets cookies.

The trouble with cookies is that once the server sets a cookie for a particular domain, all subsequent HTTP requests for that domain must include the cookie. Even if the server has no use for the cookie, as is usually the case with static components, the cookie is sent anyway, which bloats our request headers with useless code.

For example you may have noticed that Google serves assets, such as images, from a domain called gstatic.com, rather than google.com, which relies heavily on cookies.

So, if you are serving large number of small files such as images, consider setting up a separate cookieless domain and serving them from that domain.

5. Consider A CDN (Content Delivery Network)

A content delivery network is one of the simplest ways to speed up your website load time. The concept is relatively simple. If your website is hosted in the UK and someone from the US visits it, the data has to travel thousands of miles before the requested page and its assets can load. But if that data was mirrored in the US, then the data is travelling a far shorter distance, hence improving page speed.

By using a CDN, you are mirroring your website locally thus reducing your page load times.

This is particularly useful and important if you have a large global audience accessing one website. This should become fairly obvious when looking at your Google Analytics page load times by country where you may well notice a lag by country.

6. Consider Your 3rd Party Services

The use of 3rd party services on web pages has become extremely common. These can include: social media sharing widgets, web analytics software, ad serving or conversion tracking code, embedded media (such as videos or documents), email sign up widgets, live chat widgets, the list goes on.

Whilst the code appears harmless enough, when added together, it will increase the size of your web page, and could slow down your page as the browser has to connect with multiple servers.

Furthermore, when a third party server fails or slows, you may well notice the delay on your website. If your web page hangs, not every user will consider hitting the refresh button.

Whilst many 3rd party services (such as analytics tracking code) are vital to integrate, it may be worth being frugal about piling on the services.

Thanks for a great blog post! I love the way you talk about the problems and solve them. It’s very clear. I only want to add some useful information to make the guide better.

When it comes to website speed optimization, i recommend you to use Cache extensions or plugins. For people using WordPress, the best one is W3 Total Cache. For those who have Magento e-commerce websites, Full Page Cache from http://bsscommerce.com is your must-use extension. I’ve tested many times and they both work perfectly on my real websites.

Mark Steiner

Jonathan, thanks for this article, especially the caching guide was particularly helpful to me. I was wondering if you knew about any other page speed services besides Google’s and Gtmetrix’s services. I googled for a while and the only 2 worthwhile I found were webpagetest.org and giftofspeed.com . Are there other good services or are we limited to a few?