A moving button is often the victim of a layout shift, not its cause. An image, banner, font, validation message, or embed above it may change height after the page appears. Record the movement and inspect what was inserted or resized immediately beforehand.
Reproduce the moment, not just the page load
Test a narrow mobile viewport with a fresh session. Wait for cookie controls, then scroll to the form, focus a field, and trigger a harmless validation error. Repeat with a returning session because consent banners and cached fonts can change the sequence.
Record whether the shift occurs during initial load, after scrolling, or after an interaction. A load-only test can miss a late chat widget or an embedded booking form. The web.dev CLS guide describes common causes such as unsized media and dynamically inserted content. Its measurement exclusions do not make every movement comfortable for a user.
Find the upstream change
Use a browser performance recording with layout-shift information and the visual timeline. Compare the frame before and after the movement. The highlighted element may be what moved rather than what caused it. Look upward in the layout and inspect new content or changed dimensions.
| What appears just before movement |
Likely repair |
Important constraint |
| Image or video |
Reserve the correct aspect ratio |
Avoid stretching the media |
| Promotional strip |
Allocate space or choose a non-disruptive placement |
Keep the message dismissible where appropriate |
| Web font |
Reduce metric mismatch and test fallback rendering |
Preserve legibility and brand requirements |
| Form error text |
Plan room for feedback and allow wrapping |
Never clip or hide the error |
| Third-party booking widget |
Use a measured responsive container |
Test long content and translated labels |
Explanatory worksheet for your own test evidence. No customer results are represented.
Stabilize space without freezing the whole design
For an image, supply dimensions that describe its actual proportions and allow its displayed width to respond to the container. For an embed, test its real loaded height across the widths customers use. A fixed height that works on desktop can clip a mobile calendar or leave its submit control inaccessible.
A reserved slot can help when the content has predictable dimensions. For genuinely variable content, design the surrounding flow to tolerate expansion and make the change understandable. Do not absolutely position every control as a shortcut; translated labels, browser zoom, and error messages will expose the weakness.
Suppose an email field receives a two-line validation message. Keep the message next to the field, associate it accessibly, and leave enough layout flexibility for the submit button below. The goal is a usable form, not a low number achieved by removing necessary feedback.
Test business states separately
A product page may shift when a customer selects a variation with a longer price label. A lead form may grow when conditional questions become relevant. Document which changes are deliberate responses and which arrive unexpectedly. Even when an interaction-related change is excluded from a metric, check that focus remains understandable and the customer does not tap the wrong control.
Treat slow mobile LCP separately. Reserving image space may solve movement without making the image arrive faster. Likewise, aggressive script delay can improve one lab score while making a widget appear abruptly after a customer begins typing.
Accept the repair with real content
Test short and long field labels, one or several errors, accepted and declined consent, and a slow third-party response. Check keyboard navigation and browser zoom. Confirm there is no horizontal overflow and that all messages remain readable.
Keep before-and-after recordings of the same state. Use the slow WordPress site guide for wider performance diagnosis, or ask HandL WP to repair the shifting layout. The finished page should remain predictable while preserving everything a visitor needs to complete the task.
References checked September 25, 2026. Illustrations and examples are explanatory, not customer case studies.