How do I analyze Google PageSpeed insights?

Wondering if your website is fast enough? You ran Google PageSpeed Insights test and you got a low score but the stats displayed are a bit confusing? Then this article is for you. It will help you understand how to use the PageSpeed test and how to interpret the results.

Why is website page speed important?

Google wants to provide the best possible user experience to users. If your website is slow it will frustrate the users and create a bad user experience. It’s simple as that. Performance impacts experience.

Google also added website speed as a ranking factor to desktop in 2010 and for mobile in 2018.

What else happens when your website is slow? Unfortunately, it drives people away and you lose business. People will leave your website (bounce) without taking the actions you want them to take. They won’t subscribe, contact you, or make a purchase.

If a website takes more than 4 seconds to load, 25% of your visitors will leave!

The good news is that this is something that you have control over. Even if your website is performing poorly now, you can work on improving page speed to make users happier and achieve the conversions you’re after.

What is Google PageSpeed Insights?

It’s a free tool provided by Google that allows you to enter a web page URL and quickly run a test to check the various metrics related to performance.

The tool then gives your page a score ranging from 0 to 100 points (a higher score reflects better performance). Most importantly, it shows you the exact parameters that are slowing your page down as well as suggestions on how to make it better. This is where things get technical and the results a little difficult to understand.

How do you interpret the results?

The first thing you see after running a test is the performance score (desktop and mobile) for the analyzed page.

This will be a number between 0 and 100.

• 0 to 49 – This is bad, you don’t want your score to be 49 or under
• 50 to 89 – This is ok but room for improvement
• 90 to 100 – If you’re in this scale you’re in the good books.

As you scroll down you’ll see what is causing a high or low score:

Note: See color indicators before each section:

• Green means fast
• Orange means moderate
• Red means slow

This is what each of these sections means:

First Contentful Paint

This is the time it takes from navigation to a page from the browser to the time when the content starts to render. Basically, it’s an indicator that the page is starting to load. For example, it could be just a color change which is the background color of the page, an image displayed, or a piece of text. This is important because when a user sees some action they are more likely to wait around until the page is fully loaded. Guideline:

Time to interactive

This parameter shows how fast a page becomes interactive. This means a page showing sufficient elements on the screen so that users can actually interact with it e.g. click a menu button. At times, websites can focus on visibility i.e. getting everything displayed before you can interact with the content which may be frustrating to the user. Guideline:

Total Blocking Time

There’s a gap between the time your website visitor sees content on the screen and the time that they can interact with it. This is the total blocking time! It’s good to know if people can’t do things like mouse clicks, screen taps, or keyword presses before the website is interactive.

Long tasks are tasks that block you for more than 50ms. Anything over 50ms is considered blocking time. If there are no long tasks then you’ll see 0 blocking time which is what you see in the stats above.

Cumulative Layout Shift

A layout shift is when a visual element is displayed on the screen but then moves. So for example, you’re reading the news and there’s a layout shift so the location where the news article is has changed. This is unexpected behavior from a user’s perspective. The higher the score the worse it is.

Speed Index

This is a tricky one to understand but a valuable one. Imagine 2 websites that both loaded in 1.5 seconds.

If you browsed the 2 websites shown in the above image, which one would load faster? Both fully loaded in 1.5 seconds but because the first site started showing some elements earlier on, it appeared to be faster to the user. If you just measure the time to load they are the same. The speed index is a calculated score based on how ‘fast’ a website fully loads.

A video recording of the load is used to show visually when bits are loaded. At various intervals, the amount of content visible on the screen (above the fold) is compared to the content displayed on a fully loaded website to work out the percentage of the content displayed for that particular time. This process is repeated a few times.

The time is only based on what the user can see on the screen (the viewport). It does not matter what is below the fold. So, it’s good to try with different viewports. If you have 2 websites and one shows visual elements before the other it will end up with a lower speed index score. The lower the better.

Largest Contentful paint

This is the time it takes for the largest element of the page to fully render. As the page loads the first element becomes the largest element but this is replaced as larger elements are added. The last element of a page could be the largest element of the page (e.g. a large image) or may not be. Note: we’re not talking about how much space it takes up on the screen. Here are 2 examples.

The time from when the website started to display to the time the last image on the page was displayed would be considered the largest contentful paint. This is because the image takes up the most real estate on the page!

But…

In the case below the ‘Instagram’ image was the largest image displayed so the largest contentful paint is when the second last screen was loaded. The last screen is discounted. All that was added to that screen was the ‘Google play button’ which was a smaller image than the ‘Instagram’ one.

According to Google, if you want to provide a good user experience LCP should happen within 2.5 seconds of when the page first starts loading. Guideline:

Opportunities

The Opportunities section shows you the suggestions that could help improve page loading time. Each suggestion also shows you an estimated reduction in load time for the page if you implemented the recommendation.

Diagnostics

Diagnostics highlights best practices in web development that you should consider implementing. However, even if you make these improvements they won’t directly impact your page Performance score.

Summary

Improving your website speed is all about providing visitors with a better experience. Having a site that loads quickly makes both users and search engines happier, but it also impacts your ability to convert visitors into customers.

A tool like Google PageSpeed Insights is incredibly useful because it shows you where to start and which issues to focus on to boost your website performance.

Hopefully, this article helped you understand how this tool works and what the test results actually mean so you can start optimizing your web pages to create an amazing experience for your visitors.