How to Use Google’s Speed Index to Improve WordPress Performance

Does your site load content steadily like the tortoise, or wait until the race is almost over before it kicks into high gear, like the hare? In the race to provide the best user experience, steady is best. That’s why Google PageSpeed Insights measures your WordPress Speed Index to determine how your site content loads over time.

The Speed Index can tell you if you’re providing enough visual feedback as your site loads. It’s an important metric for understanding what your visitors are experiencing.

In this post, I’ll show you how Speed Index is calculated, how to run a WordPress Speed Index test in Chrome, and tell you what you should be aiming for. Then, we’ll cover some techniques you can use to improve your Speed Index. Here are the questions that we’re going to answer:

• What is Speed Index in Lighthouse?
• How to Get the Speed Index in Google Chrome?
• What Is an Ideal Speed Index Score?
• How to Improve WordPress Speed Index Score?
• What Are the Speed Index Limitations?
• How to Improve Speed Index Using a WordPress Plugin?

What is Speed Index in Lighthouse?

Lighthouse is the open source tool Google PageSpeed Insights utilizes to analyze a webpage.

Lighthouse grades your webpage on the following criteria:

• Is it being served from a secure location?
• Is it accessible for all users?
• Are visitors who are on unreliable network connection (like those on mobile) able to reach it?
• Do users perceive your site as fast?

It’s in Google’s best interest to prioritize high-quality sites in search rankings in order to provide the best user experience. Speed Index is one metric used to assess how fast your site feels for users, in a way that captures how your site actually performs in real life.

How Google Speed Index is Measured?

Here’s how Speed Index is defined in the Lighthouse documentation:

Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated.

Could that be any more vague? That doesn’t tell us a whole lot about how this information is captured so we could improve our scores, so I had to go to the source.

WebPagetest.org, in partnership with Google, introduced the Speed Index metric to their test in April 2012 and they fully break down how the Speed Index calculations work. Lighthouse uses a node module called Speedline whose current implementation is based on the Visual Progress from Video Capture method that was introduced by WebPagetest.org.

Even though it’s measured in milliseconds, Speed Index isn’t measured with a stopwatch like first paint; it’s calculated using a cumulative distribution function of a log-normal distribution. I know, huh?

Here’s how it works, when you perform a Google PageSpeed Insights audit, Lighthouse records a video of your web page loading. It only includes everything above the fold, which is why Speed Index will vary based on the viewport you’ve set for your test.

The video is how Lighthouse is able to “see” your site. It then breaks down the whole little video into frames. There are 10 frames per second. So if your site loads in 3 seconds, then there will be 30 frames, showing your site’s progress.

Lighthouse compares each frame to the final frame to determine how complete it is. Is it 5% loaded? 10%? 20%? 30%? etc.

Then it plots the completeness of your page on the y-axis and elapsed time on the x-axis so it can determine the average. The overall score is the sum of the individual intervals. The graph for the frames above would look something like this, with the blue area representing the Speed Index.

There is also the Visual Progress from Paint Events method for determining Speed Index WebKit browsers, that does not require capturing video and instead relies on collecting the timeline data such as paint events and other useful events. This isn’t supported on all browsers so it varies and isn’t as widely used so we won’t get into it in detail here.

How to Get the Speed Index in Google Chrome?

Now that you know how the Speed Index is being calculated, you should take the time to run your most popular pages through Google PageSpeed Insights.

If you’d like to do this directly in Google Chrome, hit Ctrl+Shift+i or right-click in the browser window and select Inspect

Go to the Audits tab. From there you’ll be able to select what kind of audit you want to run a test for mobile or desktop. Select the Performance checkbox to get the Speed Index, then push the blue Run Audits button to begin.

What Is an Ideal Speed Index Score?

Alright, so you’ve run your tests, but what’s a good score?

According to Paul Irish, who works on the Google Chrome team, the ideal Speed Index is less than 1000ms, which is equivalent to 1 second.

In order to improve, you need to get your Speed Index score as low as possible.

In March 2018, the NCC Group analyzed the home pages of 50 retailers in the UK and found that the average Speed Index score was between 3500-8000 ms. Dareboost did a similar analysis on European publishers and less than 5% of sites had a Speed Index score that was less than 1000 ms.

With that said, reducing your Speed Index to less than a second isn’t always feasible. In these cases, the best approach is simply to outperform your competitors.

We wrote a guide on how to get a 100 in Google PageSpeed Insights.

How to Improve WordPress Speed Index Score?

Improving the Speed Index is a matter of improving the actual performance as well as the perceived performance of your site.

You can optimize performance by:

• Optimizing Content Efficiency
• Optimizing the Critical Rendering Path

To improve perception, there’s a wide variety of progressive loading techniques you can use.

Remove Unused Assets

The most effective way to improve both performance and perception is by eliminating unnecessary site assets. Your site gets cluttered too! Images, JavaScript files, CSS, etc. that don’t add a lot of value or are no longer being used, should be cut loose. You should repeat this process periodically, especially when you add new elements to your site.

Also, measure the value that new components add to your site. If that new resource-intensive image slider, video background or third font isn’t converting visitors then get rid of it.

