CLS is about unexpected movement after content is visible, so the useful diagnosis is to identify which element moved and what late information changed its geometry. Images, fonts, banners and embeds fail for different reasons even when the metric looks identical.
Capture the layout-shift source
Use browser layout-shift diagnostics or a recording to identify the element that moved and the element that caused the movement. The visible victim is not always the root cause.
Reserve dimensions for media
Images, video, ads and embeds need a stable aspect ratio or minimum space before their content arrives. Responsive design should change dimensions predictably, not after load.
Check font metric changes
A late webfont can resize text enough to move surrounding content. Compare fallback and final font metrics, line-height and font-display behavior rather than simply preloading every font.
Treat banners and consent UI as layout components
Cookie notices, promo bars and personalization blocks should overlay intentionally or have space reserved. Injecting them above existing content after load creates avoidable shifts.
Watch client-rendered components
Carousels, reviews, related content and widgets can change height after API responses. Give asynchronous containers stable geometry or render a realistic placeholder.
Validate across breakpoints and states
Test logged-in/out, consent states and common viewport widths. One desktop run can miss mobile shifts caused by wrapping, sticky UI or alternative image ratios.
For heavy media, combine this with safe image replacement; for hero-specific issues also review LCP behavior of the hero image.