CLS — What’s the Problem?

CLS calculation
CLS calculation
Web performance statistics from canarytrace.com
Web performance statistics from canarytrace.com
Performance tab in Chrome DevTools
Performance tab in Chrome DevTools
Finished performance profile in Chrome
Finished performance profile in Chrome
Site wihout main banner
Site wihout main banner
Site with main banner
Site with main banner
Layout Shifts Regions in Chrome
Layout Shifts Regions in Chrome
Web Vitals extension report
Web Vitals extension report
Lighthouse report
Lighthouse report
<img class="c-banner__item-image" alt="AKCE TÝDNE - DĚTSKÁ ZIMNÍ OBUV OVONO" data-lazy="https://alpineprooutlet.blob.core.windows.net/apocz/images/banner-174-desktop-1920x450_OVONO_3.jpg" src="/images/loader.gif">
<img class="c-banner__item-image" alt="AKCE TÝDNE - DĚTSKÁ ZIMNÍ OBUV OVONO" src="https://alpineprooutlet.blob.core.windows.net/apocz/images/banner-174-desktop-1920x450_OVONO_3.jpg">
Overrides in Chrome
Overrides in Chrome
Site with no banner, loader is displayed instead
Site with no banner, loader is displayed instead
Banner has loaded
Banner has loaded
First paint on the web site
First paint on the web site
  • CLS is a metric related to user experience
  • measuring CLS could be tricky across tools, it’s unlikely you’ll get completely same numbers in different tools, or even in one tool over time; it’s more useful to consider ranges and trends
  • DevTools are your big friend in investigation, a lot of information could be gathered from there
  • you can also attempt to fix the problem in Overrides in Chrome DevTools

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store