What are Core Web Vitals? Exclusion of resources that interfere with rendering

What is Core Web Vitals?

Core Web Vitals is a concept that has become widespread these days and is an indicator that has a significant impact on the page experience, especially when loading pages.

From May 2021, Google officially announced that it will affect the search ranking, although it is mobile only (smartphone).
I think many of the people in charge of SEO are deeply digging.

Coding inside the site is greatly involved, so if you are not confident, let's deal with it in cooperation with engineers.

The core web vitals themselves have been explained in past articles. Please see here for the basic part.

How to improve core web vitals

PSI screenshot
Pagespeed Insights
This time, I will talk based on "Pagespeed Insights", a tool used to speed up pages.

As those who used it will understand, the items that need improvement are displayed below the score displayed each time.

There are about 36 items in this item. It is difficult to introduce everything in detail in one article, so I will take up common errors and talk about explanations and remedies.

Exclude resources that interfere with rendering

I feel that this item will probably come out most of the time.
I don't think people who aren't usually involved in the front end can understand the meaning of the words.

Rendering is to format and display the original data (server side) (browser side such as chrome).
It's like, "It's taking a long time to draw the web page, so please improve it."

Web pages are created using "HTML", but "CSS" and "JavaScript" are used for movement and decoration.
Although it is convenient and looks good, it requires the operation of loading a program, which puts a load on it.

How much the load is applied affects the speed at which the page is displayed.
In particular, "WordPress" has many useful functions such as plugins, but "JavaScript" is often used.

Solution for exclusion of resources that interfere with rendering

So how do you deal with it?
In particular,

  • Delayed / asynchronous loading of JavaScript
  • Lazy loading of CSS files

It will be.

Delayed / asynchronous reading

The basic program is loaded line by line in order from the top.
Then, after the processing of each line is completed, the processing of the next line is started.
This is called synchronous processing.

The way to deal with this time is the opposite, which is to perform "asynchronous processing".

First of all, I would like to mention the disadvantages as a premise, but I think that CSS and javaScript have a number of files that greatly affect the appearance.
Make sure to select the file to be modified that does not have a great influence on the description of the page.

You can see how much each file is used to depict the page or not in Chrome's "Developer Tools".
"F12" is displayed for Windows, and "Command + option + I" is displayed for Mac.
coverage
If you press the moretool button like ":" at the bottom left of the source screen, there is an item called "Coverage", so select it and follow the instructions.
Then, the CSS and JavaScript files used on the page will be displayed, and the percentage used will be displayed in a graph.
It is recognized that the higher the proportion of red color, the higher the proportion of unused color.

Make JavaScript asynchronously loaded

This is a method to add the word "async" or "defer" in the script tag.
With this addition, the file is read asynchronously, and the time to read HTML is shortened.
async and defer
Just add a little bit. I think that big errors are unlikely to occur, but please check the display before implementing.
Please note that the script may not work as expected if you give "async" carelessly.

Lazy loading CSS

Something like the defer attribute in JavaScript isn't provided in CSS, but you can otherwise make CSS asynchronous and control HTML parsing.

If the value of the attribute rel = ”stylesheet” of the link tag is set to “preload”, the CSS file can be read asynchronously.
However, with this method, the support status of the browser is different and it cannot be completely supported.
Therefore, I would like to adopt a method of rewriting the media attribute of the link tag.

Description method
<link rel="stylesheet” href="/path/to/my.cssmedia="print” onload="this.media='all'">
Code language: HTML, XML (xml)

If "print" is specified in the media attribute, it will be interpreted as a style sheet for printing and will be read after HTML parsing is completed.
The media attribute is changed to "all" after loading by JavaScript described in onload.
By doing this, the CSS will be loaded after the HTML parsing is completed.

If the amount of CSS data that is not involved in the display of the first view is large, it is possible to increase the display speed in this way.

Use plugin

Autoptimize
This is a method using a plugin called Autoptimize.
If you are using WordPress and are not good at difficult tasks, I think it is easier to handle it here.

Setting JavaScript options

In the JavaScript options section

  • JavaScript code optimization
  • Concatenate JS files

Let's check the two fields of.

For optimization, it compresses the JavaScript file by removing line breaks in the file.

Regarding concatenation, it is a setting whether to aggregate the linked JavaScript files so that they are loaded as non-rendering so as not to block them.

Setting CSS options

  • Optimized CSS code
  • Concatenate CSS files
  • Concatenate inline CSS

Check the three fields in.

The content is the same as the above JavaScript.

The column for concatenating inline CSS is whether to target the CSS described in HTML.

Setting method
"I don't know how difficult it is, but I want to deal with it for the time being."
For those who say, I think it is better to use such a plug-in.

summary

By all means, when it comes to display speed, there are many difficult factors.
In particular, if you touch JavaScript or CSS incorrectly, the site display will be corrupted, so
If you are uneasy, be sure to make a backup or work while checking the display little by little.

Please feel free to contact us if you have any questions.

I hope this article will be of some help to you.

There were a lot of technical talks this time, so I think there are some difficult parts if you don't have some knowledge of the web.

If you have any questions after reading the article, feel free to Twitter (@kaznak_com) Etc., please ask.

Please excuse me.

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"