Page Load is not a success metric

When looking at page load times you tend to be looking at when a page is fully loaded. However, it is increasingly common that users will be interacting with pages before 50% has even loaded. This is a result of the fact that, today, it’s rare to see pages that take longer than 10 seconds to fully load.

Is this a bad thing? Not necessarily. We just need to ensure that page resources are loaded at the same pace as user interaction.

For example, let’s imagine that in an attempt to reduce your overall page load time, you’ve frontloaded the execution of your JavaScript and the display of the visual resources of your page. PageSpeed Scores are high and page load time is low. However, you’ve still ended up with a slow FMP (First Meaningful Paint) and a long TTI (Time to Interactive). Why? Because you’re only focusing on those metrics and are not looking at what is happening during your page load.

The page load is made up of three key stages (the naming conventions can vary but the idea stays the same):

  1. FP (First paint) – First pixel displayed
  2. FMP (First Meaningful Paint) – The moment that the user starts seeing what the page is about but can’t yet interact
  3. TTI (Time to Interactive) – This part is crucial: it is the moment that the user can interact with your page

In our last article on site speed, we discussed the fact that metrics have little relevance without context. PageSpeed Scores and PageSpeed API are great tools that help many SEO teams improve their sites. However, it is crucial that we start looking beyond these metrics.

 

PageSpeed Scores and Impact Scores

PageSpeed Scores are still widely used to audit websites. At ROAST, we still use the API to create sitewide audits of client websites to ensure that they are as fast as they possibly can be. Our ROAST Labs have created a propriety tool to ensure that we can meet client expectations of accurate site speed audits for full websites. See below:

 

Impact Scores are also an essential part of knowing what to optimise on a page: these scores help us to identify the areas in which we can most easily gain more value. This is how we determine what areas to optimise:

Whilst these metrics are the backbone of site speed audits, they don’t provide the full story of what is happening when a page is loaded. For instance, let’s say you optimise your images but have JavaScript loading for five or six seconds before a single image loads.  Although you’ll see an improvement in your PageSpeed Scores, there will be no improvement in your usability; from a user’s perspective, there’s no difference.

 

Understanding Page Load

As an example, we are going to use a travel site that has recently attempted to improve page speed and page performance. (Note: the numbers can differ slightly, depending on when the test was made.)

Below is a timeline of everything that happened during the load of the travel site’s homepage (on a desktop with Core i7 processor).

The FMP happened during the 500ms mark whilst the TTI occurred around 1,600ms. The overall page load is circular to 2,600ms which is within the 3,000ms.

 

Remember what we discussed in our last article: we talked briefly about the statistics provided by the Google ChromeDev Summit 2016 (10/11/2016). 53% of users abandon sites that take longer than three seconds to load. For our travel site, we’ve achieved a complete page load within three seconds. However, this is extremely rare and what we actually need to aim for is a TTI within three seconds rather than a full load. As long as the user is able to see and interact with a page, they won’t leave the site.

 

 

It’s important to note that if we conduct the same test on mobile (with the runtime environment below), we see different results.

Although the FMP happens at around 1,400ms, it will take another 1,500ms until the user can see, process and interact with the page. In this example, the TTI is about 5,000ms on a Nexus 5X with a 1.4Mbps connection. On modern devices with a better 4G+ connection, the TTI will be between 3,000ms and 5,000ms.

 

 

(Note: whilst we tend to look at powerful devices with highspeed networks, we mustn’t overlook other phone models. Remember that not everyone runs on Pixel 2s or iPhone 8s.)

To summarise, a long page load doesn’t necessarily mean your site will automatically have bad usability. What you need to ensure is that the page load matches the pace of your user’s actions. Your user won’t notice the difference if you have a page load of 10,000ms but your FMP is about 1,500ms and your TTI 3,000ms. This is what we need to focus on – making sure that we can deliver the right resources at the right time.

 

A fast FMP and long TTI is definitely not what you want; the user tends to get frustrated at not being able to interact. A long FMP means the user can’t see anything and will immediately bounce back. You need to ensure that your FMP is followed closely by TTI.

How to expand Site Speed Audits using Lighthouse:

Lighthouse is an open-source, automated tool for improving the quality of web pages. It can be used via your browser for single page audits or you can use the API to have a better handle of the data provided. Our ROAST Labs are already looking to upgrade our Site Speed tool to include all of these new metrics so we can provide even more insightful site audits.

All the impact metrics provided by Google’s Site Speed Tool will only improve the PageSpeed Score to a certain extent. It is now crucial to use these metrics alongside the four new metrics provided by Lighthouse:

  1. First meaningful paint (measures when the primary content of a page becomes visible)
  2. First interactive (marks the time at which the page is minimally interactive)
  3. Consistently interactive (marks the time at which the page is fully interactive)
  4. Perceptual speed index (shows how quickly the contents of a page is visibly populated. This index is a weighted average of all the metrics above)

Using Perceptual Speed Index alongside PageSpeed Score will give us a better idea of how pages are performing and how we can optimise this.

Findings and the future

This integration of new metrics is particularly important today. In June this year, Google announced that they were rewriting their page speed algorithm. This means that optimising pages for mobile devices should be at the top your priority list; it’s imperative that we look at new metrics to improve the accuracy of our measurements. In the future, these new metrics will provide better background context and therefore a better understanding of page performance.