Cumulative Layout Shift (CLS) and Jumping Pages

Cumulative Layout Shift (CLS) and Jumping Pages

Cumulative Layout Shift measures how much the content of a page moves around unexpectedly while it loads. You have experienced poor CLS if you have ever gone to tap a link and the page jumped, so you hit the wrong thing.

A stable layout feels professional and trustworthy. A jumpy one feels broken and causes mis-clicks that frustrate visitors.

How We Keep It Low

Preventing layout shift is largely about telling the browser what to expect before content arrives, so nothing has to move once it does. Done well, the page simply assembles in place.

  1. Set explicit sizes on images and videos.
  2. Reserve space for ads, banners and embeds.
  3. Load fonts so text does not reflow.
  4. Avoid inserting content above what is being read.

Everyday Examples You Will Recognise

Layout shift is one of those problems everyone has experienced even if they have never named it. Spotting it on your own site is often the moment the metric starts to make sense.

  • You go to tap a button and an advert loads, pushing it down.
  • You start reading and a banner appears, shoving the text away.
  • An image pops in late and rearranges the whole paragraph.
  • A cookie bar arrives and nudges everything downward.

What Causes Layout Shift

  • Images and videos without reserved width and height.
  • Ads or embeds that push content down when they load.
  • Web fonts that reflow text once they arrive.
  • Content injected at the top of the page after load.

How We Keep Layouts Stable

  1. Set explicit dimensions so the browser reserves space before media loads.
  2. Reserve space for ads, banners and embeds in advance.
  3. Preload fonts and match fallback sizing to avoid reflow.
  4. Avoid inserting content above what the visitor is already reading.

Frequently Asked Questions

What is a good CLS score?

Below 0.1 is good. The score has no unit — it reflects how far and how often things move on screen.

If you need a hand with any of this, your Progressive Robot delivery team is ready to help. Raise a ticket from the Support area of your client portal or speak to your account manager and we will guide you through the next steps.

Did you find this article useful?