Web Vitals and CLS (Cumulative Layout Shift)
- What is it and how to measure it: https://web.dev/optimize-cls/, measures the instability of the content and can be measured via Chrome’s Lighthouse tool.
- What causes it: (https://www.datadab.com/blog/fix-cumulative-layout-shift/, images without dimensions, ads, embeds, and iframes without dimensions, dynamically injected content, web fonts causing FOIT/FOUT, actions waiting for a network response before updating DOM)
- How to trace the parts of a web page where it happens: https://levelup.gitconnected.com/cumulative-layout-shifts-cls-ab3ef9b98b70, Chrome developer tools > [More Tools] > Rendering > Layout Shift Regions).
