Jonathan Saipe

How To Improve Your Page Speed For Better UX and SEO

6 May 2014, Jonathan Saipe


Cheetah

It’s probably not a surprise that our tolerance for slow page load times is pretty poor. We expect things to load in the blink of an eye – be on a desktop or mobile device.

Slow web pages do nothing to help the user experience. Kiss Metrics cited studies carried out by Akamai and Gomez demonstrating that nearly half of web users expect a site to load in 2 seconds or less; and they tend to abandon a website that hasn’t loaded within 3 seconds.

Slow load times are also not ideal from an SEO perspective. Back in 2010, Google wrote on its blog: “we’re including a new signal in our search ranking algorithms: site speed”. This was further corroborated by Matt Cutts.

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.

Google Analytics site speed map of world

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 site speed overview

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.

Google PageSpeed Insights

3. GT Metrix

GTmetrix is an absolute gem of a tool, combining Google’s Page Speed Insights and Yahoo’s YSlow, to grade your website’s load performance.

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!

GTmetrix page speed report

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.

Page load times 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.

  • Yuna Nguyen

    Hi Jonathan,

    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?

  • Hi Mark, I tend to stick to Google or GT Metrix to be honest although the ones you mentioned look interesting. Will add more if I come across any others.

  • Mark Steiner

    Thanks for your quick reply. Google and GTmetrix are indeed good enough.

  • Pingback: Google’s Accelerated Mobile Pages (AMP) Explained -()