Content Marketing Glossary

  • What is Cumulative Layout Shift (CLS)?

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a Core Web Vital that measures how much visible content unexpectedly shifts position as a page loads - images popping in without reserved space, ads injecting above existing content, fonts loading and reflowing text. Target is a CLS score under 0.1 at the 75th percentile. High CLS frustrates users and hurts rankings because it signals a page that moves around as users try to interact with it.

What causes layout shift

Five common causes:

Images without dimensions. Images loaded without explicit width and height attributes. The browser doesn’t know how much space to reserve, so content below shifts down when the image loads.

Ads loading into dynamic slots. Ad networks that inject content without reserved space. The single largest cause of CLS on ad-supported sites.

Lazy-loaded content without placeholder. Images or widgets loading below the fold that expand into their space as users scroll.

Web fonts loading with layout shift. Text renders in a fallback font, then reflows when the web font loads. FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text) both contribute.

Injected chat widgets, cookie banners, or announcements. Third-party scripts that add UI elements after initial render, pushing content around.

How CLS is calculated

Simplified formula: for each layout-shift event during the page’s lifetime, the impact fraction (how much of the viewport was affected) times the distance fraction (how far elements moved). These get summed over the page’s lifecycle, with specific handling for user-initiated shifts (which don’t count).

Key point: user-initiated shifts - clicking a ‘load more’ button, expanding an accordion - are excluded. CLS measures unexpected shift, not any shift.

How to reduce CLS

Seven standard fixes:

Set width and height on images and videos. Even if styling uses CSS to resize responsively. The attributes tell the browser the aspect ratio.

Reserve space for ads. Fixed-height ad containers with styled placeholders. When the ad loads, it fills the reserved space without pushing other content.

Reserve space for embedded content. Iframes for videos, maps, etc. should have explicit dimensions.

Use font-display: optional or swap with caution. Preload critical fonts; use font-display strategies that minimise reflow.

Inject dynamic content at the bottom. Chat widgets, cookie banners, notifications - if they must be injected, inject them at the bottom of the viewport, not above existing content.

Use CSS transform for animations. Animations using transform (translate, scale) don’t cause layout shift. Animations changing width, height, or position do.

Avoid inserting content above existing content. The single most impactful rule. If content must be inserted, it should push down content below it, not above.

Measuring CLS

Three measurement approaches:

Chrome DevTools Performance Insights. Highlights specific shift events with their impact scores.

PageSpeed Insights / Lighthouse. Reports CLS score plus identified contributing elements.

Real User Monitoring. Field CLS data from actual users. What Google uses for ranking.

CLS and ads

Three practical points for ad-supported sites:

Reserved ad slots are mandatory. Ad slots with no reserved space will destroy CLS as ads load.

Sticky or floating ads increase CLS risk. Ads that reposition during scroll can contribute to cumulative layout shift. Test carefully.

Ad network cooperation matters. Some ad networks are better about returning consistent sizes than others. Provider choice affects CLS.

How Penfriend-produced content affects CLS

Penfriend generates clean HTML with explicit image dimensions (when images are included) and no dynamic content injection. The generated content doesn’t contribute to CLS. Issues on sites using Penfriend content usually stem from the surrounding template (ads, chat widgets, third-party scripts) rather than the content itself.

Related terms