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
A common scenario on South African WordPress sites is a homepage that loads a hero banner image without declared dimensions. The browser initially renders the page with no space reserved for the image, then when the image file loads, everything below it shifts downward. If a user starts reading the headline or reaches for the call-to-action button during this moment, the experience is disruptive. 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, eliminating the shift entirely.
Google Adsense and third-party banner advertising are another frequent cause of high CLS on South African publisher and news sites. 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.
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.