CLS Checker and Layout Shift Finder

CLS Finder converts a lab test into an interactive layout shift timeline. Scrub through captured frames to see the page before and after each movement, then inspect the CSS selector and bounding box of the affected element. This visual evidence helps separate genuine instability from an element that simply appeared later in the loading process.

Each shift card includes its individual contribution to the cumulative score. Start with the largest shift, open the visual comparison, and trace the responsible element back to its image, embed, font, banner, component, or injected content.

Responsive layouts can produce different shift clusters at different breakpoints. A navigation bar may wrap on a narrow screen, an advertisement may use a different slot, or a desktop hero may become a mobile carousel. The tool tests mobile, tablet, and desktop viewports independently so device-specific instability is not hidden inside one result.

Compare the score, shift count, screenshots, and affected selectors for every viewport. If you also need to identify the largest painted element at each screen size, run the LCP Finder.

Images, videos, iframes, advertisements, and widgets can push nearby content when their final dimensions were not known during the initial layout. Add intrinsic width and height attributes, use CSS aspect-ratio, or provide a stable placeholder so the browser reserves the correct space before the resource arrives.

Dynamic slots should have a minimum height that matches the likely content. If a slot can collapse, reserve space only while it is expected to load and avoid removing that space while the visitor is reading nearby content.

Web fonts can reflow a heading or paragraph when the fallback and final typefaces have different metrics. Preload genuinely critical fonts, reduce unnecessary font variants, and use font metric overrides such as size-adjust when appropriate. These techniques make the fallback occupy dimensions closer to the final font.

Cookie notices, consent managers, recommendations, and personalization should not be inserted above existing content without reserved space. Prefer overlays for temporary notices or render stable containers before asynchronous data arrives.