Follow us :
March 17, 2021
5 min read
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.
Want to learn more?
Getting the Most Out of Google Search Console’s Coverage Reports
April 07, 2022 . 8 min.
How I Met Google? Where do We Type Queries on the Computer?
April 06, 2022 . 6 minutes to read
A Newbie’s SEO Journey in Three Months
March 08, 2022 . 5 minutes to read
How to Implement Search Intent in SEO Strategies?
February 18, 2022 . 8 min.
What Are the Benefits of YouTube for Small Businesses?
February 16, 2022 . 6 min to read
What Are The Digital Marketing Challenges in Healthcare Industry?
February 03, 2022 . 11 minutes
Is Field Data or Lab Data More Important for SEO?
February 02, 2022 . 9 minutes
The Effect Of Structured Data On Visibility
December 23, 2021 . 6 min read
How A Category Tree Can Improve Your SEO Strategy
December 09, 2021 . 6 min read
Researching Different Languages for a Global Website
December 02, 2021 . 6 min read
Why Should eCommerce Websites With Video Content Get Video SEO Services?
November 10, 2021 . 6 min read
How to Win Featured Snippets for Your Blog Post: A B2B Case Study
October 01, 2021 . 9 minutes
How did I Learn Video SEO?
August 19, 2021 . 6 min read
The Challenges I Faced While Learning SEO Fundamentals
August 18, 2021 . 5 min read
How to Optimize Late-Discovered Largest Contentful Paint Element?
August 17, 2021 . 5 min read
Why do clients decide to work with an SEO agency?
June 21, 2021 . 9 min read
How to Track Keyword Ranking Performance Easily & Free?
May 10, 2021 . 5 min read
Cumulative Layout Shift Study: How Ready Are Websites for Core Web Vitals Metrics?
May 09, 2021 . 6 min read
Image Compression: A Quick Win in Page Speed Optimization
April 29, 2021 . 6 min read
A Guide to Cumulative Layout Shift with Real Cases
March 17, 2021 . 5 min read
What are the Best Practices for Competitor Keyword Analysis?
March 11, 2021 . 7 min read
What Happens If Canonicalizing E-Commerce Pagination Pages to the First Page?
March 07, 2021 . 6 min read
How to Handle SEO for New E-Commerce Sites Facing Stiff Competition?
February 28, 2021 . 7 min read
Solve Your E-Commerce Thin Content with Technical SEO
January 24, 2021 . 7 min read
International SEO Strategy for Global Websites and Geo IP Redirect
December 29, 2020 . 3 min read
7 Common Blogging Mistakes that Can Sabotage Your SEO
December 21, 2020 . 7 min read
How to Optimize Content Quality to Win SEO Game?
December 17, 2020 . 5 min read
Webinar Recap: A Different Perspective of Resolving Most Common SEO Issues
December 08, 2020 . 8 minutes
Crawlers Gonna Rate – DeepCrawl & BoostROAS Webinar Agenda
November 23, 2020 . 2 minutes
How to Find Effective Seasonal Content Ideas in Less Than 10 Minutes
September 22, 2020 . 4 min read