What is Google Page Speed Insights?
"Google Page Speed Insights" is one of the free tools provided by Google, which allows you to check the page load speed.
In Page Speed Insights, you can check the performance report on the display of each PC and mobile device of the entered URL, and how to improve the page from the result.
Since June 2021, it's mobile only, but it's officially announced that core web vitals (page load speed) will be evaluated.I think there are many SEO personnel who are focusing on improving the reading speed.
Please refer to past articles for core web vitals.
This time, let's focus on the "lab data" that appears when the results of Page Speed Insights are displayed.
I will explain it in an easy-to-understand manner as much as possible, but when it comes to the theme of page loading speed
no matter what"Complex theme"・"It's easy to get into a very technical story."I would like you to read it on the premise of that.
Also, I want to avoid the content shifting when trying to chew, so I will do my best in a well-balanced manner.
What is lab data?
- First Contentful Paint
- Time to Interactive
- Speed Index
- Total Blocking Time
- Largest Contentful Paint
- Cumulative Layout Shift
It is displayed by 6 elements of, and each numerical value is
- 0-49 red bad
- 50-89 Yellow Needs improvement, should be improved
- 90-100 green in good condition
It will be displayed in different colors from the three colors. If all 6 places are green, it means that it is in good condition.
First, I will explain the meaning and explanation of each item.
If you understand the items, it will be easier to understand what is wrong and what is wrong.
If you write out the countermeasures one by one for each of the six items, the contents will become more complicated.I will tell you how to handle each in the latter half.
(Because there are many methods that should be prioritized and dealt with in common)
What is First Contentful Paint?
You can jump to the Google support page for each of the 6 items, so let's take a look there.
* It is translated into Japanese using the translation function of Chrome.
There are so many terms that it's hard to think of it as soon as you see it.
“FCP measures how long it takes the browser to render the first piece of DOM content after the user navigates to the page.”
Let's dig a little deeper into each.
Think of it as a relay point for page loading.
Rendering is to create the content to be displayed based on some data.
To explain based on this, what is FCP?The time when the data loading process that occurs first when the user visits the page startsDoes that mean?
The content could be a menu bar or a header.
What is Time to Interactive?
Let's take a look at the support page as well.
“TTI measures the time it takes for a page to become fully interactive. The page is considered fully interactive if:”
This seems to be understandable somehow. What is worrisome is "interactive".
If you refer to the page that explains "interactive" as it is, it will be translated as "dialogue" or "interactivity".
It seems to express how the user inputs images and voice messages from the personal computer with a keyboard etc. and proceeds with the operation.
As a general image,
"Time to display web page content and be ready to process user input"is.
What is Speed Index?
“The speed index measures the speed at which content is visually displayed while the page is loading.”
... apparently ...
As for this item,The speed at which content is visualized while the page is loading"about it.
What is Total Blocking Time?
First, go to the support page.
“TBT measures the total time that responses to user input such as mouse clicks, screen taps, and keyboard hits are blocked.”
To put it simply, a block is a "waiting time".
in short,"Total wait time from user action such as click to response"about it.
Strictly speaking, it refers to the total of the blocked parts of a long task exceeding 50 milliseconds between "FCP" and "TTI".
What is Largest Contentful Paint?
Among the six items, it is a big element along with "CLS" which will be introduced later.
“LCP measures when the largest content element in the viewport is rendered on the screen.”
The word "maximum content" is difficult to interpret, but it often focuses primarily on the main videos and images on that page.
If the image or video is not used in the article etc., it seems that the headline position is applicable.
"Time to display key elementsLet's go.
The sooner the background image and main content are displayed, the better the UX (user experience).
What is Cumulative Layout Shift?
This is also a big factor along with the "LCP" mentioned earlier.
“CLS measures the sum of all individual layout shift scores for all unexpected layout shifts that occur over the life of the page.”
In other words, how much there is a layout shift that the user does not intend.
A familiar example is, "When I started reading an article, images and advertisements came out with a slight delay, and the text was misaligned and I was confused."
I think you all have experienced it once.
The less such unpleasant experiences the user has, the better.
Let's also look at measures to improve these indicators.
Immediate page speed improvements
Here, we will explain the measures that lead to the improvement of display speed in common.
There is a technical part about how to deal with it concretely, but it will be long, so I will write an article individually.
Reduce the size of the image
It is an image compression site called "Tiny PNG".
If the number of image files is not huge and you can upload them again, use this site etc. to compress the images and reduce the capacity.
If you have a lot of images, use a plugin like this as well.
EWWW Image Optimizer
This plugin compresses image files all at once.
Please note that the compression ratio is not so large as it suppresses image deterioration as much as possible.
External file compression
Even a lot of wasted space and line breaks will put pressure on the capacity.
Try compressing the file using the following sites.
Click here for CSS
CSS compression tool
Delete unused external files
The larger the number of external files, the greater the impact on display speed.
For example, regularly review and remove tags for ads that you used to serve but aren't currently delivering.
AMP stands for "Accelerated Mobile Pages" and is a project started by Google and Twitter that aims to make the web experience for mobile users comfortable.
Due to the size of images and the influence of web fonts, smartphone sites tend to take longer to load than PC sites.
Web pages that have introduced AMP are stored as a cache on Google and Twitter. This way, you don't have to load the web page, just view the cache stored in Google etc.
In addition, the amount of data is inevitably small because simple html and CSS are required, which are strictly restricted according to the AMP regulations. Since less data is read, the display speed is also faster.
I will explain AMP in detail later in an article.
* As of July 2021, the preferential treatment on the AMP page has disappeared. However, in terms of faster display speed and excellent usability, it is an opportunity to get a relatively good evaluation.
We will continue to update the article on how to deal with it, but I think that there will be a lot of steady work and difficult situations.
I hope this article will be of some help to you.
If you have any questions after reading the article, feel free to Twitter (@kaznak_com) Etc., please ask.