SEO

CLS (Cumulative Layout Shift)

Q: What is CLS (Cumulative Layout Shift)?

CLS measures visual instability — how much layout elements shift unexpectedly during the loading process. It is a core metric of the Core Web Vitals. Thresholds: below 0.1 ”good”, 0.1–0.25 ”needs improvement”, above 0.25 ”poor”.

Q: What causes layout shifts?

Four common causes: (1) images without width/height attributes, (2) dynamically injected adverts, (3) web fonts that trigger FOUT/FOIT, (4) content blocks inserted client-side.

Q: How do you fix CLS?

Through fixed dimensions: set width/height on all images and iframes, reserve ad slots with min-height, handle web fonts with font-display: optional or preload, and avoid late content injections above the fold.

Q: Why is CLS also relevant to UX?

Otherwise users click on the wrong elements. A classic example: a user wants to click ”Order”, at the last moment an advert slides over it and the advert is clicked by accident. Optimising CLS improves the conversion rate.

Also known as: CLS, Cumulative Layout Shift, Layout shift

Cumulative Layout Shift (CLS) is the Core Web Vitals metric that measures the cumulative visual stability of a web page — how much layout elements still shift unexpectedly during loading and the first seconds of use. High CLS values typically arise from images loading in without reserved space, adverts loading late, or cookie banners inserted dynamically. Target: below 0.1 for ”Good”, 0.1–0.25 for ”Needs improvement”, above 0.25 for ”Poor”.

What CLS actually measures

The value is calculated as impact fraction × distance fraction for each unexpected layout shift — how large is the area that moves (impact) and how far does it move (distance). Multiple shifts are added together. A CLS value of 0.1 corresponds roughly to ”10 % of the visible area has moved by 100 % of the screen height within the layout stability session”. Layout changes triggered by the user (clicking ”Read more”) do not count — only unexpected shifts without user input.

The most common CLS killers

Images without width/height attributes — before loading the height is 0, afterwards they pop up.
Iframes without reserved space — YouTube embeds, maps, adverts.
Web fonts without size-adjust — text jumps when the font is swapped.
Dynamically inserted adverts at the top of the page.
Cookie banners that push the page downwards.
Asynchronously loaded content that inserts layout above existing content.

Optimising CLS — standard solutions

Width and height on every image — the browser reserves the right space before loading.
Aspect-ratio CSS for responsive images: aspect-ratio: 16 / 9.
Min-height for iframes and advert areas — secure placeholders.
Font-display: optional or size-adjust in @font-face.
Cookie banner as an overlay, not as a push element.
Append async content below rather than inserting it into the existing layout.

Example from practice

Example: A magazine domain had a CLS of 0.32 (Poor). Audit: hero image without an explicit height (jumps while loading), newsletter banner below it (loads asynchronously and pushes content down), web font without fallback tuning (text jump when the font is swapped). Three fixes across 2 sprints: explicit image dimensions, min-height on the banner slot, web font fallback with size-adjust. After 6 weeks: CLS 0.04 (Good). Observed secondary effect: clicks on the wrong buttons (caused by layout shifts) fell noticeably, and the bounce rate improved by 6 %.

Frequently asked questions

What is CLS (Cumulative Layout Shift)?

CLS measures visual instability — how much layout elements shift unexpectedly during the loading process. It is a core metric of the Core Web Vitals. Thresholds: below 0.1 ”good”, 0.1–0.25 ”needs improvement”, above 0.25 ”poor”.

What causes layout shifts?

Four common causes: (1) images without width/height attributes, (2) dynamically injected adverts, (3) web fonts that trigger FOUT/FOIT, (4) content blocks inserted client-side.

How do you fix CLS?

Through fixed dimensions: set width/height on all images and iframes, reserve ad slots with min-height, handle web fonts with font-display: optional or preload, and avoid late content injections above the fold.

Why is CLS also relevant to UX?

Otherwise users click on the wrong elements. A classic example: a user wants to click ”Order”, at the last moment an advert slides over it and the advert is clicked by accident. Optimising CLS improves the conversion rate.

Used in Rankmio for

CLS audit in the SEO check

Go to the feature →

Last updated: 2026-06-17 · Browse all glossary entries