Prevent Layout Shift from Images, Fonts and Dynamic Content

Prevent layout shift by reserving space and controlling when content changes the page geometry. The most frustrating movement often happens just as someone tries to click. Start by observing the page during loading and interaction rather than only reviewing a finished screenshot.

Reserve media space

Provide dimensions or an appropriate aspect ratio for images and video. Keep placeholder and final media geometry consistent. Responsive layouts need to preserve the intended relationship between width and height at every breakpoint.

Test missing and slow images. A card whose image disappears on failure can change the entire grid height. Decide whether the design should retain a stable placeholder or intentionally collapse the space in a controlled way.

Review font transitions

Different font metrics can change line wrapping and push content down. Inspect headings, navigation, and buttons during font loading, especially at narrow widths where one extra line has a large effect.

Use the framework's supported font loading approach and appropriate fallbacks. Avoid treating a font-loading setting as a universal fix; compare the actual fallback and final layout. The correct choice depends on the typeface and rendering strategy.

Keep dynamic insertions predictable

Consent banners, promotions, review widgets, and asynchronously loaded notices can move important content. Prefer stable reserved regions or overlays designed with accessible dismissal and focus behavior when that fits the product.

For expandable content initiated by the user, make the interaction clear and preserve a sensible reading position. Do not use animation as a substitute for correct layout. Smooth movement can still be disruptive if it shifts the target someone is trying to activate.

Verify at different states

• Load the page with a slow network and disabled cache.
• Test long titles and localized text.
• Open and close navigation and disclosures.
• Simulate missing media and delayed widgets.
• Check a narrow mobile viewport and larger text settings.

Use performance tooling to identify layout-shift sources, then confirm the visual behavior manually. A metric improvement should correspond to a page that feels steadier. Track shared components so a fix in one template also benefits other routes without creating new clipping or overflow.

Further reading

The CLS guide provides measurement context. Pair this work with LCP image optimization so images become both faster and more stable.