Cumulative Layout Shift (CLS) is one of the most important user experience and web performance metrics. CLS is part of Web Vitals (LCP, FID, and CLS), essential metrics for a healthy website defined by Google. It measures the layout stability of a web page. In this guide, you will understand what CLS is, how to measure it, and, how to improve its score. Keep reading!
What is CLS?
CLS or Cumulative Layout Shift is a new web performance and user experience metric. It aims to reflect the layout stability of a web page. It tells how often a user is experiencing unexpected layout moves when loading a web page.
We have all encountred websites, especially on mobile, that still moving up, down, right and left when loading. Text is appearing, you start to read a news article, and…an image shows up, hiding the text down. You think it is ok now, you want to click on “read more”, and the page move again and you miss click an ad.
CLS is an important metric, a low or 0 value is a sign of a delightful loading experience. A high CLS value means a poor and frustrating one.
Good, average, and poor CLS?
A good CLS should be less than 0.1. On a domain level, try to reach the 75th percentile of page load across mobile and desktop users.
|Good CLS||Need improvements||Poor CLS|
|Less than 0.1||0.1 – 4.0||More than 4.0|
Comparing to LCP, CLS has a lower weight in Lighthouse score calculation.
|Metric||Weight in LH score|
I’m writing a book about Web Performance, subscribe to be updated
How to measure CLS?
Cumulative Layout Shift can be measured in both synthetic (lab) and field (Real User Monitoring).
CLS in synthetic tools:
- Chrome Web Vitals extension
- Google Lighthouse
- Google Chrome Dev Tools Network tab
TIP: Click on View JSON result to have detailed Layout Shifts data
CLS in field (RUM):
- You can measure CLS in the field thanks to Chrome User Experience Report (CrUX)
- Rick Viscomi created and shared this Web Vitals dashboard https://g.co/chromeuxdash
- You can also run this SQL query in BigQuery
SELECT p75_cls, small_cls AS good, medium_cls AS needs_improvement, large_cls AS poor FROM `chrome-ux-report.materialized.metrics_summary` WHERE origin = 'https://netflix.com'
- You can also check Web Vitals report on Search Console
- It also possible to measure CLS with PageSpeed Insights (both field and lab)
Which elements are shifting?
To know which elements are shifting, run a Lighthouse audit and scroll down the report until the “Avoid large layout shifts” section. Click on it to see the list of shifting elements.
TIP: Dock your DevTools panel to left or right so that when you hover to elements on Lighthouse report, you can see them on the page
How to improve CLS score
- Always precise elements size ‘width’ and ‘height’ attributes:
- embeds and iframes
- ads and banners
- Reserve required space for your web page elements so that the browser allocates the needed space (see CSS Aspect Ratio)
- Never dynamically inject content above the existing one without user interaction
- If you have elements added with user interaction, show them in 0.5s window, otherwise, it is counted as a layout shift
- If you need animations on your page, prefer transform animations
- Don’t update DOM (Document Object Model) asynchronously
- Ensure that your needed web fonts are loading fast to avoid FOIT/FOUT
- Sort through loaded fonts, often we load fonts unnecessarily
- Preload critical fonts
- Add font-display:optional to avoid font switching issues
Useful resources about CLS:
What’s next ?
Optimize your web pages to reduce layout shifts. Web pages stability provides a delightful and stress-free user experience.
Think about optimizing your LCP with this guide and i’m looking forward your comments and questions.
Think to subscribe to receive my Web Performance newsletter and be informed about my upcoming book