What Cumulative Layout Shift Measures
Cumulative Layout Shift (CLS) measures how much visible content moves around unexpectedly while a page is loading and being used. When a heading jumps down because an image loaded above it, or a button shifts sideways because an ad slot expanded — that is layout shift. CLS is one of the three Core Web Vitals that Google uses to evaluate visual stability.
Google considers a CLS score of 0.1 or less to be good. Between 0.1 and 0.25 needs improvement. Anything over 0.25 is poor. CLS is unitless — it is calculated by multiplying the fraction of the viewport that shifted by the distance elements moved. The score accumulates across the worst “session window” of layout shifts during the page visit.
Why CLS Matters
Layout shift is one of the most frustrating experiences on the web. When a visitor is about to tap a link and the page shifts, they end up tapping something else entirely. When they are reading a paragraph and the text jumps, they lose their place. Unlike slow loading, which visitors can patiently wait through, layout shift actively disrupts what they are doing.
CLS also matters for conversions. Unexpected movement erodes trust — it makes a site feel unstable and unprofessional, even if the content itself is high quality.
What Causes Layout Shift
Images without dimensions. When an image tag does not specify width and height attributes, the browser cannot reserve space for it. The image loads, expands to its natural size, and pushes everything below it down the page. Images are the most common source of CLS on WordPress sites.
Late-loading embeds and ads. Third-party content like ads, video embeds, and social widgets often load after the initial page render. When they inject themselves into the layout without pre-reserved space, surrounding content shifts to accommodate them.
Web fonts causing reflow. When a web font loads and replaces the fallback font, text may resize or reflow if the two fonts have different dimensions. This causes a layout shift across every text element using that font.
Dynamic content injection. JavaScript that inserts banners, notification bars, cookie consent dialogs, or other elements into the visible area of the page after initial render causes layout shift. Content inserted above the viewport’s current scroll position is particularly disruptive.
Lazy-loaded images without placeholders. Lazy loading delays image downloads until they approach the viewport. If no placeholder reserves the image’s space, the layout shifts when the image appears.
How to Recognize a CLS Problem
CLS is often easier to see than to measure. If you load your own site on a slower connection and notice content jumping around, you likely have a CLS problem. But the definitive source is your field data — check Google Search Console or the field data section of PageSpeed Insights.
Lab tools can help identify specific shifting elements. In Chrome DevTools, the Performance panel highlights layout shifts with a “Layout Shift” marker. PageSpeed Insights shows which elements contributed to CLS in its diagnostic section. Look for large images missing dimension attributes, font swaps causing text reflow, and late-injecting third-party content.
Further Reading
- Cumulative Layout Shift (web.dev) — Google’s complete guide to understanding and measuring CLS.
- Optimize Cumulative Layout Shift (web.dev) — Practical techniques for reducing layout shift on your pages.