CLS: Layout Shifts

Scrolls that Test the User's Patience: CLS

There are few experiences worse than the text you are trying to read suddenly scrolling down or the button changing its position just as you are about to click it. Google measures this instability with the Cumulative Layout Shift (CLS) metric and considers less than 0.1 as "good".

Why Does CLS Occur?

• Images and videos with unspecified sizes.
• Delayed loading fonts (FOIT/FOUT problem).
• Dynamically added ad spaces or widgets.
• Style changes due to late loading CSS files.

Solutions

• Add width and height values to all and tags.
• Space reservation using aspect-ratio property in CSS
• When using font-display: swap for font uploads, align the dimensions of the fallback font with the main font.
• Create fixed-height containers for advertising spaces.