Understanding Cumulative Layout Shift (CLS)

Cumulative layout shift (CLS) is a key performance metric that measures the instability of a webpage's content. It penalizes experiences where content shifts, jumps, or moves while users are interacting with it. This can be frustrating, especially when it causes buttons to shift and gets clicked accidentally. CLS can be caused by various factors such as images, iframes/ads without dimensions, late-loaded third-party content, animations, and fonts. To mitigate CLS, it is important to specify sizes for images and iframes, lazy load CSS and fonts properly, and use CSS grids to define and allocate layout space. Interactions like focus or hover can also trigger layout shifts. Testing and debugging CLS can be done using tools like Lighthouse, which identifies offending elements and provides recommendations to reduce CLS. Performance Panel in DevTools can also highlight layout shifts on the page and show timing data.