What is Cumulative Layout Shift (CLS)? How to Optimize It?
Cumulative Layout Shift (CLS) is an important metric for the web that measures how visually stable a page is. Visual stability is calculated by counting how many unexpected layout shifts occur before interacting with the page. Every time the content moves—not because you clicked a link but due to a layout shift—it is counted as a layout shift.
The sum of all these shifts determines the Cumulative Layout Shift (CLS) score.
How many times have you been reading an article and the content suddenly moved down because of new ads appearing? Or, have you tried to click a button, but a large new image pushed the content down, causing you to click something else?
All these examples are layout shifts caused by unstable elements changing their positions on the page.
Elements change their positions for various reasons. For example, a new image or an ad loading at the top of the screen (above the fold) forces some content downwards and pushes other parts of the page.
You can imagine how frustrating this experience is for users.
For this reason, Cumulative Layout Shift is one of the three Core Web Vitals metrics that assess user experience on a page. CLS was introduced as part of the Page Experience ranking factor in June 2021.
Cumulative Layout Shift accounts for 15% of the Page Speed score and is a highly relevant metric for both user experience and the new ranking factor. Therefore, it can also impact your SEO performance.
What is a Good CLS Score?
As explained, CLS is the sum of all unexpected content shifts that occur on a page. Depending on the total score, your CLS can pass or fail Google’s assessment.
A good CLS score is 0.1 or less.
A CLS score between 0.1 and 0.25 means performance “needs improvement.”
A CLS score above 0.25 is considered “poor.”
How to Find and Measure Cumulative Layout Shift (CLS)?
There are several ways to measure CLS using both lab and field data tools. Here are some popular tools you can use:
Lighthouse (Lab Data only)
PageSpeed Insights
Chrome DevTools (Lab Data only)
Chrome User Experience Report (CrUX)
Google Search Console – Core Web Vitals Report
WebPageTest (Lab Data only)
GTmetrix (Lab Data only)
How to Fix CLS Over 0.25 Seconds or 0.1 Seconds on Mobile and Desktop?
If you want to avoid large layout shifts on your WordPress site and reduce a poor CLS score (with or without plugins), you can:
Add width and height attributes to images and video elements
Preload (and optimize) fonts
Reserve space for ad slots by setting dimensions
Allocate space for embeds and iframes
Manage dynamic content carefully
Prefer CSS transform properties for animations