cumulative layout shift is one of the fre Google core web vorss alongside largest contentful paint and interaction to next paint CLS is different to the other two metrics since it is measured by movement and not speed a layout shift is created when content moves around on a page after the initial load here's an example of a common layout shift the initial page content loads but then a banner appears below the navigation bar shortly after this shifts the original content down the viewport Google considers this as an unexpected movement on the page and Views it as a bad user experience for the visitor if content moves while a visitor is reading the user could lose their place resulting in a frustrating experience or an unintentional button click layout shifts are usually caused when resources load asynchronously or page elements are dynamically added to the page ahead of existing content not all layout shifts are bad if a shift is planned and occurs within 500 milliseconds of an interaction the shift will not count towards the CLS score on this page we have the option to hide the filters clicking this element hides the sidebar and enlarges the search results however since this layout shift is user initiated and occurs within the allowed time the CLS score remains at zero if a user interaction triggers a network request it's best to create some space right away and show a loading indicator to avoid an unpleasant layout shift when the request completes how is CLS defined CLS is a less intuitive metric to start optimizing due to how it's measured with the other two core web vitals we instantly understand that they are measured by speed however CLS measurements don't have a unit so where does this value come from a layout shift occurs anytime a visible element changes its position from one rendered frame to the next the value of a layout shift is calculated by multiplying two values impact fraction which measures how much of the screen area is impacted and distance fraction which measures how far an element has moved let's take a look at an example of how the score is calculated here we can see an element which takes up 50% of the view port in the next frame the element shifts down by 20% the total space taken between the frames is 70% so the impact fraction equates to 0. 7 the distance fraction measures how far the element has moved which we know is 20% of the screen height this leaves us with a calculation of 0. 7 * 0.
2 resulting in a CLS score of 0. 14 if there are multiple shifts occurring consecutively within a short period of time they are added together that's why CLS is called cumulative layout shift understanding the calculation isn't too important it's more important to understand the final score to know whether optimizations should be made any score under 0. 1 is considered good anything between 0.
1 and 0. 25 needs Improvement and a score above 0.
