Image tags, iframes, videos, embeds without height and width definition (unknown dimensions)
Web fonts causing FOIT/FOUT ( How to Optimize Web Fonts )
JavaScript content injected
Actions waiting for a network free russian number for whatsapp indiap response before updating DOM
Handling asynchronous CSS files and inline CSS.
These are the most common and frequent causes, an important note that I would like to point out is the issue of web hosting and the response of resources that influence all the parameters of the Core Web Vitals.
How to calculate the CLS of a web page
Cumulative Layout Shift is measured with this formula:
layout shift score = impact fraction * distance fraction
The impact fraction measures the impact of unstable elements on the window area between two frames, see this image:
The element in the image that takes up half of the viewport, this means that in the next frame, the element moves down by 25% of the height of the window.
The dashed red rectangle indicates the union of the visible area of the element in both frames, which, in this case, is 75% of the total window, so its impact fraction is 0.75.
The distance fraction is the maximum distance that any “unstable” element is moved within the frame (horizontally or vertically).
In the example given, the “unstable” element has moved 25% of the window height, which makes the distance fraction 0.25. So, in this example the impact fraction is 0.75 and the distance fraction is 0.25.
For a great user experience, Google recommends a CLS score lower than 0.1 .
Tools to measure CLS
CLS can be measured with several tools, including:
Lighthouse (Chrome extension or via developer tools);
Core Web Vitals (chrome extension);
All the tools are valid and you can choose the one you prefer. In my opinion each one has something that differentiates it from the other, often I use more than one to take specific data.
The convenience of Semrush Site Audit for example is to have the overall calculation of all pages and the percentage of the status:
