THE SPEED OF LIGHT(HOUSE)
OPINION July 30, 2018
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!

Partnering with AWS for Cloud Solutions
News June 22, 2020
Jemma
Home From (the GC) Home
Opinion April 22, 2020
Jemma
MQTT vs HTTPS performance on AWS IoT Core
Opinion March 30, 2020
Zoltan
Do you want to create a smarter future for your business?
Get in touch for your free consultation.