Session 5 – What is Cumulative Layout Shift + improve it

What is CLS and how to fix Avoid large layout shifts?

In this tutorial we are going to say in simple language what is Cumulative Layout Shift or CLS inside Gtmetrix tool and what to do with this error? How to improve? Is this an error?

I am the author of this article, I am Pouria Ariafar from SEO teaching, this is not a translation article from other sites, we tried to gather a good article for you from the knowledge and experience we had along with a series of reputable sites. We are happy to be with us.

The Cumulative Layout Shift factor was originally included in Google’s Lighthouse by Google, and after a while the Gtmetrix tool considered this as one of its factors. In general, no matter what Google does, everyone else behaves according to it, whether they read it or not.

It is noteworthy that speed factors are no longer as simple as in the past, and to solve many new factors require high expertise (in the field of programming, SEO and sometimes UX) and just reading a few Persian and foreign articles can not do much. . I said this first so that we do not expect too much from ourselves or the article
Like a miracle: for example, give a code and then execute it and let it go on your site and this factor will improve and turn green (previously in SEO teaching, a series of users had such expectations from us).

Important Note: In the Structure errors section, we have an error called Avoid large layout shifts, which is exactly related to this article, so by reading this article, both the Structure error report and the Performance report in your GTMatrix will be useful.

 

What exactly is Cumulative Layout Shift?

Has it ever occurred to you that you have entered a site and are waiting for a part of the site to load, but Yahoo, after loading the site, that part of the site goes down? Or you want to click on a button, for example, “Yes” inside a site until you want to eat it. A button appears above that button, and you may inadvertently click “No” and a bad user experience will occur to you.

Cumulative Layout Shift, which stands for CLS, says let’s solve the above and not be on the site, just as easily.

The lower the CLS number, the better, and the higher, the more optimization your site needs.

We all definitely experienced a series of situations and waited for the page to load, we found the button you wanted to interact with and clicked on it, then the page changed to the bottom and we completely clicked on another link. We clicked. Reducing the CLS can naturally reduce the displacement of elements from the screen and improve the user experience. Please look at the example above to see how bad it can make the user feel if you have CLS in cases like the one above.

 

What is CLS in specialized language?

Now if I were to be a little more specific about what CLS is, I would say CLS is a measure of visual stability when loading a page, or another definition, it is a measure of how unexpectedly web elements change when a user loads.

CLS (Cumulative Layout Shift) is one of the most important factors within the Web Vitals standard. The Web Vitals metric is an important part of the GT Metrics Performance report.

Layout Shift is also called Layout Shift in Persian.

 

Good and bad criteria in Cumulative Layout Shift

CLS has a direct effect on the overall Performance score in GTMetrix and this effect is 5% overall, but it is very important to note that CLS does not have a direct effect on the speed of your site but on the user experience. The good and bad scores of the CLS factor are as follows:

  • 0.1 or less: OK
  • Between 0.1 and 0.15: Acceptable, but requires optimization
  • Between 0.15 and 0.25: Slightly longer than standard
  • More than 0.25: Much longer than standard

If a website has a low CLS, it means it has a stable screen that does not move elements around and ensures consistent and predictable loading of all website content. Naturally, if you improve the CLS, your site’s performance will eventually improve by 5%.

Warning: We humans make a lot of mistakes in our testing. One wrong example is that we left our good flexible minds to tools and numbers (some of which I mentioned in the article because of the differences in GTMetrix reports), or another wrong example. We think that this site speed factor, ie CLS, is only for the main page of the site, in other words, friends only check and analyze the main page with it, while other pages are also very important.

How to reduce Cumulative Layout Shift?

Keep in mind that improving CLS is not that simple, and instead of further sabotaging your site, it is better to have a specialized team, because solving these issues does not depend only on one specialty, and several specialists must be together.
However, here are some things that can affect the Cumulative Layout Shift, and there may be some that are not listed below but are effective.

1- Specifying image dimensions error

We have already talked about the important Specify Image Dimensions error in SEO teaching, specifying the dimensions of photos and videos can help the user’s browser to better identify the position and size of each element.

2 – In-page ads

The ads are now very, very much on the sites, especially since the ad agencies clicked. Placing script code on these sites to display ads can increase the CLS time.
Or embeds and iframes are a series of sites, videos, maps, etc. that can cause a bad shift for your site users.

For example, you can load these items at the bottom of the page or give that section width and height beforehand. Of course, this solution is applicable to everyone in most cases.

3- Unexpected dynamic content

