Speed Index


The speed index is a metric used by Google to measure the speed of a website. It shows how much time it takes for the visible parts of a page to be displayed. The Speed Index is used in tools such as Google Page Speed Insights or Lighthouse.

Background

Measuring the page speed of websites is a central factor in determining the quality of websites, and whether they have a good user experience. Page speed used to be calculated on the basis of performance timings. Tools for measuring website speed measured the time taken for the website to load the main document. Whilst this method is simple and accurate in determining a website’s loading time, it is insufficient for determining the user experience as it does not take into account the time taken before a web page is fully usable. As modern websites often load a large number of elements, there is a clear difference between the actual loading time and the time until the page is fully usable. That’s why the speed index was added to WebPagetest in 2012.

The speed index measures how quickly page content becomes visible to users, improving UX. it can be used to facilitate comparisons with competitors' websites, and enable objective comparison before and after OnPage optimization. The speed index is included in page-speed testing tools such as Lighthouse, and helps to create a holistic picture of a website along with other metrics such as load time or time to first byte. 

Calculation of the Speed Index

The Speed Index takes into account the entire process of the page loading. The earlier content elements are loaded and therefore visible to users, the better. The Speed Index is based on three elements; the IntervalScore, the Interval, and the Completeness.

  • IntervalScore: This figure shows the percentage to which a page was loaded at a certain point in time.
  • Interval: This indicates the intervals at which the IntervalScore is measured.
  • Completeness: This shows what percentage of a web page is displayed by a browser or other client within the defined interval.

The IntervalScore is specified in seconds and is determined as follows:

IntervalScore = Intervall * (1-(Completeness/100))

The Speed Index uses all interval scores that are determined within an interval of 0.1 seconds. It is specified in seconds. Basically, the lower the speed index, the faster the page can be used by a user.

Measuring of completeness

Completeness for the Speed Index can also be seen as visual progress. Therefore, the completeness of the loaded page is measured using video frames. A PageSpeed tool records a small video of the loading web page using the Speedline module.[1] A frame is then recorded at fixed intervals. The tool compares the frame of the completely loaded page with the frame at the beginning. The comparison results in the so-called baseline.

The common method is to determine the pixels added per interval in relation to the fully loaded page. However, this method does not take into account whether the elements can then already be used by a user, therefore a different method is used to measure the speed index.

A color histogram for green, red and blue is created for each interval. The tool then determines the difference between the histogram at the beginning and at the time of the respective measurement interval.

Disadvantages

Measuring the speed index has advantages over other methods of measuring the load time, which are based on pixels or milestones. However, the measurement does not work so well when videos are on websites or when slideshows are integrated. In addition, the speed index can only be determined if the integrated module can record video frames at all.

Benefits for SEO

Loading time of websites is an important metric for search engine optimization. The faster a website provides content, the lower the risk that users will leave the site quickly. Since 2018, Google has officially taken Page Speed into account as a ranking factor in mobile search.[2] All website operators should therefore aim to have faster websites.

The Speed Index not only determines how quickly a website loads, but also when the content is completely visible in the browser and can therefore be used by the user.

References

  1. Speedline github.com Accessed on July 2, 2019
  2. Using page speed in mobile search ranking webmasters.googleblog.com Accessed on July 2, 2019.

Web Links