CLS (Cumulative Layout Shift)
A score for how much visible content jumps around while the page is still loading.
Analogy Mental model
Reaching for the buy button just as a banner loads above it, so the button moves and you tap the banner. You did not misclick, the page moved.
In practice What you actually do
Target under 0.1. Give every image and video explicit width and height, reserve space for anything injected later, and pair font-display swap with a matching fallback metric so text does not reflow when the webfont arrives.
Where people get burned Pitfalls
Popups and lazy-loaded images are the usual culprits, and ad slots without reserved dimensions are the worst offenders. Fix the container rather than the creative, because the creative will change again next week.
This entry was written in English from the Chinese original, not machine-translated. Read the Chinese version →