How to optimize Cumulative layout shift?
After light house version 6 release, google has introduced a new metric for measuring site performance “Cumulative Layout Shift”. The only reason to add this metric is to make site user friendly, to reduce sudden flicker that user faces excessively while visiting some sites.
What is CLS?
CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
What causes CLS?
1.Images without dimensions.
2.Advertisement and iframe without dimensions.
3.Dynamically injected content(api response data).
4.Web Fonts causing FOIT(Flash of invisible text )/FOUT(Flash of Un-styled Text).
How to calculate CLS?
The calculation involves two metrics/events.
1. Impact Fraction.
Impact fraction is a measurement of how much space an unstable element takes up in the viewport:
area(impact region)/ area(view port) = impact fraction.
2. Distance Fraction.
The second measurement is called the Distance Fraction. The distance fraction is the amount of space that the page element has moved from the original position to the final position.
max move distance/ viewport height = distance fraction
layout shift score = impact fraction * distance fraction.
Where to find CLS reports?
1.PSI (https://developers.google.com/speed/pagespeed/insights/)
2.Webmaster search console under core web vitals report
3.Google chrome developer tools
4.You can open your site in throttled mode and can also see the CLS effect.
How to resolve CLS?
Always include size attributes on your images and video elements or reserve the required space. This ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behaviour in browsers that support feature policies.
Never insert content above existing content (asynchronous api call data), except in response to a user interaction. This ensures any layout shifts that are expected to occur.
Preload web fonts to avoid FOIT and FOUT, which causes CLS.While using font face to load web fonts, best way is to define font-display property like swap, optional as per your application requirement.
Never insert Ads in between asynchronously, if any always reserve spaces for that..
Use animation if your site required some kind of shift, instead of updating height, width, top, bottom, left and right, try to adjust it with CSS transform property.
Use loader if content of website mostly depends on some network response, wait till the time you get data and then display it.
Conclusion
Always try to invest time in observing your sites as far as possible in slow/fast network to trace the UI section which still has flicker
CLS will affect your organic rankings somewhere in early 2021, so better prepare beforehand so that you can find your site available in safe cocoon.