Performance

`perf/layout-shift`

Nothing moves after it appears - space is reserved for images, embeds, ads and late content (CLS 0.1 or less).

Why

Content that jumps makes people lose their place or tap the wrong button. CLS adds up the unexpected shifts; "good" is 0.1 or less at the 75th percentile. The usual causes are images without dimensions, embeds and ads that load late, web fonts that swap with different metrics, and banners inserted above the content.

Fix

Give images and videos width and height (perf/img-dimensions), embeds and ad slots a min-height or aspect-ratio that stays even when empty, fonts a metric-matched fallback (size-adjust), and put cookie banners and toasts over the content or at the bottom instead of pushing it down. Animate with transform, never top or height.

Examples

/* good: the slot keeps its space whether the ad loads or not */
.ad-slot { min-height: 250px; }
.video-embed { aspect-ratio: 16 / 9; width: 100%; }

Sources

Facts

Id: perf/layout-shift
Severity: moderate
Check: browser needs a rendered page: audit --url
Applies to: page
Same problem in: Lighthouse cls-culprits-insight
Taught by the skill: fe-core-web-vitals Core Web Vitals
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/layout-shift