Cumulative Layout Shift Study: How Ready Are Websites for Core Web Vitals Metrics?

Why would a user visit your website when there are hundreds of choices of websites answering users’ questions and providing services in their field of interest? You may be helping them in their quest for a better user experience, and being able to answer their questions instantly is one of the most important criteria.

Therefore, Google will gradually roll out the update in mid-June, which will make the page experience a ranking factor, which is also mentioned long ago.

What are Core Web Vitals?

Largest Contentful Paint (LCP): It refers to the amount of time it takes from the moment our website loads until the most oversized item on our page loads.

First Input Delay (FID): It measures the response time of your browser to that interaction with your page (e.g. clicking on a link or tapping a button).

Cumulative Layout Shift (CLS): This is the metric we examined in our research. The following title is described for your full knowledge.

What is Cumulative Layout Shift, why is it so crucial for Core Web Vitals?

Cumulative Layout Shift is not directly effective with the loading speed of our website; technically, it is a more user-friendly metric. It measures the amount of shift of elements that do not appear in the first 500 milliseconds of your page’s loading process but which later cause shifting by loading. Basically, the ratio of whether the elements loaded later than the other elements disrupt the order of the relevant page. You can read our detailed CLS guide we wrote about this metric by clicking here.

In this research, we prioritized the Cumulative Layout Shift metric, one of the most overlooked metrics among Page Speed metrics.

Research Mission

Some blog posts on how it will affect websites have been written, and research has been published by category and metric. But these have primarily been targeted at large markets, such as the United States or the United Kingdom. I wanted to do this research by analyzing the most visited flagship websites of most countries. The question marks I want to answer are like this;

• By the next algorithm update, how ready are the websites for this update?
• There is a lot of research on websites in major markets, but what about other countries?
• Is the Cumulative Layout Shift (CLS) metric being paid attention to by significant websites?

Statistics show that the websites that get the most traffic in their market are undoubtedly the ones with the most robust potentials for improving these metrics. Since these websites are the best in their markets, we wanted to analyze the readiness of the websites in those markets for the next update scheduled for mid-June.

Method

By collecting CLS data from every continent of the world, we identified websites dominated by Core Web Vitals metrics in all markets using Similarweb Top 50 data. We took care to choose the most local website among these websites. E.g., We have taken care not to select global websites such as Amazon, Netflix, Twitter, or ccTLDs customized according to the locale.

These 500 sample websites we gathered include the most visited websites in 56 countries. I formed the sample group with a maximum of 10 websites from each country. These websites are classified using field mobile data (CrUX), which consists of users’ data. Lab data of 5 websites without field data were used. We made the categorization by using the Similarweb page, where the top 50 data from which countries get the most traffic.

Later, we collected both lab and field data by accessing this data using the PageSpeed API in the Screaming Frog SEO Spider tool. We checked some websites manually using the Lighthouse tool to avoid any API-related errors. 

After these analyzes, we tried to extract insight by manually analyzing the websites that stand out in this metric, especially in the Speed Curve tool, which is one of the tools that I use when looking especially to detect shifts. I also used the WebPageTest tool for the waterfall, which shows the loading stage of our website in detail.

Research

Our research revealed that websites still perform worse in the Cumulative Layout Shift metric, where websites fail the most. The reason why the website owners ignore this metric is that it does not directly affect the website speed, the Core Web Vitals metrics are not given enough importance, the percentage ratio to the average PageSpeed score is lower than the other metrics, and there is not enough conscious digital environment about how to improve. We can list reasons such as.

When we categorize the most visited websites based on visits from many different countries, those with the lowest ratings are those under the News and Media category. One of the most influencing factors for this metric is the advertising spaces and the income model of these websites being advertising, the wide range of news on the main page, and many visuals, and many different dynamic elements that cause this lousy score.

In e-commerce sites, these shifts occur in the slider section, menu, and product categories. In addition, if the campaign pop-ups are not optimized, this is another reason that causes a shift in the loading phase.

Another factor that most websites suffer in general is the cookies policies they have to display due to the legal obligation in the country where they are located. When these cookies are used wisely, they should not conflict with any element on the website. If they conflict, especially mobile users will be able to click on a page they don’t want when they first enter the website.

Websites with Worst CLS Scores in Our Research

In the research, I have identified the websites that have obtained the worst CLS scores.

Our research analyzed the websites with the worst Cumulative Layout Shift scores and compiled the factors that cause shifts in sites. While detecting these problems, we also got support from the Speed Curve tool. Let’s check out many websites that serve in different categories and different markets.

When we examine the mobile version of our Athensmagazine.gr website, a separate space is created above our menu during the loading phase. Therefore, our menu scrolls down, and a shift occurs on the screen. This has a very negative effect on our CLS score and user experience.

Our next stop is the United Arab Emirates. There is one of the most common mistakes in the header area on this website, whose design I really like. Since the dimension is not added to the logo of our website, the search bar on the right moves further to the right. In addition, another most common shift problem in e-commerce sites is that the slider in the first painting area does not have a reserved space. In addition, the absence of any width, height value in the images that make up the product category field causes a shift.

Websites with Best CLS Scores in Our Research (Oscar Goes To…)

Well, the bad examples were in front of our eyes, but what about the websites that do this optimization well? Of course, there is. Let’s examine the website francetvinfo.fr, which has a CLS score of 0 according to lab and field data in France. Our website, which is in the category that suffers the most in this metric, has an official publishing policy. Space is reserved for each element on the site, which has a very modern interface. By adding dimensions to all visuals, there is no shift problem on both desktop and mobile sides. In addition, the dynamic structures and pop-ups used on the website have been optimized as much as possible. Although nothing can be said for other metrics, it is a best practice website in the CLS metric and its category.

In addition, when we control the waterfall, the fonts used in the website in the first style file loaded are written in the first line of code. During the installation phase, the fonts are visible, so there are no FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text) problems.

The censor.net website operating in Ukraine is also one of the most successful websites in our research in the category of News and the CLS score. Since the revenue model of news sites is advertising, non-optimized advertising spaces cause shifts. After the main elements on our website are loaded, the ad space is loaded. But since space is reserved, it does not cause any problems—a perfect answer to how we should do ad positioning on our websites.

In Summary

With the next update, the user experience will become even more prominent. 

• This report showed us that the websites that dominate the market are the majority of websites that are not yet ready for the Cumulative Layout Shift metric.
• With the next update, websites in the News & Media category have the opportunity to come to the fore in this metric.
• Although the percentage of the impact of the Cumulative Layout Shift metric on the Page Speed Insight score is low, it is a metric that can stand out for competing websites, as most websites do not solve this problem.
• Cumulative Layout Shift is not just a metric; we have seen how it affects the user experience even on popular websites.

For more detailed information about the websites’ data, categories, and countries, you can find the table I have prepared by clicking here.