[WordPress / Display speed] What is lab data? / Page Speed Insights

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.
Page Speed Insights
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.

Page Speed Insights Lab Data

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.

FCP commentary by Google

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.”

DOM? Rendering?

Let's dig a little deeper into each.

DOM is an abbreviation for Document Object Model, which is a link for handling objects from various programming languages such as JavaScript.
It's difficult to explain, but for example, when you click a button displayed on a Web page, it is finally possible to relay the DOM from JavaScript in order to perform the preset processing. It's like that.

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.
Google commentary on TTI

“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?

Explanation of speed index by Google

“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.
Explanation of speed index by Google

“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.

Google commentary on CLS

“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.

Explanation of CLS by Google (1)

“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

tinypng

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

The capacity of CSS, JavaScript, etc. varies depending on the number of lines described.
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

Click here for JavaScript
Click here for JavaScript

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.

Use AMP

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.

summary

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.

see you.

Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"
Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"