CLS website quality indicator - what it is and what values ​​it should have, how to remove the twitching of the website content

18.06.21 IT / SEO 2132

Some time ago, sites began to be evaluated by search engines for all sorts of criteria and Quality Score . One such metric is CLS (Cumulative Layout Shift).

What is CLS on the Web? This is an indicator that indicates how much the content is displaced on the page of the site after loading, which makes the use of the site inconvenient and can cause errors and annoy the visitor.

The indicator is called CLS (it may have different names in other services for assessing the quality of sites, but the meaning is the same) and is included in the Google toolkit for measuring the quality of sites - Core Web Vitals, which, in addition to CLS, contains other indicators, such as LCP (Largest Contentful Paint - the speed of loading the main content), FID (First Input Delay - the time to wait before interacting with the site page), etc. But this article is about CLS.

The ideal CLS value is 0 , which means that all site content is strictly fixed and there is no twitching of the page content. But in practice, sites have indicators that differ from 0, values ​​up to 0.25 are acceptable. More precisely:

- 0 is ideal ;

- values ​​up to 0.1 are a good indicator ;

- values ​​from 0.1 to 0.25 already require a revision of the layout of the content on the page ;

- values ​​above 0.25 are bad indicators, which may lead to warnings from search engines .

Why is it important that the content stays in place after the page has finished loading? When a user uses the site, he assumes that all elements will remain stationary after opening the page. He selects the values ​​in the form, fills in the fields and clicks the button to submit data - when suddenly informational messages are added after the fields, the submit button slides down, as a result of which the user clicks on another button, for example, on the clear fields button. Or the visitor begins to read the text with enthusiasm, when suddenly the content is loaded, the page twitches - the reader loses focus. All this will undoubtedly irritate the user and want to leave such a site as soon as possible.

Therefore, when ranking, search engines also take into account such criterion as the stability of the content on the page, that is, CLS. If there are problems with this indicator, this will be reported in the control panel, for example, in Google Search Console or Yandex Webmaster. Of course, if the site owner uses such tools.

How to remove page jerking , that is, how to achieve a good CLS score ? To do this, it is enough to follow a few basic rules:

- when developing it is important to do it right site layout ;

- place site blocks in the required tags with specified sizes, use tags that are suitable for the semantic meaning ;

- it is necessary to load dynamic content into pre-prepared blocks with specified dimensions, in this case, the elements will not shift ;

- all elements, including text labels, must strictly occupy their place and have a fixed font size ;

- if the site has a responsive design, it is necessary to test the placement of the site blocks at different resolutions and eliminate possible twitching of the elements ;

- try to avoid embedding undefined third-party content, especially in places on the page that will affect the visitor's focus and cause distractions .

Revealing content twitching on a page is quite simple, for this you need to open the necessary pages and start actively using the located elements - filling out forms, reading texts, etc. In this case, you must pay attention to the vertical scroll bar - it should not change its size and the content should not shift.