The Layout That Jumps While Loading

Everybody has experienced this

You open a page, start reading, and the text jumps down because an image appeared above it.

Or you reach for a link and the page moves in the instant between deciding and tapping, so you land on something else and have to go back.

It is one of the most irritating things a website does, and it is almost entirely avoidable.

It is also one of the three things Google now measures, which has given it attention it never previously received.

Why it happens

The browser draws the page as things arrive rather than waiting for everything.

That is the correct behaviour and it is why you see text before images.

The problem comes when something arrives that the browser had not allowed room for. An image with no stated dimensions occupies no space until it loads, at which point it appears and pushes everything below it down.

The browser is not at fault. It was never told how much room to leave.

The usual causes

• Images without width and height set on them.
• Adverts and embeds in a container with no fixed size.
• Web fonts that reflow text when they swap in.
• Banners and notices inserted at the top after loading.
• Content added by scripts, such as reviews or feeds.
• Anything appearing above what the visitor is reading.

The last is the key distinction. Something appearing below the visible area shifts nothing anybody can see, and costs nothing.

Reserve the space

The fix for images is old, simple, and was widely abandoned.

Setting width and height attributes on an image lets the browser calculate the proportion and hold that space open before the file arrives.

This fell out of practice when responsive design arrived, because fixed dimensions seemed to conflict with images that scale. Modern browsers resolved that: the attributes are used to work out the ratio, and the styling still controls the displayed size.

So the correct approach is both. Set the attributes on every image, and let your stylesheet size it.

On a template-driven site this is often a matter of correcting the template once rather than editing individual pages.

Anything in a box needs a box

The same principle applies to everything that loads late.

An embedded map, a video player, a review widget, or an advert should sit in a container with a defined height or aspect ratio, so the space exists before the content does.

The container may briefly be empty, which looks like a placeholder and is entirely acceptable.

What is not acceptable is the alternative, where the surrounding page rearranges itself around something that appeared without warning.

Where the height genuinely varies, reserve a sensible minimum. Shifting from a reserved two hundred pixels to a needed two hundred and forty is a small movement rather than a jump from nothing.

The cookie banner problem

Worth naming because it is nearly universal and rarely considered.

A consent notice loaded by a script and inserted at the top of the page pushes the entire document down at the moment it appears.

The visitor has usually begun reading by then, so the shift is maximally disruptive.

Two fixes work. Overlay the notice rather than inserting it into the flow, so nothing moves. Or reserve its space in the initial layout so it fills a gap that was already there.

The same applies to promotional bars, delivery notices, and anything else inserted above the content after the fact.

A worked example

A local news site had a stability score in the poor range and could not identify why, since their images were sized correctly.

Watching a slowed-down recording of the page loading showed three separate movements.

A cookie notice inserting itself at the top after about a second. An advert slot expanding from nothing to a large block partway down. And the headline reflowing when the web font arrived, because the fallback was a different width.

They overlaid the cookie notice, gave the advert slot a fixed minimum height, and chose a fallback font with similar metrics to the web font.

The score moved into the good range within the usual reporting delay.

More usefully, complaints about tapping the wrong article stopped, which nobody had connected to a performance measurement.

Watching it happen

The most effective diagnostic, and it needs no tools.

Record your screen while loading the page on a throttled connection, then play it back at reduced speed.

Every shift becomes obvious, in order, and you can see exactly what arrived and what moved.

Browser auditing tools will also identify the specific elements contributing most to the shift, which is faster if the cause is not visually obvious.

Do this on mobile rather than desktop, since narrow layouts stack vertically and a single unreserved image pushes everything below it rather than sitting beside it.

Fonts and the invisible reflow

The subtlest cause and the one people miss after fixing everything else.

Showing text in a fallback font and swapping to a web font when it arrives is good practice and prevents invisible text.

But if the fallback has different proportions, the swap reflows every line, and a headline that occupied two lines may suddenly occupy three, moving everything beneath it.

The remedy is choosing a fallback with similar metrics, and adjusting its size and spacing so the two occupy near-identical space. It is a small piece of work and it removes a shift that is otherwise very hard to attribute.

The counter-case

Not all movement is a fault, and treating every shift as one leads to strange decisions.

Movement a visitor caused is expected: an accordion opening, a menu expanding, a form revealing a field after a selection. Those are responses to an action and nobody is surprised by them.

The measurement reflects this and does not count shifts that follow a user interaction closely.

There is also a limit worth respecting. Reserving space for something that frequently does not appear leaves a permanent gap, which is a real cost paid on every visit to avoid an occasional shift.

The question is whether the movement was unexpected and whether it happened while somebody was reading or reaching.

The fix

1. Set width and height on every image, and keep the styling.
2. Give embeds and adverts a container with a fixed ratio.
3. Overlay the cookie notice instead of inserting it.
4. Reserve space for anything a script adds above content.
5. Match your fallback font's metrics to the web font.
6. Record the load on mobile and watch it slowly.

The first item alone resolves the majority of cases on an ordinary business site.

Designing before the content exists is covered in designing the page before the content exists.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.