Wondering if your website is fast enough?
You took the Google Page Speed Insights test and got a low score, but the stats shown are a little 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 web page speed important?
Google wants to provide the best user experience possible for users.
If your website is slow, it will frustrate users and create a bad user experience. It’s that simple. Performance influences experience.
Google also added website speed as a ranking factor on computer in 2010 and for mobile in 2018.
What else happens when your website is slow?
Unfortunately, that drives people away and you lose business.
People will leave your website (bounce back) without taking the actions you want them to take. They will not 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?
It is something that you control.
Even if your website is currently performing poorly, you can improve page speed to make users happier and get the conversions you are looking for.
What is Google PageSpeed Insights?
It is a free tool provided by Google that allows you to type in a web page URL and quickly run a test to check various performance related metrics.
The tool then assigns your page a score ranging from 0 to 100 points (a higher score reflects better performance).
Most importantly, it shows you the exact settings that are slowing down your page as well as suggestions on how to improve it.
This is where things get technical and the results a little hard to understand.
How do you interpret the results?
The first thing you see after running a test is the performance score (desktop and mobile) of the crawled page.
It will be a number between 0 and 100.
- 0 to 49 – This is bad, you don’t want your score to be 49 or less
- 50 to 89 – Correct but there is room for improvement
- 90 to 100 – If you are on this scale, you are in the right books.
As you scroll down, you’ll see what causes a high or low score:
Note: See the color indicators before each section:
- Green means fast
- Orange means moderate
- Red means slow
Here’s what each of those sections means:
First ContentFul Paint
This is the time it takes between navigating to a browser page and when the content begins to display.
Basically it’s an indicator that the page is starting to load.
For example, it might just be a color change which is the background color of the page, a displayed image, or a piece of text.
This is important because when a user sees an action, they are more likely to wait for the page to fully load.
This setting shows how quickly a page becomes interactive.
This means a page showing enough elements on the screen for users to actually interact with it, for example, clicking a menu button.
Sometimes websites can focus on visibility i.e. showing everything before they can interact with the content, which can be frustrating for the user.
Total blocking time
There is a lag between when your website visitor sees the content on screen and when 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 50 ms.
Anything over 50ms is considered blocking time.
If there are no long tasks, you will see 0 blocking times, which you see in the statistics above.
Cumulative offset of the layout
A change in layout occurs when a visual element is displayed on the screen but then moves.
So for example, you read the news and there is a layout change so that the location where the news article is has changed.
This is unexpected behavior from the user’s perspective.
The higher the score, the worse it is.
It is a difficult question to understand but a precious one.
So imagine 2 websites that both loaded in 1.5 seconds.
If you browsed the 2 websites shown in the image above, which one would load fastest?
Both fully load in 1.5 seconds, but since the first site started showing some items earlier, it seems to be faster for the user.
If you just measure the charging time, they are the same.
The Speed Index is a score calculated based on how quickly a website loads completely.
A video recording of the charge is used to visually show when the bits are being charged.
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 calculate the percentage of content displayed for that particular time.
This process is repeated several times.
The time is only based on what the user can see on the screen (window). It doesn’t matter what is under the fold.
So… it’s good to try with different windows.
If you have 2 websites and one shows visuals before the other, it will get a lower Speed Index score.
The lower the better.
The Greatest Contentful Painting
This is the time it takes to render the largest element on the page completely.
As the page loads, the first element becomes the largest element, but it is replaced when larger elements are added.
The last element on a page may or may not be the largest element on the page (such as a large image).
Note: we are not talking about the space it takes up on the screen.
Here are 2 examples.
The time between when the website first started displaying and when the last image of the page was displayed would be considered the greatest painting of content. This is because the image takes up the most space on the page!
In the case below, the « Instagram » image was the largest image displayed, so the largest content painting is that of the penultimate screen loading.
The last screen is refreshed. All that was added to this 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 occur within 2.5 seconds of starting the page load.
The Opportunities section gives you suggestions that can improve page load times.
Each suggestion also shows you an estimated reduction in page load time if you have implemented the recommendation.
Diagnostics highlights the best web development practices that you should consider implementing.
However, even if you make these improvements, they won’t have a direct impact on your page’s performance score.
Improving the speed of your website is all about giving visitors a better experience. Having a site that loads quickly makes 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 what issues to focus on to improve your website’s performance.
Hope this article has helped you understand how this tool works and what the test results really mean so that you can start optimizing your web pages to create an amazing experience for your visitors.
Similar Items You May Also Like …