Cumulative Layout Shift, or CLS, measures unexpected movement of visible page content. A heading pushed down by a late banner or a button moving beneath a customer’s finger can indicate a stability problem. CLS helps identify disruptive layout changes rather than judging the visual design’s style.
Distinguish expected and unexpected movement
CLS is a Core Web Vital, with a good field result at or below 0.1 at the 75th percentile. The metric uses a defined session-window approach and treats some recent user-input-related shifts differently. That means a score is not a simple count of all animations or page changes. Its SEO relationship comes through page experience; lowering CLS does not guarantee rankings. Stability also matters independently when someone is reading, comparing information or trying to complete an enquiry.
Watch beyond the initial load
Record a page while images, fonts, embeds and notices arrive, then scroll through the whole page and use key controls. Reserve suitable dimensions or aspect ratios for media and stable spaces for dynamic content. Inspect fallback font behaviour and content injected above existing text. Use layout-shift debugging to identify affected elements and likely causes, remembering that the element moving may not be the element creating the problem. Compare tests with field evidence because a quick lab run may miss shifts later in a visit.
Test an image failure as well as a slow success. The reserved area and fallback content should remain understandable when the resource never arrives, avoiding both disruptive movement and unexplained empty sections.
Reserve space before content arrives
For example, a hypothetical Perth clinic may add appointment notices above a booking button once an external service responds. Reserving a suitable notice region or placing the message within an expected interaction can avoid pushing the active control away. Do not preserve a huge empty gap on every screen simply to chase a metric. Test the design with and without the message, slow image loads and different text sizes. Stable layouts should remain readable and useful in all these states.
A technical SEO review can connect measured shifts with their template causes.
Common questions
Does a zero CLS score mean perfect UX?
No. It only describes measured unexpected layout movement. A stable page can still be slow, hard to read or impossible to use by keyboard.
Do image dimensions really matter?
Yes. Appropriate dimensions or aspect ratios let the browser reserve space before an image arrives, reducing one common source of unexpected movement.
Terms in this guide
- Cumulative Layout Shift — A measure of unexpected layout movement while a page is being used. Reserving dimensions for images and other content helps reduce disruptive shifts.
- Core Web Vitals — A set of user experience measures covering loading, responsiveness and visual stability. The current metrics are Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift.
- Responsive design — A layout approach that adapts content and controls to different screen sizes, input methods and viewing conditions.
- UX design — User experience design: understanding people’s tasks and shaping the structure, content and interactions that help them complete those tasks.
Related SEO guides
Apply this to your website
Explore Technical SEO, SEO Audits for help planning and implementing the relevant changes, or discuss your website with Refined IT.