How we work out how fast your page displays

Our measure of how fast your page displays is based on Speed Index. This can be thought of as the average time at which visible parts of the page are displayed.

Speed Index is worked out by looking at video frames of a page as it renders.

Each frame is given a score for visual incompleteness above the fold. So the score is 100 per cent for a blank screen and 0 per cent for a visually complete page.

The next step is to multiply that score by the number of milliseconds since the last frame (or since the beginning of the test if it’s the first frame).

The final step is very easy: add these numbers together. The total is your Speed Index score! In our test of your page, we’ve divided this number by 1,000 to give you a result in seconds rather than milliseconds.

Example

In this a simple example, we’ve reduced the number of frames for illustration purposes. In reality, we’d be examining ten frames per second.

The chart below shows how quickly the page in this example becomes visually complete.

speedindexgraph1.png

Frame 1 – 500 milliseconds

As you can see, the page is blank when the first frame is captured, at 500 milliseconds.

We multiply this time by how incomplete the page is at this point. Since this is a blank page, it’s 100 per cent incomplete.

500 x 100% = 500

Frame 2 – 1,000 milliseconds

Another 500 milliseconds pass, and we capture another frame.

There’s some content on the page now. Let’s say it’s 10 per cent visually complete. In other words, it’s 90 per cent incomplete.

500 x 90% = 450

Frame 3 – 1,500 milliseconds

In the next frame, after a further 500 milliseconds, the page is 50 per cent complete (and therefore 50 per cent incomplete too):

500 x 50% = 250

Frame 4 – 2,000 milliseconds

The page is virtually finished now, at 90 per cent complete (10 per cent incomplete):

500 x 10% = 50

Frame 5 – 2,500 milliseconds

By frame 5, the page is visually complete, so we don’t add anything to the overall score (500 x 0% = 0!).

Adding up the figures

Getting Speed Index is a simple matter of adding these figures together:

500 + 450 + 250 + 50 = 1,250

It’s also easy to see on the graph showing visual completeness over time. Speed Index is the area above this graph:

speedindexgraph2.png

Performance heatmaps

There was a time when performance was all about how long it took a page to finish loading. Now, although overall load times still matter, we’re increasingly interested in visual performance. That’s why metrics such as visually complete and Speed Index are now much more important.

The performance heatmap uses a red-amber-green overlay to show which parts of a page are slow or fast to render. This is useful because it allows you to check whether high-priority elements, such as your logo, main navigation and hero image are appearing quickly enough.

A more sophisticated version of the performance heatmap report is available in Performance Analyzer. This includes a slider that allows you to check whether different elements on a page are meeting key performance indicators (KPIs). For example, a page might have to deliver a hero image within a certain timeframe.

The impact of third-party content

It’s hard to find a website that doesn’t include at least a few objects from third-party domains.

There are very good reasons for this. Most of us use a third-party service for analytics or monitoring. And many retailers and publishers rely on remarketing or advertising services, very often from a wide range of third-party providers.

Generally, these services offer tremendous value, and they can be worth millions to the bigger sites.

But what happens when they go wrong?

For example, what if a third-party tag fails to load?

If it’s a blocking tag (which generally means a synchronously loaded script), the consequences can be disastrous for the host site. When a browser encounters the script, it stops building the web page while it waits for the file to load. If the third-party script can’t load for some reason, visitors may be left staring at a blank or partially built page for a very long time. Even asynchronously loaded tags can cause problems, particularly if they add extra content to the page.

Tag management solutions were developed to deal with some of these problems, but they don’t always address all of them. Sometimes, they can make matters worse.

Both Performance Analyzer, with its request mapping feature, and Monitoring Insights can help you understand the impact of third-party content on your website.

Performance best practice

A range of factors affect how fast your website loads and displays.

Here are a few pointers to help you optimize your website for performance:

  • Keep pages light – the less content on your page the faster it will load. Since image files are often very large, they are often a major cause of slow web pages.
  • Minimize styles – browsers need to load and parse CSS before they can start to display a page. Therefore, it’s a good idea to keep CSS as lean as possible. You could even inline styles for certain key landing pages.
  • Understand the impact of scripts – JavaScript can make your web page slow to display, especially if it’s loaded synchronously. JavaScript also takes longer to process on some mobile devices, so it’s important to test your site on a range of devices.
  • Avoid custom fonts – fonts inevitably slow down your page to some degree. However, if you really need custom fonts for branding purposes, there are a number of ways to minimize their impact, such as preloading and subsetting.

If you’d like to make your site faster, our experts can help you find and remove the most important performance bottlenecks.