Fix Layout Shifts That Make Website Pages Jump in Wayland

A page that jumps while loading creates a different problem from a page that is merely slow.

The visitor can lose their reading position or tap the wrong control because something arrived late and pushed the layout around.

Identify what actually moved

Do not start by changing random CSS.

Reproduce the shift and find the element that changed size, position, or inserted itself after the initial layout.

Common causes include:

• images or video without reserved dimensions;
• web-font swaps;
• banners or notices inserted above existing content;
• third-party widgets;
• dynamically loaded components;
• embeds whose size is unknown at first render.

Reserve space when the size is known

If an image or media element has predictable dimensions, give the browser enough information to reserve that space before the asset finishes loading.

For images, explicit dimensions or equivalent aspect-ratio handling can prevent the page from collapsing to zero height and expanding later.

Treat late content carefully

Cookie notices, promotional bars, chat tools, and other injected elements should not casually push important page content after the visitor has started reading or interacting.

Sometimes an overlay is more appropriate. Sometimes the component needs reserved space from the start. The right choice depends on the function.

Watch font changes too

A fallback font and final web font may occupy different space.

If text reflows substantially when the preferred font arrives, the shift can move several elements at once.

Font loading and fallback choices deserve inspection when the cause is not an image or widget.

Test on small screens

The same movement can feel more disruptive on a phone because less content is visible at once and controls are closer together.

Google's Cumulative Layout Shift metric is designed to quantify unexpected visual movement, but the repair should still focus on the real element and the real interaction problem.

For a related next step, see Fix a Website That Is Frustrating to Use on a Phone in Rutledge and Fix Website Text That Is Too Small to Read Comfortably in Luray.

For authoritative guidance on this subject, see the W3C Web Content Accessibility Guidelines.

See Also

• Fix Website Layouts That Break on Tablets in LaGrange

Switchboard can help Wayland and Northeast Missouri businesses reproduce layout movement, identify its source, and stabilize pages that shift under the visitor while loading.