The web page UX index “Core Web Vital” announced by Google has three indexes, “LCP”, “FID”, and “CLS”. For more information, see the Web Contact Forum[Important] What is Core Web Vital? Easy-to-understand explanation of the meaning and standard values of Google’s UX index LCP / FID / CLS [SEO information summary]It is written in.
Among them, CLS (Cumulative Layout Shift) means “cumulative layout change” and is an index showing the stability of visual elements. For example, suppose that when you load an image, the image size is not specified and the text is written after the image. In this case, the text is lighter and will be read first. The text is loaded first, then the image is loaded in the meantime, but the browser doesn’t know the image size. While reading, I understand “Oh, was this image a 500 x 500 image?”, Create 500 vertical and horizontal margins on the text, and display the image there.
At this time, the user experiences that the text that was being read is “pushed to the bottom” by creating a margin later. This is “difficult to read”, isn’t it? If the vertical and horizontal sizes are specified for the image, the browser will know the size of the margin to be created from the beginning, so it is possible to prevent the layout from collapsing / moving afterwards.
However, when trying to support smartphones, there %表示にしたい」場面は多くあります。また、パソコンよりもスマートフォンの方が画面が高解像度ですから、「パソコンでは実際には幅1200pxの画像を600pxで表示し、スマートフォンでは横幅100% “. How can I solve this problem without getting a CLS error? I experimented. Click the image to enlarge it in a separate window.
Enter only the characters and make sure there are no CLS errors
First, simply enter the text and make sure there are no CLS errors on this web page. I am using the Google Chrome add-on for confirmation.
Add images with WordPress features
When I simply add a few images from “Add Media” in WordPress, I get a CLS error.
Delete class automatically inserted by WordPress
The specification related to the image size such as size-full is automatically inserted, so if you delete this, the error disappeared. This is very commonplace, and at this point the width and height are well specified in the img tag, so there are no elements that would break the layout.
But this is not responsive. This image has a width of 900px, but when viewed on a smartphone, all the images are not included.
Specify CSS for width in img tag
Next, with the HTML vertical and horizontal specifications written in the img tag, add the horizontal width specification with CSS. The width is 100%, and specify the actual size value for max-width. Although there is no CLS error, the aspect ratio of the image is not maintained correctly.
Even if you look at it on your smartphone, the aspect ratio is not maintained.
Delete HTML while specifying CSS related to width in img tag
So what about removing the absolute value of HTML? In fact, I’ve been writing img tags this way so far … Of course, I get an error. I’m trying to solve this situation right now.
Specify the absolute value of the image in HTML and the relative value in CSS
So, let’s go back one step and write the vertical and horizontal information in CSS with the absolute values of vertical and horizontal written in HTML. The width is 100%, with max-width, and the height is auto. Now there are no CLS errors.
We also confirmed that there were no “cumulative layout changes” errors on the Page Speed Insight mobile screen. Although there are other improvements. Lol
From this, it was found that the CLS error can be resolved by specifying the absolute value of the image size in HTML and the relative value in CSS for the img tag. All of them are written inline for easy understanding, but in reality, it is better to put the actual size inline with HTML and put the CSS externally.
