How CLS is calculated
CLS adds up how much visible content moves and how far, across the life of the page. A small shift of a big element can count as much as a big shift of a small one. It has no unit of time. It is a score, and lower is better.
Shifts that happen right after a tap or click are not counted against you, since the visitor expects a response.
Cause one: images and videos without dimensions
If the browser does not know an image's size, it reserves no space. When the file arrives, everything below it gets pushed down. Add width and height attributes to every image, or use the CSS aspect-ratio property. Do the same for embedded videos and maps.
Cause two: late banners, popups and notices
Cookie notices, promo bars and chat prompts that appear after the page renders can push content down. Reserve a fixed space for them, or let them overlay the content with fixed positioning instead of inserting them into the flow. Announcement bars that load from a script are a common source.
If you run a sticky header that changes height when scrolling, test it. A header that shrinks can shift the content below.
Cause three: fonts and dynamic content
When a fallback font is replaced by a custom one with different proportions, lines wrap differently and text moves. Choose a close fallback, preload the main font, and limit the number of weights. Content injected by scripts, such as review widgets or embedded feeds, should sit in a container with a set minimum height.
Find and verify the problem
In PageSpeed Insights, the diagnostics section lists elements that shifted. Chrome DevTools Performance panel has a layout shift track showing exactly when each one occurred. Highlight those elements in the page and ask what was loading just before they moved.
After fixes, test on a slow mobile profile, since shifts hide on fast connections. Make this a standing check whenever you add a new widget or banner.
A short checklist to work through
Go down the page from the top. Does the header change height after load? Do images have set sizes? Does any banner slide in after the first paint? Do embeds such as maps, videos and review widgets sit in boxes with a fixed height? Are web fonts swapping noticeably?
Fix one item, retest, and move on. A common outcome is that two or three fixes bring a poor score into the good range, because layout shift tends to come from a few repeat offenders rather than a hundred small ones.
Keep in mind that sliders, carousels and rotating testimonials can create shifts every time they change slides, if slides differ in height. Give the container a fixed height or use images with the same proportions so nothing below it moves.
Common questions
Can a good-looking site have bad CLS?
Yes. Design quality and layout stability are separate. A polished page can still jump if sizes are not reserved.
Do ads cause CLS?
They can, if the ad slot has no fixed size. Set a container height matching the biggest ad that may appear.
How long until Search Console shows improvement?
The report uses real-visit data from about a month, so gains appear gradually.
This guide is general information. Search engines change how they work and their guidelines; check Google's current documentation for your situation. Nobody can guarantee a ranking.