Cumulative Layout Shift (CLS) is a Google Core Web Vitals metric that measures a user experience event.
CLS became a ranking factor in 2021 and that means it’s important to understand what it is and how to optimize for it.
What Is Cumulative Layout Shift?
CLS is the unexpected shifting of webpage elements on a page while a user is scrolling or interacting on the page
The kinds of elements that tend to cause shift are fonts, images, videos, contact forms, buttons, and other kinds of content.
Minimizing CLS is important because pages that shift around can cause a poor user experience.
A poor CLS score (below > 0.1 ) is indicative of coding issues that can be solved.
What Causes CLS Issues?
There are four reasons why Cumulative Layout Shift happens:
- Images without dimensions.
- Ads, embeds, and iframes without dimensions.
- Dynamically injected content.
- Web Fonts causing FOIT/FOUT.
- CSS or JavaScript animations.
Images and videos must have the height and width dimensions declared in the HTML. For responsive images, make sure that the different image sizes for the different viewports use the same aspect ratio.
Let’s dive into each of these factors to understand how they contribute to CLS.