Common Causes of High CLS and How to Fix Them

The common causes of high Cumulative Layout Shift (CLS) include:

• Images and videos without specified dimensions (width and height). Without these, the browser cannot allocate the correct space during loading, causing content to shift when media loads fully.
• Ads, embeds, and iframes lacking fixed dimensions, which similarly cause layout shifts as these elements load dynamically.
• Web fonts causing Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT), leading to text layout changes after initial rendering.
• Dynamically injected content, such as animations or content loaded after initial page load, which can push existing content around.
• Actions waiting for network responses before updating the DOM, especially for ads or embedded content, causing delayed layout changes.

To fix high CLS, the key strategies are:

• Always specify width and height attributes for images, videos, ads, embeds, and iframes to reserve the correct space before they load.
• Use CSS aspect ratio boxes or placeholders to maintain space for media elements.
• Avoid inserting content above existing content after it has loaded; instead, reserve space or load content below.
• Optimize web font loading to prevent FOUT/FOIT by using font-display CSS properties.
• Minimize or carefully manage dynamically injected content and animations to prevent unexpected shifts.
• For lazy-loaded elements, reserve space in advance to avoid layout shifts as the user scrolls.

These fixes help ensure the page layout remains stable during loading, improving user experience and CLS scores, especially on mobile devices where CLS impact is often greater.