How to optimise for CLS when loading more content asynchronously

• 31 August 2020
• cumulative layout shift,
• techniques

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts — a low CLS helps ensure that the page is delightful.

What you might not know is:

• CLS is measured continuously. In fact, its value is also updated while your users scroll your page, if the scroll generates some layout movement
• CLS measurement is paused for 500ms whenever a user interaction like a click or a keyboard event occurs

Long story short, Cumulative Layout Shift measures every unexpected layout movement occurring while your users interact with the page, including while they scroll down.

When loading more content in our pages, the most common source of CLS is the page footer becoming visible for a while, then being pushed below-the-fold again by new, dynamically added content.

So how to keep CLS from growing when we need to load new content dynamically, e.g. to load a whole new page of products?

Continue reading on Medium

• Previous: Lazy load responsive images in 2020
• Next: How to cap image fidelity to 2x and save 45% image weight on high-end mobile phones