Your Website Jumps Around While Loading—How to Find and Fix Layout Shifts
You begin reading a page, then a late-loading image pushes the paragraph down. You move to tap “Book now,” but a banner appears and the button jumps under your finger. The page may load quickly in a speed test and still feel broken because its layout is unstable.
That instability is measured by Cumulative Layout Shift, or CLS—one of Google’s Core Web Vitals. CLS is not simply a design score. It is a record of unexpected visible movement: how much content moved and how far it moved. A good score is 0.1 or lower at the 75th percentile of real visits, but the useful goal is more concrete: reserve the right space before content arrives so the page does not surprise people.
The repair process should begin with evidence, not a blanket optimization plugin. First identify the shifting element and the thing that caused it to move. They are often different.
Confirm that the problem is really a layout shift
Reload the page on a mobile-size viewport with the network slowed down. Watch the header, hero, first call-to-action, form, product area, and any sticky or floating element. Repeat after scrolling and interacting because cookie notices, review widgets, chat launchers, recommendations, and ads may appear later.
Open Chrome DevTools, record the page in the Performance panel, and inspect the Layout shifts track. Purple diamonds and clusters reveal when movement occurred. Select the largest cluster first, review the affected elements, and replay the trace. Chrome’s Rendering panel can also highlight shifted regions in purple while you reproduce the problem.
Do not assume the highlighted element is the cause. A paragraph may be highlighted because an image above it gained height. A button may move because a web font changed the width of its heading. Trace upward in the layout until you find the element that introduced or changed space.
Understand why lab and real-user CLS can disagree
A Lighthouse run observes one controlled page load. Real users may trigger shifts after scrolling, opening menus, accepting consent, changing variants, or waiting for personalized content. Mobile screens, slower connections, cached assets, logged-in states, and third-party scripts create different conditions.
Compare lab evidence with field data rather than treating either as complete. Webcurry’s guide to a good PageSpeed score but a slow real website explains why controlled tests and real visits often tell different stories. Segment affected URLs by template and device before changing the whole site.
Cause 1: images and videos arrive without reserved space
An image with no known dimensions occupies little or no space until the browser downloads it. When its height becomes known, everything below moves. The most reliable fix is to provide intrinsic width and height or reserve the correct aspect ratio in the component before the file arrives.
Check hero images, product galleries, blog thumbnails, logos, maps, video players, iframes, and lazy-loaded media. Responsive images can still reserve space: the displayed width may change while the aspect ratio remains known. Make sure mobile and desktop crops use predictable containers rather than allowing each asset to invent a new height.
If the hero is also your Largest Contentful Paint element, use the deeper workflow in Why Your Homepage Hero Image Is Ruining Mobile Performance. Do not lazily load the above-the-fold hero merely to address CLS; reserve its space and prioritize it correctly.
Cause 2: a web font changes the size of finished text
The browser may first render a fallback font, then swap to the chosen web font. If their character widths, line heights, or weight metrics differ, headings wrap onto new lines and move the page. The effect is especially visible in large hero copy, navigation, price labels, and buttons.
Use a well-matched fallback, reduce unnecessary font families and weights, and inspect the CSS font-display behavior. Where you control the font face, font metric overrides can make the fallback occupy dimensions closer to the final font. Preload only critical font files you know are used above the fold; preloading every weight competes with more important requests.
Test with local fonts disabled and with an empty cache. If the shift disappears when the final font is already cached, you have strong evidence that font replacement—not the image or animation—is responsible.
Cause 3: banners, forms, and notices are inserted above existing content
Cookie notices, shipping promotions, app-install banners, validation messages, stock alerts, and account prompts often appear after JavaScript runs. If they are inserted in normal document flow above the content, the page moves.
Choose the correct behavior for each element. Reserve a fixed or minimum-height region when the message is expected. Use an overlay when it should not reflow the page, while preserving keyboard access and avoiding content obstruction. For an inline error, reserve enough local space near the affected field instead of pushing the entire form only after submission.
If layout movement is happening inside a lead form, combine the CLS fix with the field-by-field tests in Website Visitors Keep Abandoning Your Form. A visually stable form still fails when validation is unclear or submissions are not confirmed.
Cause 4: embeds, ads, reviews, and chat widgets resize themselves
Third-party content is a frequent source of late movement because your page does not control when it initializes or what height it eventually requests. Common examples include maps, appointment calendars, video embeds, review carousels, social feeds, payment widgets, live chat, recommendation blocks, and advertising.
Give every embed a placeholder with a realistic minimum height or aspect ratio. When several sizes are possible, reserve the largest reasonable space and let the component use less without collapsing content above the fold. Load nonessential widgets after the primary content, but remember that delayed loading does not excuse unreserved space.
For advertising, Google’s current guidance on loading ads without damaging page speed recommends reserving space so an arriving ad cannot push content. If no ad is returned, decide whether the slot should collapse only when it is safely outside the visible reading area.
Cause 5: dynamic content changes after the first paint
Prices, inventory messages, delivery estimates, recommendations, personalization, and location-specific text may replace shorter placeholders with longer content. Product variants can change image proportions. Search results and filters can rebuild grids. The page needs a stable state for every expected response, not only the default one.
Use skeletons or placeholders that match the final component’s dimensions. Give cards consistent image ratios and reserve predictable lines for titles, prices, and badges. When content can legitimately expand after a user action, keep the change close to the control that triggered it; user-initiated movement is less harmful when it is immediate and expected.
Cause 6: animations change layout properties
Animating top, left, width, height, margin, or padding can force layout recalculation and move neighboring content. Prefer transform and opacity for visual motion because they can animate without changing the document’s layout in the same way.
A sticky header that changes height after scrolling is a common example. Keep the outer header slot stable, then transform or restyle its contents. Test focus states, expanded menus, accordions, and reduced-motion preferences so the visual fix does not create an accessibility problem.
Platform-specific repair paths
Wix: Inspect responsive sections, strips, repeaters, galleries, Wix App widgets, third-party embeds, and custom Velo code. Give embedded HTML and custom elements explicit dimensions. Check the mobile editor separately because elements hidden or rearranged on mobile can leave unexpected gaps or trigger late resizing. Remove duplicate effects before adding custom code to force stability.
WordPress: Test with optimization, cache, page-builder, popup, advertising, and font plugins isolated in a staging copy. Page builders frequently introduce background images, entrance animations, and responsive spacers; themes and plugins may then add a second layer. Confirm image dimensions in generated markup, regenerate thumbnails when ratios changed, and purge only the relevant cache after the fix.
Shopify: Use the web performance reports to identify templates affected by CLS, then test the published theme and a clean duplicate. Review product-media ratios, announcement bars, app blocks, reviews, recommendations, localization prompts, and variant changes. Shopify notes that apps, carousels, social feeds, analytics, and popup content can affect store performance, so compare the theme before and after each app initializes.
Cross-browser behavior can expose a different fallback font, widget, or viewport calculation. If the jump occurs only in Safari, follow the checks in Website Works in Chrome but Not Safari.
A practical acceptance test
Test the URL from an empty cache on a mid-range mobile viewport and a desktop viewport. Repeat with slow networking, then with cached assets. Scroll through the full page and trigger menus, consent, forms, variants, filters, chat, video, maps, recommendations, and checkout or booking handoffs.
The visible layout should remain stable before and after each delayed asset arrives. Image and embed containers should have reserved dimensions. Font replacement should not change line wrapping enough to move the primary content. Banners should use a planned slot or a non-obstructive overlay. Dynamic cards should not resize unpredictably. The largest layout-shift cluster in DevTools should disappear or become small enough to trace to an intentional interaction.
Deploy one group of fixes at a time and annotate the release date. Compare affected page templates in field data after enough real traffic accumulates. This makes it possible to distinguish a genuine improvement from normal variation.
Also confirm that performance scripts and consent changes did not break conversion measurement. Webcurry’s GA4 lead-attribution repair guide covers the path from the original traffic source to a confirmed lead.
Stable pages feel faster because they become trustworthy
A layout-shift fix is not successful because a plugin reports a green badge. It is successful when a reader keeps their place, a shopper taps the intended button, and a form does not move while someone is completing it.
Start with the largest shift cluster, identify the element that created new space, reserve that space before load, and retest the real interaction. If several templates and third-party tools are competing, contact Webcurry for a focused performance diagnosis that returns the exact culprit, the affected templates, and a verified repair plan.
Comments