Need help convincing your clients to omit page elements? Run this mobile PageSpeed test. On the results page, scroll down to the bottom, and open the Evaluate the impact of a faster site section. The calculator will help you show how increasing site speed can improve annual revenue.

Use predefined heights and placeholders

Loading a framework for the rest of your content gives your user the impression that the site is loading in an organized and intentional way.

To create a framework, create a space for elements of your site that take longer to load, such as images and videos. You can do this by setting pre-defined heights for your containing elements in CSS, or loading placeholder images or icons.

Not only does this let the visitor know that more content is coming, so they can decide if they’d like to wait, but this prevents the site contents from shifting erratically as more elements fall into place.

Optimize Your Images

Images are one of the worst offenders when it comes to adding unnecessary weight to your webpages. The best way to cut down on page weight is by eliminating unnecessary images, then optimize what’s left by doing the following:

• Lazy loading images that are below the fold
• Using progressive images
• Using more efficient next-gen image file formats
• Resizing images that are too large for their container
• Compressing your images
• Use the right file type, for instance by replacing animated GIFs with video

A quick and easy way to optimize your images is by using a plugin like Smush Pro. Try Smush Pro free.

Optimize Stylesheets, Scripts, and Fonts

When a browser is building your page, when it comes across a CSS file or a JavaScript file, it needs to execute those files before it continues to render the page. That’s why CSS and JavaScript files that reside in the head of your page are referred to as render-blocking resources. Since they’re blocking the rendering of your content, you must optimize them so they take the least time possible to load.

Fonts also add a lot of weight to webpages, since each font is an additional resource that the browser needs to spend time downloading. Some fonts may block the rendering of the page. By default, fonts don’t begin downloading until the DOM and CSSOM are constructed, which can result in delayed text rendering.

Here’s how to optimize the additional assets needed to build your page:

1. As I said earlier, the best way to optimize something is to flat-out delete it. Cut the weight and move on. For webfonts, reduce the number of font variants, so instead of three different bold weights, maybe use one or none if you can get by without it.
2. Don’t load one huge JavaScript file. Use code splitting to break up your file and load the scripts that aren’t critical to the rendering of the DOM to the bottom of your page.
3. Compress and minify your files so they take less time to download.

Want an easy all-in-one solution that was designed to help you improve your Google PageSpeed Insights score? Hummingbird can help.

Optimize the Critical Rendering Path

The critical rendering path refers to all of the assets the browser needs to render to respond to the visitor’s current request. You want to prioritize the assets above the fold that are most important right now and load them as quickly as possible.

This requires that you analyze the components in the critical rendering path and look for ways to improve, consolidate and organize the whole load. Think of it like running errands. If you map out your route ahead of time, you can get more done in less time than if you were zipping all over town doing things as you thought of them. The haphazard way will burn through resources running back and forth.

Here’s how Google recommends you optimize the critical rendering path:

• Analyze and characterize the elements in your critical path.
• Minimize number of critical resources. If you can, eliminate them. For the rest, defer their download or load them asynchronously.
• Optimize the size of assets by compressing or minifying to reduce the download time.
• Download all critical assets as soon as possible to shorten the critical path length.

 Utilize Caching

Once you have your new optimized page done, then you’re ready to utilize page caching.

Caching is a reliable way to improve site speed for your visitors by storing assets in a cache for faster retrieval. There are several kinds of caches.

With HTTP caching, the browser stores a copy of assets downloaded via HTTP by the user in its cache so it will be able to retrieve them without making an additional trip to the server. This dramatically improves performance for repeat visitors when done properly.

We recently compared Hummingbird to other popular caching plugins and Hummingbird out optimized all of them.

You should also use intermediary caches such as content delivery networks, or CDNs to serve assets from a closer data center to the user.

What Are the Speed Index Limitations?

While Speed Index is better than timeline based metrics for helping us measure user experience, it’s not perfect.

If your site has movement, then the Speed Index won’t be accurate.

Here are some moving elements that might affect your score:

• Videos that autoplay
• Carousels
• GIFs

Additionally, if you do not create placeholders for the elements on your site and the contents of your page shift as the content loads, this layout instability will also return an inaccurate Speed Index.

Still, Speed Index is one of the best tools we have at the moment, so even with these limitations, it’s still useful. Used in combination with the other metrics provided in Google PageSpeed Insights, Speed Index helps you get a complete overview of what you need to work on to improve your site for your visitors.

How to Improve Speed Index Using a WordPress Plugin?

WordPress performance plugins have come a long way. You no longer need to use a set of different plugins to improve every aspect of your site’s performance. You can use an all-in-one plugin like Hummingbird, which was designed to help you pass all the audits in Google PageSpeed Insights.

We designed Hummingbird not only to help you increase your Speed Index score positively but to truly help you deliver a better user experience for your peeps. Combine Hummingbird with Smush to get the most of the WordPress speed optimization service WPMU DEV offers.

I don't know about you, but Speed Index was not what I thought it was. Do you have any tips for improving page speed?

Tags:

• Google PageSpeed Insights