As Google is going to give a ranking boost to websites that are fast you are probably keen to understand more about Google PageSpeed insights?
…And I’m not surprised because it’s confusing!
This article will help.
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 recently announced that the core web vitals will be used as part of their ranking algorithm in 2021. These core web vitals are indicators of speed and how quickly people can interact with your page.
Basically for this table below you can’t be ‘red’
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. The score is not really about speed. You can an improved score if you’ve used the typical recommendations from Google about improving speed.
It also 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 colour indicators before each section.
- Green means fast
- Orange means moderate
- Red means slow
This is what each of these sections mean:
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 colour change which is the background colour 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 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 click, 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.
So 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.
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 content displayed on a fully loaded website to work out the percentage of content displayed for that particular time.
This process is repeated a few times.
The time is only based on what the user can seen 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 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!
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 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 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.