Usercentrics - PUBLIC

How can I improve the Lighthouse results for the Cumulative Layout Shift (CLS)?

Owned by Stefanie Winkelmann (Unlicensed)
Aug 06, 2021
1 min read

 

This section describes the CLS metrics used in the Lighthouse report and how to improve it.

This section describes the CLS metrics used in the Lighthouse report and how to improve it.

What is the Cumulative Layout Shift?

The Cumulative Layout Shift (CLS) is one of the factors that will be used to classify a website’s performance. Further information on CLS can be found here.

CLS Reference times

  • Good: Less than 100 milliseconds

  • Needs Improvement: Between 100 and 250 milliseconds

  • Poor: Longer than 250 milliseconds

Improving the CLS results

  • Size matters. Use set size attribute dimensions for any media (video, images, GIFs, infographics, etc.)

  • Keep your ads in line. Advertisements are one of the biggest causes for layout shifts in websites. Make sure that ads elements have a reserved space. Your advertiser network usually will be able to adjust the content to the space that you assign.

  • Use the space below the fold. CLS only counts shifts visible in the viewport. If something moves below the fold and the user does not see it, such a shift won’t affect CLS in the slightest. Add new UI elements below the fold.

  • Read further. Here’s a great overview of different ways of improving your CLS.

Summary

Make sure to give each part of your website content its own space with set attributes so every part stays in place while your website loads.

There are no related labels.

Do you need further help?

https://usercentrics.atlassian.net/wiki/spaces/SKB/pages/234913848

Usercentrics - PUBLIC