Why Does My Website Jump Around While Loading? How to Fix CLS
Fix unexpected page movement by finding what shifts, reserving image and embed space, and checking fonts and content changes on mobile.
Part of our guide: The Complete Guide to Website Speed for Business Owners
A website that moves just as someone tries to tap a button can cause wrong clicks, lost reading position and uncertainty about whether the page is ready.
Cumulative Layout Shift, or CLS, measures unexpected visual instability. Google’s CLS explanation identifies 0.1 or less as a good result at the 75th percentile of visits. That is a metric threshold, not permission to ignore a frustrating movement that a customer reports.
Reproduce the jump before editing
Record the page, device and moment the shift happens. Does it occur during the initial load, after scrolling, when a banner appears or when a form reports an error?
A screenshot shows only one state. A short recording or browser performance trace can reveal which element arrived and what it displaced. Avoid including personal information in recordings shared with suppliers.
Test a fresh visit as well as a repeat visit. Cached assets can make the problem less obvious on a developer’s usual browser.
Common causes to investigate
Images without reserved dimensions, late-loading embeds, inserted content and changes in font metrics can all contribute. The CLS optimisation guide explains these causes and the importance of checking shifts beyond initial loading.
The fix should address the cause. Hiding the whole page until everything finishes may disguise movement while creating a different loading problem.
Use the wider Core Web Vitals guide to check that a stability improvement has not made loading or responsiveness worse.
A before-and-after layout example
Consider an illustrative service page with a heading, a photograph and an enquiry button.
Before: the photograph has no reserved space. The heading and button appear close together. When the photograph loads between them, the button moves down just as someone reaches for it.
After: the page reserves the photograph’s expected proportions from the start. The picture fills that space when available, while the button remains in a predictable position.
This is an explanation of the layout, not a measured client case study. A developer can use image width and height information, or appropriate aspect-ratio rules, while preserving responsive sizing.
Our image preparation guide covers choosing appropriate dimensions. Reducing file size alone does not guarantee the layout will stay still.
Audit each source of late content
Use a small worksheet for the pages that matter most.
| Area | Check | Desired result |
|---|---|---|
| Hero image | Is its space reserved before download? | Main content stays in place |
| Reviews or map | Does the embed have a predictable container? | Neighbouring text does not jump |
| Promotional banner | Is space planned or presentation non-disruptive? | Important controls remain reachable |
| Fonts | Does the fallback differ substantially? | Text does not unexpectedly reflow |
| Form feedback | Is the result clearly associated with the form? | Errors remain readable and usable |
Some movement is intentional and understandable, such as opening an accordion. Do not make every component rigid simply to remove motion. Focus on unexpected changes and preserve accessible interaction.
Check fonts and media together
A page can reserve image space correctly and still reflow when a different font arrives. Review the font choice, fallback and loading behaviour with the developer. Our web-font performance guide gives that decision more context.
Lazy-loaded images also need dimensions. Deferring a download does not remove the need to plan its space; see when to use lazy loading.
Keep the design’s real requirements in view. Cropping every image to the same shape may simplify implementation, but important product details or people should not disappear without an editorial check.
Verify the fix on realistic journeys
Repeat the original sequence on mobile and desktop. Scroll through the page, open relevant controls and trigger form validation. Include slower conditions where delayed assets are easier to observe.
Keep the before-and-after evidence with the change record. Laboratory results can support diagnosis, while field data reflects visitor experience over time and may take longer to show a release’s effect.
Ask a person unfamiliar with the page to use it as well. They may notice a misplaced tap target that the team has learned to avoid.
Aim for a dependable page
A stable page helps customers read, choose and act without chasing the interface. Combine targeted layout fixes with the broader website speed work and mobile usability checks.
Check that content and controls stay where visitors expect them while the page loads and they use it.
Thinking about your own rebuild?
Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.
