CLS stands for Cumulative Layout Shift, and it is one of the central measurements of Core Web Vitals, used to assess the user experience on a webpage. Specifically, CLS measures how much the page layout shifts during loading. Large or sudden changes in the layout can be frustrating for users, as they can lead to unintentional clicks or reading disruptions. A low CLS score indicates a stable page, while a high score suggests many layout changes, which can degrade the user experience.
Why is CLS important?
A good user experience is crucial for both user satisfaction and SEO. Search engines like Google use CLS as part of their algorithm to rank pages. If a page has a high CLS score, it can result in poorer rankings in search results, as Google prioritizes pages that provide a stable and pleasant experience. Moreover, frequent layout shifts can disturb users and lead to a higher bounce rate, where visitors leave the page quickly.
How is CLS calculated?
CLS is calculated by measuring the sum of all individual layout shifts that occur over the page's lifetime. A layout shift occurs when a visible element changes position from one frame to the next. Two main factors are used in the calculation:
- Impact Fraction: This measures how much of the viewport is affected by the layout shift.
- Distance Fraction: This measures how far the elements have moved relative to the viewport.
CLS score is calculated by multiplying these two factors for each layout shift and summing the results.
How do you reduce CLS?
To improve your page's CLS score and ensure a stable user experience, you can follow these best practices:
- Size specification for images and videos: Make sure that all images and videos have defined dimensions (width and height), so the browser knows how much space they will use before they load.
- Avoid loading new elements over existing content: Load new elements, such as ads or dynamic content, beneath the existing content instead of over it.
- Predictable fonts: Use system fonts or preload custom fonts to avoid shifts in text layout when fonts load.
- Reserve space for dynamic content: Reserve space for dynamic content such as ads that can resize, so they don’t push other content around.
By focusing on minimizing layout shifts you can improve both user experience and your page rankings in search results.