Why your website jumps around while it loads

Key takeaways

A website jumps while loading because parts of the page arrive late and push everything else out of the way. Images without set dimensions, banners inserted at the top, late-loading fonts and embedded widgets are the usual causes. Visitors lose their place or tap the wrong thing. Google measures this as Cumulative Layout Shift (CLS). The fix is to reserve space for anything that loads late.

• A CLS score below 0.1 is Google's threshold for a stable page.
• Images and embeds without reserved space are the most common cause.
• Banners and pop-ups should overlay the page, not push it down.
• Layout shift is felt most on phones, where one jump moves the whole screen.

What is layout shift?

Layout shift is the unexpected movement of visible page content after it has appeared, caused by other elements loading or resizing.

Cumulative Layout Shift is Google's measure of it: a score that combines how much of the screen moved and how far. A score below 0.1 is rated good, and above 0.25 is poor. It is one of the three Core Web Vitals, alongside measures of loading and responsiveness.

• How website speed affects customer experience and conversions
• Core Web Vitals for business websites

Why does layout shift matter to customers?

Layout shift matters because it makes people fail at what they were trying to do. A visitor reaches for the phone number and a banner moves it. They start reading and the paragraph drops down the screen. At a checkout, a jump at the wrong moment can mean pressing the wrong button.

Published case studies show the effect on behaviour. Yahoo! Japan reported a 15% uplift in page views per session after fixing layout shift. The Italian publisher GEDI reported an 8% reduction in bounce rate after cutting CLS by 77%.

• Does a slow website damage trust in your brand?

What causes a page to jump?

Pages jump when the browser does not know how much room something will need until it arrives.

• Images and videos without width and height set.
• Cookie banners and promotional bars inserted above the content.
• Web fonts that swap in with different proportions.
• Adverts, maps, review widgets and other embeds with no reserved space.
• Content added by scripts after the page has rendered.

• Is your cookie banner slowing your website down?
• Web fonts and page speed: brand type without the wait
• Third-party scripts: the hidden reason your site is slow

How do you stop a page jumping?

Tell the browser in advance how much space each element needs, and keep late arrivals out of the content's way.

• 1. Set width and height on every image and video.
• 2. Reserve a fixed space for each embed and advert.
• 3. Show banners and notices as overlays, usually at the bottom.
• 4. Choose fallback fonts with similar proportions to the web font.
• 5. Add new content below what the visitor is looking at, never above.

• Optimise website images for speed and search

When is movement acceptable?

Movement is acceptable when the visitor caused it. Opening a menu, expanding an answer or adding an item to a basket all change the layout, and that is expected. Google's measure excludes shifts that follow a user's action within half a second.

A perfect score of zero is not necessary. A small shift low on the page that nobody sees is not worth a day of work.

What does this look like in practice?

A pattern we see on service sites: a promotional bar and a cookie banner both load a second after the page, each pushing the header down. On a phone, the Call button moves twice in the first two seconds, and visitors who tap early open the menu instead.

Fixing the bar's height in advance and moving the banner to a bottom overlay stops the movement without removing either. Across client work at Global Bridge Labs (GBL), we have seen a 2.4x enquiry rate from conversion changes like these.

• See client work
• Website Design & Development for UK businesses

Layout shift checklist

• Load each key page on a phone and watch the first three seconds.
• Check CLS for the page in PageSpeed Insights.
• Set dimensions on all images and videos.
• Reserve space for embeds and widgets.
• Move banners and bars to overlays.
• Re-check after adding any new widget.

• The website speed scorecard: score your site in an hour
• How to test website speed the way customers feel it

Next step

A page that holds still feels faster and more trustworthy than one that does not, whatever the stopwatch says. We will find what is moving yours.