2 min readAn original planning guide. Use the linked primary documentation for platform details and the supported procedure for your environment.
Observe the sequence
Load representative pages under recorded conditions and watch movement before the final state. A screenshot after loading can hide the issue.
Locate the changing area
Use available performance tools and visual observation to connect shifts with images, fonts, embeds, notices, or inserted content.
Review space and timing
Check whether expected dimensions are reserved and whether late content changes the flow. Preserve accessibility and useful content while exploring fixes.
Retest meaningful scenarios
Compare loading, consent or notice states, navigation, and narrow layouts. Record the evidence for the change instead of promising a universal score.
Worked scenario
See the plan in practice.
An image loads above a form and moves the submit button. Reserving its intended space addresses the observed movement without removing the image.
Review your result
Your acceptance checklist
Movement recorded- Trigger identified
- Scenarios retested
Use these checks to identify gaps in your layout-shift investigation sheet. Assign an owner to any unresolved item before the next dependent step.
The terms behind the task
- Cumulative Layout ShiftCLS measures unexpected visual movement of page elements using a session-window method.
- Responsive imagesImage markup that lets a browser select suitable sources for layout size, resolution, or art direction.
- ViewportThe region through which a user views a web document, with layout and visual viewport concepts on mobile devices.
Primary references
For the underlying concepts and current platform details:
