How to fix CLS: why the page jumps while it loads

CLS measures how much the content moves while the page loads: you go to tap a button and at the last instant an ad appears above it and the button drops. The cause is nearly always the same: something arrives without having reserved its space. The cure is to reserve the space before the content comes.

The causes, most common first

What jumps Why How to reserve the space
Images With no width and height declared, the browser only learns the size after the image arrives. Put width and height on the <img>. WordPress already does it for images inserted through the editor; themes and page builders are what sometimes lose it.
Ads, banners and cookie notices They show up late and push the text down. Give the box a fixed minimum height, or have them overlay the content instead of pushing it.
Embedded videos and maps (iframes) They arrive with no size and the box suddenly grows. Give the iframe a width and height, or a fixed ratio in CSS (aspect-ratio).
Fonts that swap The text appears in one font and changes when the right one arrives, with a different width. Fewer fonts and a well-chosen font-display. See web fonts.
Content inserted by script Promotion bars, chat widgets, “read more”. Reserve that block’s height in CSS before the script runs.

Finding what moves, step by step

1 In PageSpeed Insights, on the mobile tab, open the diagnostics and look for “Avoid large layout shifts”. The list names the elements that moved most.
2 In Chrome, press F12, open the Performance panel, record the load and look for the “Layout Shift” marks: click one and the element is highlighted.
3 Fix one element at a time, from the one that moves most to the least, and measure again. Reading the tools is covered in measuring your site speed.
Deferring everything makes CLS worse. If you postpone the theme’s CSS or scripts to “gain points”, the final styling arrives after the content and the page lurches at the end. If CLS went up after you touched optimisation options, undo the last one and measure again. See minifying CSS and JavaScript without breaking the site.
Field data and lab data can disagree. The lab test loads the page and stops; visitors scroll, open menus and accept cookies, and that is where many shifts happen. If the Search Console report talks about CLS and the lab test is clean, try the page as a visitor would: with the cookie notice, scrolling and opening the tabs. The limits are on web.dev and they change: check them there.

A page that holds still is also nicer to use than a fast page that moves. It is worth the effort even if Google did not exist.

Reserved the space and the page still moves? Send us the address and what the report names.

Open a support ticket

SEE ALSO

Core Web Vitals in plain words

Web fonts slowing the page

Lazy loading: what to defer and what never to

Hosting plans and what each includes

RECOMMENDED PRODUCT

Web hosting with cPanel

Domain and SSL included, daily backups and the panel you already know. from $6.60/mo (3-year plan, with coupon)

See plans
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

How to monitor your site performance in cPanel cPanel keeps a record of everything that happens on your hosting - who visited, how much traffic you used, which errors...
The site is slow: what actually makes a difference «The site is slow» means different things depending on who says it: the first page takes ages to appear, the admin panel...
Cloudflare: when it helps, how to switch it on, and the cache that fools you Cloudflare sits in front of your site: visitors reach it first, and it comes to us for what it needs. That brings three...
The site is slow: what to measure before you change plan «The site is slow, I think I need a bigger plan.» It is one of the messages we get most, and most of the time the bigger...
What a CDN is, and when it makes a difference (and when it does not) A CDN (content delivery network) is a set of machines spread around the world that keep copies of your site and hand the...
How to fix a poor INP: the page appears but reacts slowly INP measures how long the page takes to react to a tap or a click, from the moment you press to the moment something cha...