The page that moves while you are reading it

Why it is worse than slowness

A slow page is frustrating and predictable. A page that moves is actively hostile, because it takes an action you chose and applies it somewhere else.

The common experience is reaching for a link and pressing something else as the page settles. On a phone that can mean a call placed, a form submitted, or an unwanted download.

It also breaks reading. A paragraph that moves down mid sentence forces the reader to find their place again.

A slow page is frustrating and predictable. A page that moves takes an action you chose and applies it somewhere else.

Cause one: images without dimensions

When a browser does not know how large an image will be, it leaves no space. Everything below sits where it will go until the image arrives and pushes it down.

Declaring width and height lets the browser reserve exactly the right space before the file has downloaded.

This is the single most common cause and the easiest fix on the entire list. The same applies to videos and embedded frames.

This is the commonest cause and the easiest fix on the entire list, and the same applies to videos and embedded frames.

Cause two: late arriving blocks

A cookie notice, a promotional banner, an advert or a notification that inserts itself above existing content after the page has drawn.

Anything inserted above the fold pushes everything down. If such a block must exist, reserve its space from the start or place it where nothing sits below it.

Overlays that float above the page rather than pushing it do not cause shift, which is one reason they are preferred for notices.

Overlays that float above the page rather than pushing it do not cause shift, which is one reason they are preferred for notices — see cookie banners.

Cause three: fonts

When a downloaded font replaces the fallback, the text reflows if the two are different sizes. Lines rewrap and everything below moves.

Choosing a fallback with similar proportions reduces it considerably, and adjusting the fallback metrics to match can remove it almost entirely.

The alternative is invisible text until the font arrives, which trades a shift for a delay and is usually the worse trade.

Cause four: content added by script

Anything that measures the page and then changes it. Sliders that resize after loading, panels that expand, layouts recalculated once fonts are ready.

Each one moves content after the visitor has started reading. The cure is to size the container before the script runs.

This is another reason a mostly static page tends to perform well without anybody tuning it.

Testing it

Load your page on a phone with a throttled connection and watch it settle. Anything that jumps is what the measurement will catch.

Do it on a deep page and on a page with a form, because those are where a mis-tap costs you something.

Reload with an empty cache. A cached page loads too fast to reveal the problem, which is why the site owner never sees it.

• Load on a phone with a throttled connection
• Empty the cache first, or it will assemble too fast to move
• Watch the page settle and note anything that jumps
• Test a page with a form, where a mis-tap costs you
• Test with any cookie notice enabled
• Repeat after adding anything that loads late

How ours avoid it

Every image on a site built here declares its dimensions, nothing is inserted above existing content after load, and there is no third party block arriving late by default.

Every page passes a check that runs before anything publishes, validated against Google Search Essentials and modern web standards, and layouts are checked for overflow across a range of widths.

The result is that the structural causes are removed at build rather than measured afterwards and chased.

Every image declares its dimensions and nothing is inserted above existing content after load, so the structural causes cannot arise.

What counts as a good result, as published

• Cumulative Layout Shift is rated good at 0.1 or less web.dev, Core Web Vitals
• Cumulative Layout Shift is rated poor above 0.25 web.dev, Core Web Vitals

Figures are from the source named beside each one, as published there. None of them is a claim about this product.