The speed of light(house)

Published on 31 Jul, 2018 by Jemma

The objective of our brand-new website was to build it embracing Progressive Web App principles to get the best possible experience for users. We also strived to get a high score on

Google Lighthouse

– a tool for measuring the quality of websites.

To achieve both of these, we needed to address a key factor during development: Web Performance (site speed).

The facts

It’s widely reported that the load time of a website is paramount. It improves the user experience, makes the Google gods smile (especially in light of their

Speed Update

which went into effect this month), and in turn your business reaps the rewards.

This is backed up by the latest stats James learnt whilst at Google I/O 2018:

  • Bounce rate increases 53% if a web page takes longer than 5 seconds to load
  • 79% of shoppers who have performance problems don’t return to a site
  • Conversion rates drop 7% for every 1 second delay in load time

Real-world examples really bring the point home too:

  • BBC has seen a loss of 10% of their users for every extra second of page load
  • Walmart saw a 1% increase in revenue for every 100ms improvement in page load
  • Rebuilding Pinterest pages for performance increased conversion rates by 15%

[Source: WPO Stats]

So, what can be done to create a super-speedy site?

In practice a user wants to get to something that resembles the web page as quickly as possible, so they can click on it. Seeing something on the screen that resembles the web page is known as the First Meaningful Paint or First Contentful Paint. The time taken to get to the point where you can click is known as the Time to Interactivity. These can be measured automatically through Google Lighthouse, and engineers can then work on reducing and optimising the times.

There are many techniques that can be employed to bring the times down, a few examples of those we used are:

  • High resolution images use more data, and take longer to load. So we use a low resolution placeholder which can be quickly loaded, while the full quality image is loaded over time.
  • Our pages don’t load images until the user moves to them by scrolling down. If they navigate away before scrolling, the images don’t even have to load.
  • Once a page is loaded, our website begins loading data for other pages in advance, in anticipation of the user clicking and navigating to them.
  • Finally, we compressed everything to minimise the size of data transferred for a given page.

Of course, Lighthouse rules and measurements change over time, so it’s important to constantly monitor your website’s performance and always look for ways to improve (look out for future blog posts).

On a global scale

Measuring the performance on your own computer is one thing, and it goes without saying that bringing down the times is a good thing to do; but users across the globe all have differing internet connections, so how do you find out what they are experiencing?

Google provides another tool for this called 

PageSpeed Insights

. This tool takes anonymous statistics from browsers of real users visiting your site, and tells you about their real-world experience. For example,

here is what users experience

when they visit the BBC.

So with these helpful tools you can quantify the improvements you make and create a better user experience. Be sure to test your website against them, but first, now you are here, take a look around ours and see just how fast it is!


Back to the list