Stop your pages jumping about as they load

Hello,

You know the feeling. A page is loading, you go to tap "add to basket", and at the last second everything jumps down and you tap an advert instead. That jumpiness has a name — Cumulative Layout Shift, or CLS — and on a store it doesn't just annoy people, it loses you orders.

Why pages jump

The layout shifts when the browser has to make room for something that arrives late. It laid the page out one way, then a slow image or a bit of text turned up and shoved everything down to fit. The most common causes:

• Images with no reserved space, so the page reflows when they land
• Web fonts that swap in and change the size of your text
• Banners and notices that pop in above the content
• Ads or embeds that push everything down when they load

The fix is mostly reserving space

Almost all of this comes down to telling the browser how much room to leave before the late-arriving thing shows up. Set dimensions on your images. Give banners a fixed height. Load fonts in a way that doesn't reshuffle your text.

A layout that holds still feels trustworthy. A layout that lurches feels cheap, no matter how nice it looks.

Test it the annoying way

Load your product page on a phone, on a slower connection, and try to tap the buy button the instant it appears. If anything shifts under your thumb, that's a shift worth fixing. Do the same on your basket and checkout, where a mis-tap costs you a sale directly.

CLS is one of those problems that feels minor until you watch a real customer fumble it. If your pages move around as they load and you want them steadied, book advisory time and I'll help you sort it.