Measuring unexpected movement on a page
Cumulative Layout Shift, or CLS, measures unexpected changes in the position of visible content. Google’s CLS explanation describes the current metric in terms of the largest burst of qualifying layout shifts. It is one of the Core Web Vitals. The practical issue is familiar: a reader loses their place, or a button moves just as they are about to select it. Visual stability matters throughout use, not only while the first screen is loading.
Example: a service image arrives after the text
If a page initially reserves no space for a large image, the surrounding content may move when that image loads. Supplying suitable dimensions or an aspect ratio allows the layout to reserve the intended area. The same principle applies to embedded forms, videos and other components that arrive later. In a 3D section, reserve the scene’s space before the renderer starts and ensure a fallback image uses compatible proportions. This approach supports a stable reading experience while the visual enhancement becomes available.
Look beyond the element that moved
The text or button that shifts may be the victim rather than the cause. An image above it, a newly inserted banner or a font change may have altered the layout. Use performance diagnostics to identify the sequence, then reproduce it with realistic loading conditions. Refined IT can check shared templates so one fix addresses the repeated component instead of patching each page separately. Include delayed third-party content in the review, because a clean test on a fast connection can miss movement encountered by other visitors.
Common questions about cumulative layout shift
Is every animation a layout shift?
No. The metric has specific rules. Transform-based visual effects can avoid changing document layout, but motion should still be appropriate and controllable.
Does lazy loading automatically fix CLS?
No. A lazily loaded image still needs reserved space. Delaying an image without dimensions can leave the same layout problem waiting further down the page.
Related definitions
- 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.
- Lazy loading — Deferring an asset until it is approaching the area the visitor is viewing. Main above-the-fold imagery should be prioritised rather than delayed unnecessarily.
- CSS — Cascading Style Sheets: rules that control the presentation of a web page, including its typography, spacing, colours and responsive layout.
- Largest Contentful Paint — A loading measure that reports when the largest visible content element is rendered. Large hero images, slow delivery and render-blocking resources can delay it.
Related SEO guides
Reserve space for dynamic content and images so the visitor’s intended control does not move unexpectedly.
For help connecting these decisions with your website, explore our SEO services or start with an SEO audit.
Put it into practice
Explore our technical seo service or talk with Refined IT about applying this to your website or business systems.