How to Eliminate Cumulative Layout Shift (CLS) and Stop Your Page Jumping

## The short answer

Cumulative Layout Shift (CLS) happens when content moves unexpectedly while a page loads or runs. You eliminate it by reserving space for everything that arrives late: set explicit dimensions on images, videos and embeds; reserve space for ads and dynamically injected content; avoid inserting content above existing content; and prevent fonts from causing reflow. A good CLS score is 0.1 or lower at the 75th percentile of real users. Every fix comes down to one principle — never let an element push other elements out of the way after the user can see them.

## What CLS actually measures

CLS scores the unexpected movement of visible elements. The score for each shift is the fraction of the viewport affected multiplied by the distance things moved, and the metric reports a representative session window. Crucially, it only counts *unexpected* shifts — movement within 500ms of a user interaction is excused, because users expect the page to respond when they click.

## Cause 1: Images and media without dimensions

The most common cause. When an image has no declared width and height, the browser does not know how much space to reserve, so text and other elements jump down when the image finally loads.

Fixes:

- Always set `width` and `height` attributes (or an `aspect-ratio` in CSS) so the browser reserves the correct space.

- Apply the same discipline to `