<\/span><\/h3>\nCLS is measured in real-time and is calculated by scoring content shifts for each unexpected layout shift that occurs during the entire lifecycle of a web page.<\/p>\n
To calculate a layout shift score, Google multiplies the impact fraction by the distance fraction.<\/p>\n
The impact fraction represents how much of the viewport space an unstable element occupies between two frames.<\/p>\n
In Google’s example, we can see that the text element occupies 50% of the original viewport space but is „moved” down by 25%. Between the two frames, the element occupies 50% plus 25% of the viewport, resulting in an impact fraction of 75%.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
![\"cum](\"https:\/\/www.gun.ro\/wp-content\/uploads\/2020\/12\/cls-example-layout-shift-e1603215271862.png\")
<\/p>\n
Example of layout shift – Google Developers <\/span><\/p>\nThe distance fraction in this case is the distance that the unstable element has undergone. In the example used, the element was moved by 25% of the „height” or the height of the viewport. In summary, Cumulative Layout Shift is measured using a score that is calculated as follows: Fraction of impact x Fraction of distance = Layout Shift Score<\/span><\/p>\n![\"manualul](\"https:\/\/www.gun.ro\/wp-content\/uploads\/2020\/12\/cls-example-distance-shift-e1603215357134-300x225.png\")
<\/p>\n
Using the same example as above, the calculation would look like this: 0.75 x 0.25 = 0.1875 Google has set the CLS score standard for all pages to be less than 0.1 for all pages of a site. <\/span><\/p>\nWe conclude that the score obtained from the example above is above the limit imposed by Google and would result in a poor score.<\/span><\/p>\n![\"cls](\"https:\/\/www.gun.ro\/wp-content\/uploads\/2020\/12\/cls-scores-e1603215566588-300x87.png\")
<\/p>\n
Similar to this calculation, Google makes dozens of calculations for each unexpected layout shift that occurs throughout the lifetime of a web page. So the more elements you have that modify the content within the viewport, the lower the score will be.<\/span><\/p>\n<\/span>What Impact Does CLS Have on Your SEO Strategy?<\/span><\/h3>\nThe essence of Core Web Vitals is to ensure a pleasant and uninterrupted experience on a web page for your website visitors\u2014both on mobile and desktop.<\/p>\n
A good CLS score can help assure Google that users will have a pleasant experience and won\u2019t be frustrated when visiting your page. They won\u2019t encounter moments where the site misbehaves, leading them to another page unintentionally, or make accidental orders.<\/p>\n
A good user experience (UX) helps you achieve all desired outcomes from SEO: traffic, conversions, top positions on Google, and ultimately, revenue.<\/p>\n
According to a study by Screaming Frog, URLs in the #1 position on Google were 10% more likely to get a PASS rating for Core Web Vitals compared to URLs in the #9 position. Of course, this study refers to existing web pages, which may not yet be updated to comply with Core Web Vitals standards.<\/p>\n
Looking at the CLS results from Screaming Frog’s research, we see that less than half (46% of mobile links and 47% for desktop) have a \u201cGOOD\u201d score for the CLS metric. According to their calculations, the average score for CLS is 0.29 for mobile and 0.25 for desktop, indicating room for improvement until 2021 when Google will integrate and give more importance to Core Web Vitals.<\/p>\n
From their table, we clearly see that the top positions are dominated by sites with positive scores for CWV metrics, especially CLS for this example.<\/p>\n
![\"pozitii](\"https:\/\/www.gun.ro\/wp-content\/uploads\/2020\/12\/mobile-cls-data-by-position-e1603215670362-300x144.png\")
<\/p>\n
\n
\n
\n
\n
<\/span>How to Improve CLS Score?<\/span><\/h3>\nTo optimize the CLS score, Google recommends testing using tools such as Page Speed Insights or Lighthouse, both of which have the same page testing module for indexing.<\/p>\n
You can also use other tools such as:<\/p>\n