CLS website quality indicator - what it is and what values it should have, how to remove the twitching of the website content
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.
- 09.11.23IT / Database Errors when migrating from MySQL 5.6 to 5.7 and how to fix them - database dump import failed with an error or INSERT does not work. Disabling STRICT_TRANS_TABLES strict mode or using IGNORE
- 09.07.22IT / Misc Convert office files DOC, DOCX, DOCM, RTF to DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT formats without loss and markup changes
- 07.07.22IT / Safety How to protect PHP, JS, HTML, CSS source code - obfuscation, minification, compression and encryption
- 06.07.22IT / Safety Connection not secure, problem with Lets Encrypt - how to fix expired 09/30/2021 DST Root CA X3, remove it manually and install ISRG Root X1. Example on MS Windows 7
- 08.07.21IT / Misc How to make a free translation for a website without an API, translate documents in Google Translate