A Guide to Cumulative Layout Shift with Real Cases

One of the essential metrics affecting our speed score is Cumulative Layout Shift (CLS) among the Core Web Vitals values. Especially on a news or magazine website, while reading an article, we can give an example of shifting a grid in an advertisement or website that suddenly appears. Especially on the mobile side, it can significantly affect the user experience. While we are fully immersed in the article, when we scroll the screen down, we can suddenly click on the ad that pops up and finds ourselves on the advertiser’s landing page. 

So how is this CLS metric measured? The first 500 milliseconds is vital for this metric. Measures the distance that our elements have shifted and shares our score with us according to these values. For more information regarding CLS scores, you can visit web.dev. In short, a score of less than 0.1 is terrific; a value between 0.1 and 0.25 offers us a perfectible score. We send a get-well wish for CLS scores to websites that exceed these values.

Detailed Cumulative Layout Shift Guide with Statistics and Examples

The website category that performs the worst CLS metric is usually the websites in the media and news category. Since there are many visuals, videos, and, more importantly, advertising elements in the website, it is the most crucial category with difficulty in this metric. Since the revenue models of these websites are advertising, optimization processes in this area are also complicated. We have positioned the CLS values of the most visited magazine websites of 10 random countries from the European continent on a map as follows.

The methodology of this research consists of ten countries that we have randomly selected from the European continent. It includes websites in the news & media category, which is the most popular based on Similarweb data from ten countries. The field data of the selected websites were received via PageSpeed Insights. Since the pages with the highest content density are the home page, this research is based on the homepage of the websites.

In these researches, some websites do not have advertising spaces because they have a more official identity. However, especially websites with a lot of ads are among the websites that need to be optimized at this point. For example, ukr.net is a Ukrainian media website with a fairly simple design. But the ads inside the pages make the CLS metric very bad. There was a question asked to John Mueller on Twitter about this. The relevant tweet;

Pagespeed scores are not evaluated according to categories, and all websites are assessed according to the same criteria. You can visit the Lighthouse Scoring Calculator website to learn more about these criteria. In this case, how can news & media websites be affected? For example, the informative text of a more organized and optimized blog site with no ad space can get ahead based on the CLS metric when it is in a ranking race with a news website. However, the effect of the CLS metric on the overall speed score is only 5%. If the scores of all other speed metrics are equal, it can stand out more with the CLS score. But we shouldn’t forget that Google ranking factors are not just based on page speed.

If we compare the CLS metric on content management systems, we can say that all CMSs fail in this regard. When we examine this 2020 CMS report shared by Web Almanac, all CMS-using websites are reviewed according to three separate page speed metrics. In the cumulative layout shift metric, we see that all these websites need to improve themselves. However, while doing this review, we need to pay attention to the category of websites using CMS and whether the themes used are optimized or not.

How Can We Prevent Shifts On Our Website?

• Do not load elements asynchronously that affect the DOM. 

We may want to increase our page speed by loading our JS and CSS docs as async, affecting the loading chain. But in this case, if these files affect the DOM, there will be shifts during the loading of our website. Therefore, we should not load our third-party codes async that will affect our website’s DOM.

• We must define “height and width” attributes to our elements on our website.

We need to define width and height properties for all items such as images, videos, ads, embeds, iframes on your website. Before elements are uploaded via CSS, allocate the necessary space for them, thus avoiding shifts during the upload phase.

Sometimes, on the advertising side, ad distributor platforms do not make these definitions in the ready-made embed code they provide. We can add to this embed code structure. Some ads work directly with a third-party outsourcing code. In this case, you may need support from the distribution company. If this problem cannot be solved, you may be at a crossroads, such as whether advertising is more critical or my CLS metric is more important for your website.

• Reserve space for your dynamic content on your website

A grid dynamically located anywhere on your website will cause a shift problem on our website. In this case, as we mentioned above, any element to be created dynamically should be allocated a space in advance. Thus, it will not disrupt the page layout during the loading phase when the relevant field is loaded.

• Fonts you use on your website should not cause FOIT and FOUT.

Flash of unstyled text (FOUT) problem is caused by fonts loaded by default and later changed. For example, we use the Promo font on our website. When loading our website, it will first be loaded in styles such as Roboto, Helvetica, which are found in operating systems such as Windows and Mac. Later, when our Promo font is loaded, the style of this font will change. In this case, since the values such as width and thickness will differ between the customized font and the default font, the occupied space will also change. Thus, there will be a shift during the loading phase, especially on the mobile side.

Flash of invisible text (FOIT) problem does not show the texts to the user until the custom font you use. This issue is found in headers loaded with the “font-display: block” CSS property. In this case, if our font is loaded too late, it may disrupt our page layout and again cause a shift problem, especially on the mobile side.

Usually, in this case, we preload the fonts recommended to us by PageSpeed Insight. By loading our custom fonts as preload, we do not encounter problems that affect user experiences, such as FOIT and FOUT.

In a brand serving in an IoT field, our page speed score shows good scores in LCP and FID values. But the CLS score was pretty bad. One of them was that the font we used was behind when it was loaded. First of all, we made this change and our page count with a bad CLS score on the mobile side has decreased to 0.

How can we analyze the elements that affect our CLS score?

With the next algorithm update, field data reports will become even more important. For Google, field data is more important than lab data and it reflects a real user experience. Therefore, we can check our Core Web Vitals values on Search Console and examine our poorly performing pages. The performance of our metrics here is presented to us directly from the Chrome User Experience Report. If we want to examine our poorly performing pages in detail, we can use the Speed Curve tool. We can detect the shifts that occur during the loading phase and we can find a solution.

For this, we can use many tools that crawl our website and provide us feedback. We can present the elements that cause shifts on our website, which I crawled on SpeedCurve, along with images and videos of all loading stages. At this point, we can determine the elements such as image, text, video that cause the shift, and we can perform optimization in this area. Our elements in the red square show why it caused the shift and show in detail how much it affected our score.