Detailed definition
If the layout shifts just as a user is about to press a button and they hit the wrong one, the CLS score goes up. The main causes of a higher CLS: images without a width/height attribute, ads or banners that load late above the fold, and text shifting while web fonts load (FOUT/FOIT). Fixes: size attributes on img/iframe elements, reserved space for ad slots, font-display: optional.
Examples
- If a product list is lazy loaded without image dimensions being specified, CLS deteriorates.