What layout shift is
Cumulative Layout Shift (CLS) adds up how much visible content moves unexpectedly and how far. It is unitless; web.dev says to aim for 0.1 or less for at least 75% of page visits, and treats above 0.25 as poor. A shift you cause by tapping something is expected: shifts within 500 milliseconds of a user interaction are excluded. The shifts that count are the ones nobody asked for: a banner that appears above the text you were reading, an image that loads and pushes the button down, a font that swaps and re-wraps a paragraph.
- Ask whether the page jumps while loading or later, after scrolling.
- Note which element moves and which element arrived just before it did.
Images, video and embeds without a size
The most common cause is an element that does not say how big it will be. web.dev advises setting width and height attributes on images and video so the browser reserves the space, or using the CSS aspect-ratio property, and keeping height: auto in the stylesheet so images stay responsive. For responsive sets, keep all candidate images at the same aspect ratio. For ads, iframes and other late content, reserve space with min-height or aspect-ratio, adjusted by screen size, start with the smallest likely size or the most common historical size, and do not collapse the slot if nothing arrives, because removing the space is itself a shift.
- Check every image above the fold for explicit dimensions.
- Check embeds and consent banners that insert themselves above existing content.
- Prefer placing late content lower on the page, where shifts affect less.
Fonts and animation
Web fonts cause shifts when a fallback font is replaced by the real one and the text re-wraps, or when invisible text appears late. web.dev suggests font-display: optional, a fallback font chosen to be close in size, tuning it with size-adjust and the ascent, descent and line-gap overrides, and preloading critical fonts. Animations that change top, left or box-shadow trigger layout work; use transform (translate, scale, rotate) instead, which does not move other content.
- Compare text height with the fallback and with the web font.
- Replace animated top or left with transform.
Why the lab and the field can disagree on shifts
In real-visitor data CLS is measured throughout the full life of the page, while Lighthouse and similar tools usually capture only the initial load. A good lab result with a poor field result therefore often points at shifts after load, such as lazy-loaded content appearing as someone scrolls, late personalised content or a consent prompt. Shifts inside iframes may be missed by in-page measurement tools although they are in the field data. Check the page while scrolling slowly, not just after load.
- Scroll the page slowly on a phone-sized window and watch for jumps.
- Test the first visit, when consent prompts and cookies are fresh.
What fixes it and how the paid job is accepted
The repair gives each moving element its space and removes the cause of the jump, without hiding content or delaying a feature. In our one-page job (posted test price from £495, untested, quoted after we run the page) you choose one metric; for layout shift the acceptance is the median of five lab runs at or below 0.1 on two agreed profiles, a second profile that is no worse, every agreed element still present and your sign-off. It does not cover shifts inside third-party components you will not change, or a promise about ranking. Send the page address and which element jumps in your first enquiry, not credentials.
- A layout defect that appears only at one screen width is the responsive layout job instead.
Sources and limits
- web.dev: Optimize Cumulative Layout Shift Checked 2026-10-11.
- Aim for CLS of 0.1 or less at the 75th percentile, above 0.25 is poor; set width and height or aspect-ratio on images and video; reserve space for ads and embeds with min-height or aspect-ratio and do not collapse it; font swaps can shift text and can be reduced with font-display, a close fallback and size-adjust; animate with transform rather than top, left or box-shadow; field CLS covers the whole page life while lab tools usually capture only the load; shifts within 500 ms of a user interaction are excluded.