It must have happened to you that you have entered a website and when you are waiting for the site to load completely and you are not scrolling, the site page is restless and unstable. In such a situation, you will leave that site with a bad experience and go to another more stable website.
Let me give another example. You have entered a site and there are various buttons. You click on one of these buttons, but the side button is mistakenly clicked. This is a very annoying situation for all of us and has no result other than the user’s anger.
These examples indicate a website’s poor CLS, one of the Google ranking factors that have been of great interest to SEO experts since 2021.
Table of Contents
What is CLS?
CLS Unexpected page element changes, loading.
In simpler language, CLS can be defined as changing the layout of the web page at the time of loading or after loading.
CLS is one of the important principles of Google’s Core Web Vital. As you know, user experience is one of the factors that are very important for the Google search engine, and not complying with it on the website will cause the site to drop in rank and even be penalized.
Therefore, not only CLS, but any other factor that can improve the UX or the user experience of site visitors, can directly or indirectly improve the SEO status of your site.
How to measure CLS
There are two methods to measure CLS: Google called the first method in the Lab and the second method in the Field.
The first method or in the Lab: In this method, the user experience is simulated in a controlled environment. One of the popular tools in this way is Google Chrome’s Developer Tools.
The field method: This method focuses on real user interactions with the site. The best tool to measure a website’s CLS is to use the PageSpeed Insights tool.
CLS standard size
The output of each CLS measurement method is a number that can be used to identify the website’s CLS status.
Good CLS
It is important to understand that this change in web page layout is not always bad. If the components change position during reading or any kind of user experience on the page, it will be considered a negative score.
But if the layout change is initiated by the user and he is involved in it, we should consider it a positive factor.
It is the user who gets more information by changing, for example, scrolling, clicking on a link, etc.
What is the cause of CLS increase and how to reduce it?
According to Google, there are five main reasons why CLS occurs:
- Images without correct dimensions
- Advertisements and I-frames without dimensions
- Dynamic content from SEO ranking factors based on CLS
- Web fonts that cause FOIT or FOUT
- Actions await a network response before updating the DOM
Pictures
One of the most important reasons for moving page elements is loading site images. If you specify the size of the images as shown below on the img tag when designing the site, this problem will be solved.
<img src=”sample.png” width=”300″ height=”200″>
JavaScript codes
Another common reason for increasing CLS is using JavaScript to change the site’s structure or content. If the JavaScript code for this task is executed after the page is fully loaded, the CLS value will be increased. To fix the problem, you should change your codes in such a way that the least structural change is done in the shortest possible time.
Lazy loading of CSS
CSS codes that specify the main structure of the page should be in the head section and have the smallest possible size. Doing this makes the general shape of the page clear in a short time.
Modify font settings
To modify font settings and optimize CLS, you must first familiarize yourself with the two terms Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT), which are two common modes for adjusting the font of texts displayed on website pages.
In FOIT mode, the text of the page will not be shown to the user until the font intended for the text of the website pages is loaded in the user’s browser. Setting the font in this mode, although it can help improve the CLS benchmark, greatly reduces the user experience because the user has to wait for a while for the text of the pages to be shown to him.
Therefore, it is recommended to set your font settings to FOUT. With this, the text of the pages will be displayed with a default font, and when the desired font is loaded on the user’s browser, the text font will be changed. But this issue causes sudden changes in the arrangement of various page elements and your CLS rank decreases.
To solve this problem, you must add the phrase rel=” preload” to the HTML code related to the font in the head of the site. Manipulation of HTML codes should be done by specialized professionals. Therefore, it is better to get help from an SEO specialist or a professional programmer before making changes to the relevant codes.
Specifying a specific size for displaying ads, embeds, and iframes
Of course, you can’t ask all the websites that display ads on your pages to place their ads on your site with certain dimensions. But to solve this problem, you have to choose a suitable layout in the format installed on your site and allocate it with a certain size to display ads. In this way, advertisements are limited to the same layout and their different sizes will not affect the movement of different elements of your site.