Core Web Vitals CLS
Core Web Vitals CLS Optimization
What is a good CLS score?
To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
Example
The text element has moved by 25% of the viewport height
Impact fraction
In the image above there’s an element that takes up half of the viewport in one frame. Then, in the next frame, the element shifts down by 25% of the viewport height. The red, dotted rectangle indicates the union of the element’s visible area in both frames, which, in this case, is 75% of the total viewport, so its impact fraction is 0.75.
Distance fraction
In the example above, the largest viewport dimension is the height, and the unstable element has moved by 25% of the viewport height, which makes the distance fraction 0.25.
Layout shift score
The layout shift score is 0.75 * 0.25 = 0.1875.
Example
The green box has moved down by about 14% of the viewport
Impact fraction
The start position of the green box has been moved partially out of the viewport, the invisible area is not considered when calculating the impact fraction. The union of the visible areas for the green box in both frames (illustrated by the red, dotted rectangle) is the same as the area of the green box in the first frame—50% of the viewport. The impact fraction is 0.5.
Distance fraction
The distance fraction is illustrated with the purple arrow. The green box has moved down by about 14% of the viewport so the distance fraction is 0.14.
Layout shift score
The layout shift score is 0.5 x 0.14 = 0.07.
Example
The red dotted area is around 60% of the viewport’s area, the red arrow represents 10% distance move, the purple arrow represents 20% distance move, and the blue arrow represents 30% distance move
In the first frame above there are four results of an API request for animals, sorted in alphabetical order. In the second frame, more results are added to the sorted list. The first item in the list (“Cat”) does not change its start position between frames, so it’s stable. Similarly, the new items added to the list were not previously in the DOM, so their start positions don’t change either. But the items labelled “Dog”, “Horse”, and “Zebra” all shift their start positions, making them unstable elements.
Impact fraction
The red, dotted rectangles represent the union of these three unstable elements’ before and after areas, which in this case is around 60% of the viewport’s area (impact fraction of 0.60).
Distance fraction
The arrows represent the distances that unstable elements have moved from their starting positions. The “Zebra” element, represented by the blue arrow, has moved the most, by about 30% of the viewport height. That makes the distance fraction in this example 0.3.
Layout shift score
The layout shift score is 0.60 x 0.3 = 0.18.