perf/layout-shift

Dlaczego

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.

Poprawka

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.

Przykłady

/* 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%; }

Źródła

• web.dev, Cumulative Layout Shift
• web.dev, Optimize Cumulative Layout Shift
• Chrome for Developers, Layout shift culprits insight

Przeczytaj w terminalu

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