What is written on this page
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
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."
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.
Solution for exclusion of resources that interfere with rendering
So how do you deal with it?
- 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".
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.
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.
It is recognized that the higher the proportion of red color, the higher the proportion of unused color.
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.
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
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.
Code language: HTML, XML (xml)
<link rel="stylesheet” href="/path/to/my.css” media="print” onload="this.media='all'">
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.
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.
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.
- Concatenate JS files
Let's check the two fields of.
Setting CSS options
- Optimized CSS code
- Concatenate CSS files
- Concatenate inline CSS
Check the three fields in.
The column for concatenating inline CSS is whether to target the CSS described in HTML.
"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.
By all means, when it comes to display speed, there are many difficult factors.
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.