Why your page jumps around: layout shifts and CLS

Useful context

• Choose the page and action where unexpected movement occurs.
• Record whether it happens during loading, scrolling or a later interaction.

How it works

1. Capture the movement in context

   Note the device, browser and exact page address. A short recording can be more useful than a screenshot of the final settled page. Keep personal notifications and customer information out of the recording, and describe what you were trying to read or select.

2. Identify what arrives late

   Watch for a photograph appearing above existing text, a notice pushing everything down or an embedded calendar changing height. Record the likely trigger without treating it as a confirmed technical diagnosis. More than one element can cause movement at different points in the visit.

3. Ask for space to be planned

   The developer can review image dimensions, reserved areas for embeds and font-loading behaviour. The goal is to give content a predictable place rather than hide it entirely. A useful booking widget should not be removed without considering the customer's alternative route.

4. Retest the original journey

   Use the same page and action after the change, including scrolling to the affected section. Compare the visible behaviour with the performance evidence. Check that reserving space has not introduced a huge empty gap or made the page harder to use on a smaller screen.

What to check

• The reported movement is reproducible or clearly described with timing.
• The proposed change addresses the arriving content or layout dependency.
• The page remains useful and stable during the relevant customer journey.

Sources and further reading

Platform features can change. Check the provider’s current guidance before changing a live service.

• Improve Cumulative Layout Shift