What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is a Core Web Vital metric that quantifies how much a webpage's content moves around unexpectedly while users interact with it. It measures the sum of all individual layout shift scores that occur during the page's lifetime, with a score ranging from 0 to infinity (though 0.1 or lower is considered good).
When users visit a webpage, elements like images, ads, or fonts sometimes load asynchronously, causing visible content to shift position. A banner ad loading mid-scroll, a font rendering change, or embedded video resizing can all trigger layout shifts that frustrate users and harm their experience.
Why CLS Matters for Your Campaigns
Google officially ranks CLS as one of three Core Web Vitals affecting search rankings since June 2021. For UK media buying agencies, this means your campaigns performing on poorly-optimised landing pages will see reduced visibility in search results, directly impacting ROI.
Layout shifts also increase bounce rates and reduce conversion rates. When users encounter jarring visual shifts, they're more likely to leave before completing desired actions – whether that's signing up for newsletters, clicking through to products, or engaging with ad content. This is particularly damaging for high-value campaigns targeting affluent UK demographics who expect premium digital experiences.
How CLS Works
CLS doesn't measure all layout shifts equally. Only unexpected shifts count. Users intentionally scrolling or resizing windows don't trigger the metric. The algorithm calculates: (impact fraction × distance fraction) for each shift, then sums these values across the page session.
Common culprits include: - Unoptimised images and video embeds without fixed dimensions - Ad units loading without reserved space - Third-party scripts and widgets - Web fonts loading after page render - Dynamic content injections
Practical Optimisation
For media agencies optimising landing pages and microsite campaigns, reserve space for known content in advance using CSS or aspect-ratio boxes. Specify image dimensions explicitly. Load fonts early using font-display properties. Test third-party scripts aggressively – many ad networks and analytics tools contribute significantly to CLS issues.
Use tools like Google PageSpeed Insights, Chrome DevTools Lighthouse, or Web Vitals Chrome Extension to audit your campaign landing pages. Monitor CLS across your entire media mix, particularly for display advertising and programmatic campaigns where ad load times vary.
CLS in Campaign Planning
When briefing developers teams or evaluating vendor landing pages, explicitly require CLS scores below 0.1. Include performance benchmarks in campaign contracts. This ensures your paid media investment isn't sabotaged by poor technical implementation.