In this article, we will look at how the Speed Index is calculated. As well as how to measure it in a Chrome browser.
What is Lighthouse Speed Index?
Lighthouse is an open-source tool that Google PageSpeed Insights uses to analyze the loading speed of a web page.
Lighthouse evaluates a webpage by the following criteria:
- Source Security.
- Accessibility of the page for users.
- Site availability for users with an unreliable internet connection.
- User assessment of the speed of the site.
The speed index is one of the indicators for assessing the speed of a site. It reflects the performance of the site in real conditions.
How Google measures the speed index
The official Lighthouse Speed Index defines Speed Index as a metric of web page load performance. It shows how quickly the contents of a web page are displayed visually.
In April 2012, WebPagetest.org and Google introduced the Speed Index metric. The search engine described in detail how the speed index is calculated.
Here’s how it works: when you check a web page using Google PageSpeed Insights, the Lighthouse service records the video of the page loading. The speed index value will vary depending on the viewing area that you set for the test.
Lighthouse breaks the video into frames: 10 frames per second. For example, if your site loads in 3 seconds, you will get 20 frames demonstrating the loading process.
To determine how complete the page is loading, Lighthouse compares each frame with the final one. He then puts the completeness of the page load on the Y-axis and the duration of the load on the X to determine the average. The total score is the sum of the individual intervals. The area of the graph highlighted in blue represents the speed index.
Also, the Visual Progress method from Paint is used to determine the speed index. It is used to determine the index in browsers created based on the WebKit engine. It does not use video upload recording. The metric is calculated based on the timeline data on the drawing events. Not all browsers support this method, so it is not so widespread.
How to measure speed index in Google Chrome
To do this, press the key combination Ctrl + Shift + i. Then go to the “Audits” tab, select the “Performance” checkbox and click on the “Run Audits” button.
What indicator of the Google speed index should you strive for?
We measured web page speed index. But which result is good?
According to Paul Irish of the Google Chrome development team, the ideal speed index should be less than 1000 ms, which is equivalent to 1 second. It turns out that it is necessary to achieve the lowest possible estimate of the speed index.
How to improve Google speed index in WordPress?
WordPress Speed Index can be improved as follows:
- Optimize content.
- Optimize the critical rendering path.
To improve the perception of content, you can use various techniques of progressive loading.
If this does not increase conversion, get rid of it.
To find out how higher loading speed affects site profitability, take the test for PageSpeed mobile platforms. On the results page, go to the “Evaluate the impact of a faster site” section. A built-in calculator will show how higher the site speed can increase annual revenue.
Use specific block heights and placeholder images
To quickly provide the user with an important piece of content, leave space on the page for items that take a long time to load (images and videos). To do this, use CSS to set the blocks to a specific height or preload the placeholder images.
The best way to reduce the weight of a web page is to get rid of excess images. And after that, optimize the remaining graphic content with the following methods:
- Apply delayed image loading after the first screen appears
- Using more efficient image formats.
- Resize images that are too large for their container.
- Image Compression
Optimize style sheets, scripts and fonts
In addition, each font is a resource for which the browser takes extra time to download. By default, font loading does not start until the DOM and CSSOM models are created. Which can also lead to a delay in rendering text.
Ways to optimize additional web page resources:
- Removal. For example, reduce the number of font options available.
- Compress your files so that they load faster.
Optimize your critical rendering path
The critical rendering path is a list of resources that the browser needs to display the answer to the user’s current question.
You need to analyze the components in the critical rendering path and look for ways to optimize the load. Here’s what Google recommends about this :
- Analyze the elements of the critical path.
- Minimize the number of important resources. Postpone loading minor items.
- Download all important resources as quickly as possible to reduce the critical path length.
Using HTTP caching, the browser saves a copy of the resources downloaded by the user via HTTP. This allows you to retrieve them without re-accessing the server.
You should also use an intermediate cache. For example, a content delivery network (CDN) cache is ideal for loading resources from a data centre closest to a user.
Speed Index Limitations
If your site has dynamic elements, the speed index measurements will be inaccurate. Below are the elements that affect the speed indicator:
- Autoplay video.
- GIF files.
The speed index, when used in conjunction with other Google PageSpeed Insights metrics, gives you a complete understanding of how to optimize your site.
How to Improve Google Speed Index with WordPress Plugin
wpmudev has developed the Hummingbird plugin to help you increase your speed index. It also allows you to improve the user experience for visitors to your site.