You open a website, go to click a button, and at the last moment everything shifts because an ad or image loads above it. Now you have accidentally clicked on something else. Frustrating. Google measures that problem with CLS: Cumulative Layout Shift.
What are good CLS values?
- Under 0.1: good. The page stays stable while it loads.
- 0.1 to 0.25: fair. Visitors notice it.
- Over 0.25: poor. Irritating, and Google lowers your rankings.
What causes a high CLS?
- Images without dimensions: if your HTML does not say how big an image will be, the browser leaves an empty gap and only fills it once the image has loaded. Everything below it then jumps down.
- Ads that load later: common on news sites, and often the biggest culprit.
- Fonts that load later: text is first shown in a system font, then swapped for your custom font. If the size is different, the text shifts.
- Embedded videos or iframes without fixed dimensions
What can your web developer do?
Concrete actions:
- Always set
widthandheighton images and iframes - Reserve space for ads with a fixed container height
- Use
font-display: swapwith a good fallback font - Let above-the-fold content load first without interruption
Why is this a ranking factor?
Google calls CLS a 'Core Web Vital'. Since 2021 it has officially counted towards rankings. Take two sites with identical content: the site with a CLS of 0.05 beats the site with a CLS of 0.4.