What is CLS ?
When it comes to site speed optimization, it is impossible to forget the three factors of Core Web Vitals; Factors one of the most important of which is cls. But what is cls? cls or Cumulative Layout Shift is one of the three main criteria of Core Web Vitals that Google uses to evaluate the user experience and rank the site in search results. cls is something beyond the speed of loading the site and has an incredible impact on the user experience of our audience.
Experience has shown that users interact better with sites that have invested in improving their cls. If you are just starting out in SEO and you do not know exactly what Cumulative Layout Shift is, read on. Because we are going to tell you what cls is, what effect it has on SEO and user experience, and with what tools it is measured. You will also be introduced to solutions that will help you improve your site’s CLS score and bypass the Core Web Vitals filter.
What is Cumulative Layout Shift?
Cumulative Layout Shift or cls is one of the three core factors of Google, which is calculated based on the sudden changes of images, elements and the distance between them when the site loads. These changes occur for a variety of reasons, including late loading of fonts, images, buttons, and other site elements.
You have probably experienced this before; For example, you have entered a site and you want to click on the register button, but due to the slow loading of the site, the location of the buttons changes and you enter another page; Just like the video below. Certainly not for you!
The importance of cls for Google ranking algorithms
cls is very important for Google algorithms and site ranking, because it directly affects the site user experience. In 2021, just a few months after the unveiling of the MUM algorithm, Google introduced the cls metric as one of the site ranking metrics to clarify its importance to webmasters, and by improving the site’s cls, a better user experience for site visitors and Provide potential customers.
In its new and advanced algorithm, Google seeks to create a better and more natural user experience for users. The cls factor is also under the magnifying glass of this algorithm because it directly affects the user’s interaction and instantaneous experience in using the site. In this regard, we suggest you read the article ” Site Speed Optimization “, which has a strong impact on user behavior and site ranking.
The best cls rating of the site according to Google
cls can be set to 0 for fully static pages, but the higher the layout of a page as the site loads, the higher the value. In general, the lower our site’s cls score, the more stable the site layout changes. The official ratings of cls announced by Google’s official tools for measuring site speed are based on the following standards:
- Good: cls below 0.1
- Needs improvement: cls between 0.1 and 0.25
- Weak; cls above 0.25
Of course, Google recommends that we keep our site cls score below 0.1.
The impact of cls on SEO and site user experience
In the previous section, we answered the question what is cls and knew how important this factor is for Google, then we want to examine the impact of cls on SEO and user experience of the site.
The cls factor became one of the site ranking factors in June 2021, when the Google Server Page User Experience Update started working; This means that cls affect our site SEO. The cls score, along with the lcp and fid factors, affects the natural traffic that Google or other search engines send to our site. It may not seem like much at first glance, but it’s important for Google to know that our users enjoy browsing the site.
Cls are related to the criteria of user behavior and their interaction with the site. Admittedly, content that changes unexpectedly on the page makes the user feel bad and discouraged or even angry. Following this issue, his stay on the site will be reduced or he will leave the site immediately. What do you think will be the result of this?
good job! Reduce retention time or increase site bounce rate; Two important factors that Google considers for ranking sites. So we see how painlessly underestimating cls can damage our site rankings. Of course, we should not be disappointed, because improving the site cls is not a difficult task. We just need to first determine the current status of the site cls, then work with the help of the solutions that we teach in the following, to optimize it.
Recommended article: What is lcp? Learn 10 ways to improve lcp site on mobile and desktop
Get acquainted with the cls measurement tools of the site
Before we go about optimizing or improving our site cls, we need to know what our site cls rank. For this purpose, we can first use our free tool Google. This tool is called DevTools Google Chorm. Here’s how to use it:
DevTools Google Chorm
To use DevTools Chrome, you need to enter the Performance panel. First, right-click on the desired page and select “Inspect”. Then we enter the “Lighthouse” section. In the page that is displayed, we can select the desired category for analysis and site display tools (mobile or desktop). Then we have to click on “Generate report” and wait for the announcement of the site cls rank and Chrome suggestions to improve it.
Of course, in addition to DevTools Chrome, there are two other tools we can use:
Google PageSpeed Insights
Google PageSpeed is another free Google tool for measuring instantaneous values of cls, lcp, ttfb and.. You can use PSiphon to log in only because it is a sanction for Iranian users to use this tool.
GMetrix
Another tool used to measure cls is the free GMetrix website. Site analysis in this tool may be a little time consuming, but in the end it shows the site score in all speed factors and ways to improve them.
Experimental reduction of site loading speed to check cls
Measuring cls with the tools we introduced may not be very accurate. Because usually all site caches with related data (CSS, fonts, images, etc.) are already in our browser. This causes any configuration changes to happen faster than a new user’s system, and we make a mistake in the diagnosis. For this reason, we recommend a simple and practical method; Deliberate reduction of site loading speed when testing cls.
To do this, first open Chrome Development Tools and go to the Network tab. Then click on “online”. In this section, we have to manually reduce the speed of the site for testing to test it at a lower speed.
In this section, instead of using the default settings, we change the download speed of the site to a lower value of 150 kbps. At this speed, the site loads much slower. We can now see everything, including what elements resize and how much layout changes occur.
An important point to identify the factors that increase cls
After setting the download speed, go to the Elements tab, click on “More tools” and then select “Rendering”. In the page that opens, you will see “Layout Shift Regions”. Check it and then reload the page. After a few seconds, a page will be displayed in which the parts of the site that increase the cls are highlighted in blue.
Improve site cls with 3 quick and easy solutions!
To improve the cls ranking, we need to minimize the change in the layout of web pages when the site loads. Part of the site cls optimization process requires the change of site code, which is done by the programmer. But there are 3 quick fixes that can be done by SEO experts and we will explain them below.
1. Set the image, video and animation settings of the site to the responsive mode
The first step to improving the effectiveness of cls in SEO is to adjust the size of the site images and videos on the responsive mode. In this case, the length and width of the elements change as the “image ratio”. Using the aspect ratio of the browser allows you to calculate the space required to display the image, thus avoiding unnecessary shifts in size or layout. In this case, Google recommends that we use the scale conversion feature in CSS.
2. Adjust the site font so that it is displayed from the beginning
Font settings on some sites are such that the site content is not displayed to the user until the original font is fully loaded. This is called Flash of Invisible Text, or FOIT for short, and the problem is the slow speed of the site. But there is another mode called Flash of Unstyled Text or FOUT for short.
In FOIT mode, the content of the site is displayed to the user with a default font until the main font is loaded. But this method also has a small drawback. Because when the default font is changed to the main font, there are changes in the size or layout of the site elements, which has a negative impact on the user experience of the audience. But we have a good offer!
Enable the FOUT settings and add rel = ”preload” to the HTML code for the font at the site header to resolve the issue when changing the default font to the original font. In addition to improving the user experience of site visitors, this prevents sudden changes in the layout of various elements of the page.
3. Display dynamic content between static site content
Dynamic content should never appear above static content. The only exception to this rule is when we have done so to improve user interaction. Loading dynamic content usually takes more than 50 milliseconds, so it will not have a good effect on the user experience of the visitors. But static content loads much faster and will not affect the site’s cls.
Frequently Asked Questions
Is using Lazy Load effective in increasing the amount of site cls?
No. There is no connection between lazy load and cls. lazy load is designed to improve the user experience.
Does hosting affect the reduction of site cls rank?
If you are having trouble slowing down your site in general, the first thing to look for is hosting. But hosting affects all site speed factors and Core Web Vitals, not just site cls.
What is the safest tool to measure site cls?
Using the free Chrome Dev Tools is one of the best ways to measure cls.
What factors improve the site’s cls ranking?
- Use the fout method to change the font of the page text
- Display dynamic content between static site content
- Images and videos of the site should be placed on the site without a specified size or with a percentage
- Advertisements, embeds and iframes should be placed on the site without a specified size and using percentages
- Use general and small css
- The csss are displayed first and then the site
Concluding remarks
In this free SEO training article , we answered the question of what is cls and knew that cls may be less visible compared to other Core Web Vital factors, but investing in improving it will bring very useful results for SEO and site user experience. .
Of course, if you have a question about changing the layout of web pages while loading or a useful experience about improving the site’s cls, we’d love to hear from you in the comments section. We will definitely answer you as soon as possible.
