Fix Cumulative Layout Shift by finding what changes the layout unexpectedly and reserving the space that content needs before it arrives. Start with media dimensions, advertising slots, embeds, banners and font swaps. Record the page beyond its initial load, because a stable first screen can still move when later content appears.
CLS is good at 0.1 or less at the 75th percentile. It is a unitless measure of unexpected visual movement, not a delay in seconds. Making a page download faster may reduce the opportunity for a shift, but predictable layout is the more direct fix.
Understand the score before following the moving element
An individual layout-shift score equals impact fraction multiplied by distance fraction. Impact fraction covers the union of the unstable elements' old and new visible areas, divided by viewport area. Distance fraction is the greatest horizontal or vertical movement divided by the viewport's larger dimension. CLS groups qualifying shifts into session windows: shifts in a burst occur less than one second apart, and a window is limited to five seconds. The largest window contributes the final CLS value.
This matters on long-lived pages. The metric is not simply a running total that must grow forever as someone reads. However, a disruptive late burst can still determine the result even when the page looked stable during an initial loading test.
Some shifts following recent user input are excluded from CLS. The exclusion does not cover every delayed change that can be traced back to an earlier click. Nor does a metric exclusion establish that the movement is comfortable or accessible. Preserve the reader's position and control even when a particular change does not affect the score.
The browser can identify elements that shifted, but those elements may not have caused the shift. A heading pushed down by an advertisement is evidence of movement; the newly expanded advertisement is the dependency you need to fix. Investigate what changed around the affected area at the same moment.
For the broader assessment and field-data context, see Core Web Vitals for beginners. Keep a single recording's CLS separate from the p75 value across many visits.
Record loading and post-load behavior
Open Chrome DevTools and record a representative page journey in the Performance panel. Inspect its layout-shift events and the associated visual evidence. The Rendering tools can highlight layout-shift regions, making movement easier to spot while you reproduce it.
Include the conditions that expose late content: first visit, consent choice, a delayed advertisement, scrolling toward an embed and a font loaded without a warm cache. Test more than one viewport. A reserved desktop slot can still collapse or expand incorrectly on mobile.
Do not assume that every movement you see is a CLS event. Scrolling changes the viewport, while transforms can move a visual element without changing layout in the same way. Use the recorded events to distinguish the metric from a general impression that something moved.
Take notes about the cause and the victim. For example, record that a media container expanded and displaced the following heading, rather than simply listing the heading as the broken component. This makes the fix actionable for the person who owns the media integration.
Google's CLS optimization guidance covers these common causes and the distinction between load-time and post-load movement. Use the report to locate your case rather than treating every listed cause as present on your site.
Give images and video a predictable footprint
An image's width and height attributes let the browser derive an aspect ratio before the image data arrives. Responsive CSS can still make it fluid. The attributes should describe the asset's real proportions, not arbitrary numbers chosen to satisfy an audit.
This example reserves the shape of a landscape image while allowing it to fit its container. The referenced image is an illustrative project asset.
<img class="article-image"
src="/images/diagram.webp"
width="1600" height="900"
loading="lazy"
alt="A page layout with space reserved for media">.article-image {
display: block;
max-width: 100%;
height: auto;
}The lazy-loading attribute is appropriate only if this image is outside the important initial viewport. Do not copy it onto the LCP image. The reserved geometry helps stability, while the loading decision affects when the resource becomes available.
Art-directed images can use different proportions at different breakpoints. In that case, verify that the reserved space matches the source selected for the current layout. A desktop aspect ratio imposed on a portrait mobile asset can create cropping or a later size correction.
Inspect the wrapper as well as the image. Captions, borders and controls can add height after the image itself is stable. A media component needs predictable total behavior, not just two attributes on its inner element. The image optimization guide connects responsive selection with these layout decisions.
Reserve ad slots before the auction finishes
Advertising is difficult because the final creative may be unknown when the page is laid out. Decide which dimensions the slot supports at each breakpoint and reserve appropriate space in the initial layout. Coordinate the rule with the ad configuration instead of guessing a height in CSS.
These illustrative dimensions show the pattern, not recommended sizes for a particular advertising network.
.ad-slot {
min-height: 250px;
display: grid;
place-items: center;
}
@media (min-width: 64rem) {
.ad-slot {
min-height: 280px;
}
}A reserved minimum prevents a smaller or missing creative from pulling subsequent content upward only if the component retains that space. Automatically collapsing an empty slot after a no-fill response can create the very shift you intended to prevent.
There is a design tradeoff between reserved space and unused space. Resolve it deliberately, particularly above the fold. You might constrain the supported formats, choose a less disruptive location or retain a neutral container. Do not expand an above-the-fold slot to fit an unexpected creative without considering the content it displaces.
Test real slot states in an appropriate test environment: loading, filled, empty and failed. A mock that always returns one correctly sized creative cannot establish that the production integration is stable.
Keep embeds stable while their content initializes
Video players and social embeds can replace a small initial container with a taller interactive component. The solution is to define the expected geometry before the external code runs and preserve it during loading and failure.
A video-shaped wrapper can reserve space without requiring the player to load immediately. This CSS assumes a component whose intended display ratio is 16:9.
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #0c1222;
}
.video-frame > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}Not every embed has a fixed video ratio. A social post or interactive chart may have content-dependent height. Use the provider's supported sizing behavior, realistic initial space and a layout that does not place an unpredictable expansion above the reader's current position.
A facade can delay loading an expensive player until the visitor requests it. Preserve the same dimensions when replacing the facade. Also make the activation control keyboard accessible and provide an informative failure state if the external content cannot load.
The third-party script guide covers the execution cost that remains even after an embed's geometry is stable. Layout stability and responsiveness are related implementation concerns, but one does not prove the other is solved.
Stop banners and asynchronous panels from pushing content
Consent controls, announcement bars and recommendation panels often arrive after the page has already established its layout. Decide where they belong before rendering the surrounding content. Reserving space or using a deliberately designed overlay can avoid inserting an unexpected block above the article.
An overlay has its own usability obligations. It must not permanently obscure essential content, trap keyboard focus incorrectly or become impossible to dismiss at increased text size. Test narrow screens and zoom rather than assuming a fixed height works for every translation.
Recommendation areas should have predictable loading states. A skeleton that is much shorter than the eventual content still permits a shift. Use realistic line and image structure, or place the changing area where its expansion does not interrupt the reader's current task.
Avoid using a late JavaScript measurement to establish a size that can be expressed in initial CSS. That creates a race between first layout and the measurement script. Prefer a stable layout rule, then enhance it only when the content genuinely requires dynamic behavior.
Match fallback and web-font geometry
Text can move when a downloaded font replaces a fallback. Character widths, ascent, descent and line spacing all affect the resulting layout. A heading that wraps onto another line can displace far more than the text itself.
font-display: swap lets fallback text appear while the web font loads, but does not guarantee stable geometry. font-display: optional can avoid a late swap in some circumstances, with the tradeoff that a visitor may continue seeing the fallback font on that visit.
Choose an appropriate fallback and, where justified, use metric-adjustment descriptors such as size-adjust, ascent-override, descent-override and line-gap-override. Their values must be derived for the particular font pairing. Copying arbitrary percentages from another site's example can make the mismatch worse.
Test the scripts your publication actually uses. Hebrew, Korean and Latin text can use different font files and fallback paths. A short English heading is not a sufficient test for a long localized title or a mixture of Latin abbreviations and another script.
Preload only a font that is truly needed early and would otherwise arrive too late. Preloading every weight can compete with critical images and other resources. Inspect requests and layout behavior together; a font fix should not quietly create a loading regression.
Animate without repeatedly changing the document layout
Animating width, height, top or other layout-affecting properties can require repeated layout work and may move neighboring content. Transform and opacity animations often provide a more appropriate way to create a visual transition without changing the surrounding document flow.
That is not a reason to animate essential content for its own sake. A visually moving object can still be distracting even when it does not count toward CLS. Respect reduced-motion preferences and keep focus and hit targets aligned with what the visitor sees.
For expanding content such as an accordion, consider the reader's expectation and the position of nearby controls. Preserve a clear connection between the activation and the revealed content. Avoid delayed unrelated insertions that arrive after the interaction and push the page unexpectedly.
Use field evidence to find the cases a reload misses
A lab loading run can finish before an advertisement refreshes or a reader reaches a late embed. If field CLS is worse than the initial test, reproduce the longer journey before assuming that the field report is wrong.
RUM can help identify templates or components associated with shifts. Browser API coverage and iframe visibility can differ from CrUX, so a top-level JavaScript collector may not observe everything included in the browser's field measurement. Document those limits rather than forcing the datasets to agree.
Check navigation behavior as well. Returning with the browser's back button may restore a page from the back/forward cache, which differs from an ordinary reload. Preserve eligible restoration behavior where possible, while still fixing the underlying first-load shifts.
Prioritize shared causes. A media wrapper used by hundreds of pages is a more useful repair target than manually adjusting every article that happens to expose it. Verify representative exceptions, including missing images, unusually long captions and content that fails to load.
Validate geometry as well as the score
After a change, repeat the original scenario and inspect the same shift event. Confirm that the affected content remains in place and that the new reserved space does not create clipping, overflow or unnecessary scrolling.
Compare several viewport sizes, content lengths and loading states. Check keyboard focus, zoom and translated text. A fixed-height box can make a performance recording look stable by cutting off content, which is not an acceptable fix.
Keep the observed CLS value and the recording conditions with the change. After deployment, review field results as the collection window incorporates new visits. Do not promise an instant Search Console change because one local trace is now stable.
Make late-content behavior part of component review
For each reusable component, document what space it reserves, what happens when content is missing and whether it can change height after the reader begins interacting. That turns layout stability into a design property rather than a recurring emergency audit.
Use the Core Web Vitals checker to interpret recorded metric values and the Core Web Vitals guides when loading or interaction becomes the next issue. A stable component is one that behaves predictably in its ordinary, delayed and failed states, not only in the screenshot where everything has already arrived.
