What Is CLS (Cumulative Layout Shift)? Core Web Vitals Guide | CrestVox Studio

CLS (Cumulative Layout Shift) is one of Google’s three Core Web Vitals metrics. It measures the visual stability of a web page during loading by quantifying how much the visible content unexpectedly shifts position while the page is loading or while the user is interacting with it. A high CLS score indicates that elements on the page are jumping around as content loads, which disrupts reading and can cause users to accidentally click the wrong element. Google’s target for a good CLS score is 0.1 or below.

Why CLS Matters for User Experience and Rankings

Layout shifts are one of the most frustrating aspects of a poor web experience. You start reading a paragraph and suddenly the text jumps down because an image loaded above it. You move to click a button and it shifts just as you tap, causing you to click something else entirely. CLS quantifies these experiences and Google uses the CLS score as part of the Page Experience ranking signal through Core Web Vitals. Pages with poor CLS scores are at a disadvantage in rankings compared to visually stable equivalents, and the user experience issues that cause poor CLS directly increase bounce rates and reduce conversion rates.

How CLS Is Calculated

CLS is calculated by multiplying the impact fraction (the portion of the viewport affected by a shift) by the distance fraction (how far the shifted element moved as a proportion of the viewport height), then summing these scores for all unexpected layout shifts during the page’s lifetime. The result is a unitless score, where 0 represents perfect stability and higher numbers indicate more instability. Google classifies CLS scores as: Good (0 to 0.1), Needs Improvement (0.1 to 0.25), Poor (above 0.25).

Common Causes of High CLS

• Images without width and height attributes — The most common cause of layout shift. When an image loads without defined dimensions, the browser does not reserve space for it, causing content below the image to shift down when the image appears.
• Ads and embeds — Ad slots that do not have reserved space cause significant shifts when ads load. Always define minimum dimensions for ad containers.
• Dynamically injected content — Banners, cookie consent bars, or “new content available” notices that insert above existing content cause layout shifts.
• Web fonts loading late — When a page initially renders with a fallback font and then switches to a web font with different metrics, the text can reflow and cause shift.
• Animations that change layout properties — CSS animations that change width, height, margin, or padding of elements trigger layout recalculations that affect CLS.

How to Fix CLS in WordPress

The most effective fix for CLS is ensuring all images, videos, and iframes have explicit width and height attributes set in the HTML. This allows the browser to calculate the correct aspect ratio and reserve the appropriate space before the media loads, preventing layout shift entirely. Modern WordPress themes and Gutenberg image blocks include these attributes by default when images are inserted through the media library.

For web fonts, using font-display: swap reduces invisible text (FOIT) but can cause shift when the font swaps in. Using font-display: optional prevents shift entirely by using only fonts already cached by the browser. Preloading critical web fonts reduces the delay before they load, minimising the shift.

Performance plugins like WP Rocket and LiteSpeed Cache include features for deferring non-critical resources and managing ad placeholder space that help reduce CLS. At CrestVox Studio, CLS optimisation is part of every WordPress performance project. We audit CLS causes using Chrome DevTools and Google Search Console and implement fixes that deliver stable, visually solid page loads that support both rankings and conversion. Combine CLS fixes with LCP and INP optimisations for a complete Core Web Vitals improvement programme.