What Is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is one of Google's three Core Web Vitals. It measures the visual instability of a web page by quantifying how much visible content moves unexpectedly during the entire lifespan of the page. Every time a visible element shifts position without a user interaction causing it, CLS accumulates a penalty. The score is calculated using a formula that considers both the fraction of the viewport affected and the distance elements move.
Google's CLS thresholds are: under 0.1 is good, 0.1 to 0.25 needs improvement, and above 0.25 is poor. A score of 0 means no unexpected layout shifts occurred. The metric is measured at the 75th percentile of user page loads and has been an official ranking signal as part of the Page Experience update since June 2021.
The most common causes of CLS include images without explicit width and height attributes (which cause the browser to reflow content when the image loads), advertisements or embeds that expand into reserved space or load without any reserved space at all, web fonts that cause text to reflow when the custom font replaces the fallback font, and dynamically injected content like banners or cookie notices that push existing content downward.
A high CLS score has a direct negative impact on user experience. When text or buttons shift just as a user is about to interact with them, they may tap the wrong element or lose their reading position. On mobile devices with slower connections and less processing power, which represent a substantial share of traffic for South African SEO campaigns, CLS tends to be worse than on desktop due to the sequential nature of mobile rendering.
Cumulative Layout Shift In Practice
The scenarios below are illustrative examples, not Juicy Designs client results. The outcomes described indicate the kind of effect that layout shift fixes typically produce, so treat them as indicative rather than measured.
Picture a typical South African WordPress homepage that loads a hero banner image without declared dimensions. The browser would initially render the page with no space reserved for the image, then when the image file loads, everything below it shifts downward. If a user started reading the headline or reached for the call-to-action button during this moment, the experience would be jarring. Adding width and height attributes to the img tag lets the browser calculate the image's aspect ratio and reserve the correct amount of space before the image loads, which would typically eliminate the shift entirely.
Or imagine a South African publisher or news site running Google AdSense and third-party banner advertising, another frequent cause of high CLS. Ads often load at different sizes than the space reserved for them, or load into slots that had no reserved space at all. The fix is to always set a minimum height on ad containers that matches the ad size being served.
Web font swapping also contributes to CLS when a fallback font with different character widths causes text to reflow once the custom font loads. Using the font-display: optional CSS property or adjusting the fallback font's metric overrides to closely match the custom font reduces or eliminates font-related layout shifts. Both Google Search Console and PageSpeed Insights identify which specific elements are causing layout shifts, making it straightforward to prioritise which issues to address first.
How Cumulative Layout Shift is measured
Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability, how much a page's content unexpectedly moves around as it loads. It quantifies the annoying experience of elements jumping, a button shifting just as you go to tap it, text reflowing as a late image or ad loads, by scoring how much visible content shifts position unexpectedly during loading. A lower score is better, with 0.1 or less considered good, and Google measures it from real users. Unexpected shifts are the target: layout changes a user initiates, like expanding a menu, do not count, but content that moves on its own because something loaded late does. Because CLS captures a genuine frustration that makes pages feel unstable and can cause mis-taps, it is one of the three Core Web Vitals Google uses to assess page experience, alongside loading (LCP) and responsiveness (INP).
How to reduce Cumulative Layout Shift
Reducing CLS means preventing content from moving unexpectedly as a page loads. The main causes and fixes are: images and videos without dimensions, which push content down when they load, fixed by setting explicit width and height (or aspect ratio) so the browser reserves the space; ads, embeds and iframes that load late, fixed by reserving space for them in advance; content injected above existing content, which shoves everything down, avoided by not inserting elements above what a user may be reading; and web fonts that cause text to reflow when they swap in, mitigated by careful font-loading. The principle throughout is to reserve space for anything that loads late, so the layout is stable from the start rather than rearranging as elements arrive. Measuring with real-user field data in Search Console, rather than lab scores alone, identifies which elements shift, since Google uses field data. Fixing CLS both improves the Core Web Vital and removes a real source of user frustration.
FAQ
What causes high CLS on a South African website?
The most common causes are images without declared width and height attributes, ads or embeds that load without reserved space, late-loading web fonts causing text reflow, and dynamically injected content appearing above existing content. Adding explicit size attributes to all images and using min-height on ad slots usually resolves the majority of CLS issues.
Is CLS a Google ranking factor?
Yes. CLS is one of three Core Web Vitals that became an official Google ranking signal as part of the Page Experience update in 2021. A score above 0.25 is classified as poor and can negatively influence rankings, particularly in competitive niches where comparable pages have better scores.
What causes high CLS?
Content moving unexpectedly as a page loads: images and videos without set dimensions, ads and embeds that load late without reserved space, content injected above what a user is viewing, and web fonts that reflow text when they swap in. Reserving space for anything that loads late is the main fix.