What is Cumulative Layout Shift?

What causes it

• Images and videos without width and height attributes or an aspect-ratio
• Web fonts swapping in at different metrics from the fallback, resizing text
• Banners, notices and embeds inserted above existing content after load
• Animating layout properties — top, left, width, height — instead of transform and opacity
• Content injected by third-party scripts with no reserved space

The fixes, all cheap

• Declare width and height on every image and video
• Use font-display: swap with a metric-compatible fallback
• Reserve space for anything that loads late
• Never insert content above what the user is already reading
• Animate with transform and opacity only

Why it is worth fixing even at a good score

CLS is the metric users feel most directly as incompetence. A page that scores acceptably but shifts once, visibly, at the moment someone taps, does more commercial damage than the number suggests.

Where this is covered in depth

A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.

Who wrote this

Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.