Barry Pollard avatar Barry Pollard

How To Fix Cumulative Layout Shift (CLS) Issues

Screenshot of “How To Fix Cumulative Layout Shift (CLS) Issues”

Barry shows here a few ways to prevent layout shifts and make your visitors happier.

All of these techniques basically involve setting aside the correct amount of space before additional content is loaded — whether that is media or JavaScript-injected content, but there’s a few different options available to web developers to do this.

  1. I have a client site with a header that is hidden when the user scrolls down, but shown again when the user scrolls up, which seems pretty comon nowadays.

    This triggers some CLS, even if the hide/show is done in less than 500 ms, as “continuous interactions such as scrolls, drags, or pinch and zoom gestures are not considered ‘recent input’”. 😞