Finding and fixing Cumulative Layout Shift

Cumulative Layout Shift measures unexpected visual movement. The useful engineering task is to identify which late resource or interface decision changed geometry, not merely to reduce a laboratory score.

Collect field and laboratory evidence

Use real-user measurement to find affected templates and device classes, then reproduce them with performance tooling that identifies layout-shift entries. A quiet synthetic load may not trigger advertising, consent or personalised content.

Reserve media dimensions

Store image and video aspect ratios and provide width and height or an equivalent placeholder before download. Ensure responsive CSS preserves that ratio and handles legacy content with missing metadata.

Allocate dynamic regions

Give adverts, recommendations, banners and embeds a minimum or fixed slot appropriate to their expected state. Collapse unused space deliberately before the user reaches it rather than injecting a larger component above current content.

Control font changes

Choose fallback metrics close to the final web font, limit face and weight variants and decide how long text should wait. Inspect headings and navigation where a line-wrap change moves a large part of the page.

Exercise interaction and history

Open accordions, display validation, navigate back and restore cached pages. User-initiated movement may be excluded from the score within a limited window, but it still needs to remain understandable and close to the action.