CLS Is the Core Web Vital Nobody Profiles

Two of the three Core Web Vitals get profiled properly. Largest Contentful Paint gets a waterfall and a preload tag, Interaction to Next Paint gets a main-thread trace, and Cumulative Layout Shift gets a lazy-loading plugin and a shrug. Partly that is because CLS is the one a lab test routinely under-reports, so the number in a local audit rarely matches the one Google is scoring.

What CLS measures, and what the session window hides

The definition on web.dev’s CLS reference is worth reading literally: CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page. Two phrases do the work. “Largest burst” means the score is not a total — shifts group into session windows, a burst being a run of shifts less than one second apart within a window of at most five seconds, and your CLS is the worst window rather than the sum. “Entire lifecycle” means measurement does not stop at load.

Each shift scores impact fraction multiplied by distance fraction: how much of the viewport moved, times how far it moved relative to the largest viewport dimension. The thresholds are 0.1 or less for good and above 0.25 for poor, at the 75th percentile, segmented across mobile and desktop. One rule matters most for diagnosis: shifts within 500 milliseconds of a user input are not counted, because a layout change you asked for is not unexpected.

Four causes account for most real-world CLS

Google’s guide to optimising CLS names five categories, and four of them cover nearly everything seen on an ordinary content or commerce site:

• Images without dimensions. Always include width and height attributes on images and video, or reserve the space with CSS aspect-ratio. Browsers derive the ratio from the attributes and hold the box before the bytes arrive.
• Ads, embeds and iframes without dimensions. Reserve space with min-height or aspect-ratio, and where the final size is unknown, place the late-loading element lower in the viewport so a wrong guess costs less.
• Dynamically injected content. Cookie banners, notification bars and related-product strips inserted above existing content. Use fixed-size containers, or make the insertion follow a user action so the 500-millisecond exclusion applies.
• Web fonts. Both the invisible-text and unstyled-text flashes shift layout. The recommendations are font-display: optional, explicit fallback fonts, the override descriptors that close the metric gap between fallback and web font, and preloading the critical face.

None of those is a caching problem, which is why CLS is the metric least improved by a performance plugin. Be clear about what caching plugins actually move before expecting this number to follow.

Breakpoints change the shape of the problem

A shift that is severe at 390 pixels can be invisible at 1440, because impact fraction is measured against the viewport. A sidebar advert that displaces nothing on desktop stacks above the article on mobile and pushes the body down. That is the most common reason a developer cannot reproduce a field failure: they are testing the layout that does not shift.

WordPress 7.1, released 19 August 2026, changed the leverage here. Block themes can now define their own mobile and tablet breakpoints in theme.json, overriding the defaults for responsive styles, so the widths at which a layout reflows are a deliberate choice rather than an inherited one. The roadmap to WordPress 7.2, published 18 September 2026 and targeting early December, names enhanced responsive images among its focus areas. The markup that decides whether space is reserved is moving into theme configuration.

Fixes that hold versus fixes that hide

Reserving space is a fix. A fixed pixel height on a container whose contents vary is a disguise that fails in two directions — taller content overflows or clips, shorter content leaves a gap, and the first breakpoint where the assumption breaks brings the shift back. The reliable version is a ratio, not a height: aspect-ratio on media, a minimum height on slots whose content is unknown, and intrinsic dimensions on every image the CMS outputs.

The other disguise is hiding content until everything has loaded. That trades a layout shift for a worse LCP, because the largest element paints later, so a practical LCP deep dive belongs before any move of paint timing to flatter a different number.

Measure it where it happens

Lab tools measure the initial load; the Chrome User Experience Report measures the full page lifetime. That gap explains a green local audit sitting beside a failing field score, because shifts from lazy-loaded content, infinite scroll or an interaction more than 500 milliseconds after input never appear in a lab run. Field data is the score; lab data is a hypothesis about it.

Start with the templates carrying the most third-party and conditional content: the home page, the post template with its in-content embeds, and any archive with advertising. The field-first discipline that changed when INP replaced FID applies here for the same reason — the metric is defined over what real visits do, not what a synthetic run reaches.