I had already searched my old phone and entered Digi Kala, I was looking at the specifications of my old phone when Yahoo went to the page more closely !! Why?
Because the product section related to that old phone (for example, the latest version) has just been added to the product. Of course, this problem is solved now, but prevent any content such as related products or related articles or the newsletter coming unexpectedly between the internal sections of the site, which causes page shifts.

4- The font should not be loaded in the first place, it is not bad

Based on our experience with site speed services in SEO teaching, we found that many sites do not comply with the above. Let me explain more.

Now the SEO teaching font is “IranSense”, in order for you to be able to see the SEO teaching texts with this font, your browser must load these fonts and then process them so that all the texts are loaded based on the IranSense font. There are two modes:

The text of the site is displayed with the default browser font and whenever the site font is loaded, it changes to the font available on the site, for example, in SEO teaching IranSense. This is called: Flash of Unstyled Text or FOUT for short
The text of the site is not displayed until the site font is fully and accurately loaded and processed for the user, this is called: Flash of Invisible Text or FOIT for short.

What is the problem now ?:

The picture above is very clear. It says the difference between this, in FOUT mode the text is displayed faster and the site speed is better. In other words, FOUT mode is suggested, but there is a problem and that FOUT mode has a Layout Shift problem. (We do not check the FOIT mode that 90% of sites have because it slows down the site).

What to do?:

Use font-display to eliminate FOIT and enable FOUT, and finally use rel = “preload” font in the site head to solve the better FOUT problem (same as Layout Shift). (I hope you understand what I’m saying, an expert should do it for you) I will explain with a better example:

 

@ font-face {
font-family: ‘Pacifico’;
font-style: normal;
font-weight: 400;
src: local (‘Pacifico Regular’), local (‘Pacifico-Regular’), url (https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format (‘woff2 ‘);
font-display: swap;
}

In the example above we came to the font-display property: swap; We used to activate the FOUT mode and improve the speed, now if you notice an address of that font is high in the src section. I take that address and paste it in a code like the one below and put it in the site header to improve the Cumulative Layout Shift (note that we said improvement and we did not say complete fix for this error).

 

<link rel = “preload” href = “fontname” as = “font” type = “font / format” crossorigin>

5 – Animations

Now, the use of animation on sites has increased a lot. We in SEO teaching and in the SEO services section have used a lot of animation, videos, or the main page has an animation in SVG format and we are using it.
But sometimes these animations need space in some layers outside the framework and cause Shift to occur on the page. So it is suggested that if you have animation or you wrote these animations with the help of CSS, pay special attention.

6 – and other things in improving the Cumulative Layout Shift time

Rest assured, there are a number of other things that affect the CLS and no one knows for sure, because there can be a number of exceptions for any site and it should be checked, in programming we have so many interferences that can cause these problems.

Sometimes some changes we don’t think will be solved by changing the hosts, sometimes some problems we don’t think will be solved by changing the format, and sometimes by changing the plugin or disabling some items or even correcting some other GTMetrix errors, you will see that CLS has been improved. .

If you want more information about CLS, you can also read the English article on web.dev.

 

Layout Shift is not always bad!

The ones we mentioned were related to Unexpected Layout Shift, in other words, changes that we did not expect, but sometimes we users also expect a series of changes. For example:
You click on one of the frequently asked questions and you expect the page to shift down, that is, the Layout Shift operation occurs. These can be called Expected Layout Shift.

 

Summary of CLS

We said CLS comes from Cumulative Layout Shift, and this criterion is in both Google’s Lighthouse, Google Core Web Vitals report console, and GTMetrix.

What is CLS? We said that the criterion for checking the stability of the elements, while loading the page, is completely focused on creating a user experience. The contents and elements of the page should not be moved unexpectedly and confuse the user.

The total displacement of the page elements determines the Cumulative Layout Shift. The smaller it is, the more stable our page will be and the better the UX will be. Moving content is sometimes due to ads on the page that suddenly appear at the top of the page and cause other content on the page to move down.

Important Note: In the Structure errors section, we have an error called Avoid large layout shifts, which is exactly related to this article, so by reading this article, both the Structure error report and the Performance report in your GTMatrix will be improved.

Finally, it is recommended that you seek help from an SEO expert or anyone you trust and know to get better results. You can also ask questions in the comments of SEO teaching site.

Be sure to follow the instructions for fixing SEO teaching gtmetrix errors. Or if you are interested in technical SEO, follow the technical and technical SEO topics.

Leave a Comment