How to use the Google Speed ​​Index to improve WordPress Productivity

Written by Suresh Kalyanasundaram

06/02/2020

reach your audience
Google Speed Index to improve WordPress Productivity

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.

WebPageTest

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.

The area above the axis 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.

WP MU DEV

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.

The most effective way to improve site performance is to remove unnecessary resources. For example, unused images, JavaScript, CSS files, etc.

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.

Pretty convincing numbers, right

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.

Optimize 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

The CSS and JavaScript files that are connected at the top of the layout of the web page slow down it’s loading. Therefore, they should be optimized.

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:

  1. Removal. For example, reduce the number of font options available.
  2. Do not upload one large javascript file. Use code separators to split the file and load scripts that are not important for DOM rendering at the bottom of the web page.
  3. 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.

Use caching

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.
  • Carousels.
  • 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.

 

Liked the article? Share it with your friends!