Reserve space before asynchronous content arrives
Reserve space for late-loading content and test whether moving elements disrupt the next action. An image arriving above a form can move its submit button just as a visitor tries to click.
Layout shifts near an inquiry button can cause a visitor to lose their place or select the wrong item. The source may be a late image, font change, inserted banner or expanding widget. Fixing the score without testing the actual interaction can leave the frustrating behavior intact.
A worked example
A hypothetical booking page displays a button before a late promotional panel is inserted above it. The button moves just as a visitor tries to select it. Reserving the panel’s space or changing its placement addresses that experience more directly than reducing unrelated image sizes elsewhere.
How to apply it
- Record the shifting elements and the content that appears immediately before the movement.
- Reserve dimensions for media and review late banners, embeds and font behavior.
- Retest the full loading and interaction sequence on narrow screens and slow connections.
What the result can establish
Report the affected template, verified cause and observed layout behavior. Review CLS under its actual measurement definition; not every perceived movement contributes identically. Acceptance includes a stable, usable inquiry control, not only a better aggregate number.
Reference: web.dev: optimizing CLS.
Supporting documentation
web.dev: optimizing CLSW3C WAI: validating formsGoogle: technical requirements