Common causes of high CLS and how to identify them

Common causes of high Cumulative Layout Shift (CLS) include:

• Images and media without defined dimensions: When height and width are not specified for images or videos, the page layout shifts as these elements load and push other content around.
• Ads, embeds, and iframes: These often load asynchronously and without reserved space, causing visible content to move when they appear.
• Dynamic content: Elements that load or change size after the initial page render, such as pop-ups, accordions, or dynamically injected ads, can cause layout shifts.
• Web fonts and font loading: Loading fonts asynchronously or using font-display: swap can cause text to reflow, resulting in layout shifts when fonts are applied.
• Third-party scripts: Scripts that manipulate the DOM or load additional content asynchronously can trigger unexpected layout shifts.
• CSS animations and transitions: Improperly implemented animations affecting element size or position can cause layout instability.

To identify these causes, tools like WebPageTest can be used to create filmstrips or session recordings that highlight when and where layout shifts occur during page load. Reviewing these visualizations helps isolate which elements cause shifts, such as media loading or dynamic content injection.

In summary, high CLS is typically caused by elements loading without reserved space or changing size/position after initial render. Identifying these issues involves analyzing page load behavior with specialized tools to pinpoint the shifting elements.