Codewerk.
Get a quote
Home/Blog/CLS and Core Web Vitals: fixing the jumping shop

CLS and Core Web Vitals: fixing the jumping shop

Layout shift is the vital that costs you conversions directly — buyers click the wrong button. It is also the easiest one to fix.

Photo: free stock photography (Unsplash licence) — see imprint

The three numbers Google cares about

LCP (how fast the main content appears), CLS (how much the page jumps), and INP (how fast it reacts to a click). Together they form the page experience signal — but their real value is that they correlate with people actually buying.

Where shops leak CLS

Images without width and height. Cookie banners injected after paint. Web fonts that swap and reflow every heading. A price that arrives from an async call after the button has already rendered. Each is a small jump; together they are why a buyer clicks 'remove' instead of 'add'.

Reserve the space, always

Every element that arrives late needs a box waiting for it: explicit dimensions on images, a min-height on the banner slot, a skeleton for the price. This is unglamorous CSS work and it typically takes an afternoon.

Measure real users, not your laptop

Lighthouse on your fast machine on fibre tells you very little. Use field data from the Chrome UX Report — your B2B buyer on a factory-floor tablet over hotel WiFi is the user Google is actually scoring.

Key takeaways
  • Reserve space for everything that loads late.
  • CLS costs conversions directly, not just ranking.
  • Trust field data over lab scores.

Frequently asked questions

Because things arrive after the page has already been drawn. Images without width and height. A cookie banner injected after paint. Web fonts that swap and reflow every heading. A price that comes back from an async call once the button is already there. Each is a small shove; together they are why a buyer clicks the wrong thing.

Google publishes a threshold for CLS, and you should check it against the current Core Web Vitals documentation rather than trusting a number in an article — these values have been revised before. The more useful test is behavioural: if anything on your product page can still move under a buyer's finger after it is visible, that is worth fixing whatever the number says.

Less than people expect, which is why it is usually the first vital we touch. Every element that arrives late needs a box waiting for it: explicit dimensions on images, a min-height on the banner slot, a skeleton where the price will land. It is unglamorous CSS and it typically takes an afternoon, not a project.

Because Lighthouse is a lab test on your machine and Search Console reports field data from real visitors. Your fast laptop on fibre is not the user Google is scoring — the B2B buyer on a factory-floor tablet over hotel WiFi is. When the two disagree, believe the field data. It is the one describing people who might buy something.

We do this for a living — Shopware, Node.js, React, ERP integration and automation for B2B.

Talk to an engineer

// Keep reading

Related articles