Shifting layouts, and how to deal with them

That thing where the page you're on jumps around as it's loading? It has a name. And it's fixable.

You’re searching the web for, let’s say, a new pair of shoes. The page loads a bit slowly, but that’s OK, you see the shoes you want and click on them – only for that listing to jump down the page as you click, causing you to click on the wrong item.

You've just encountered Cumulative Layout Shift, also known as CLS.

Web performance and three-letter acronyms

I first wrote about web performance twelve years ago, when the rules were simpler, essentially “optimise your assets, test, and you should be good.”

In 2020, Google introduced the Web Vitals initiative, founded on the idea that user experience is a key search engine optimisation (SEO) metric: all else being equal, a page that not only loaded fast but felt fast was more likely to satisfy the user, and thereby rank better.

This initiative attempted to analyse performance using a set of quantifiable criteria, which gave us a bunch of three-letter acronyms – LCP, FID, INP, among others – all of which are used in measuring the performance of a web page. The one I want to focus on here is CLS, which stands for Cumulative Layout Shift.

Layout shifts explained

The most common causes of layout shifts are assets (images and videos) that force the layout to change as they appear on the page.

In this simplified before-and-after example, a single image loads slowly, then forces open a space for it to render correctly, causing all the content below it to jump downwards.

The first cell shows a page containing multiple links. As it loads, you see the link you're interested in in the second paragraph but, just as you click, an image appears further up the page, and your mouse hits a different link:

See this in action:

Layout shift caused by images

The reason this behaviour is a problem is because it's both unexpected and disruptive: The user peruses the content as it appears, begins to interact with it, and is interrupted when the content suddenly moves.

How to fix this?

There are many causes of shifting layouts, but one of the most common is both old and basic – <img> tags without dimensions.

This is what's happening in the example above:

<img src="cat.jpg" alt="A tabby cat">

This is technically correct, but causes the layout to shift when the page loads and the image appears.

You can prevent this by adding the actual pixel dimensions, as follows:

<img src="cat.jpg" width="250" height="250"

alt="A tabby cat">

What this does is to instruct the page to reserve a 250 by 250 pixel box for the image before it loads. The content that follows the image will not be jogged downwards or sidewards because the space the image needs has already been created. Here's the same page, with explicit image dimensions:

Layout shift caused by images, fixed

Other causes of layout shifts

Another common cause of layout shifts is content that gets loaded dynamically after the page has rendered. Ads are a good example.

Typically, a page will designate one or more zones for ads – maybe one above the header and another after the first paragraph. Take a look at this car wreck:

Layout shift caused by ads

Aside from the visual ugliness, the layout shifts, not just once, but each time an ad loads. The solution here follows the same principle: always reserve an adequate space for such content before it loads. Once you know how much vertical space your ads require, you apply a min-height attribute to the container. The page might still be ugly, but your user no longer has the jarring experience of the content jumping around:

Layout shift caused by ads, fixed

Is that really it?

I've covered the most common use cases in a simplified fashion to illustrate the principle and to demonstrate the fixes.

Things get complicated when you introduce responsive design: your page elements are stacked vertically for the smallest devices, but are laid out in grids or columns for bigger screens. You may have three, four or more breakpoints, each introducing a different layout.

The principle remains the same: for each layout, consider all the elements that might cause the layout to change and ensure they have sufficient space reserved in the layout.

Next steps

If you follow the procedures above, you'll address the most common causes of intrusive layout shifts.

Keep in mind that CLS is an actual measurement. Your first tests will likely show obvious areas for improvement. As you fix those, your score should progressively improve, to the point where you can decide if any remaining issues are worth the time and effort to address.

More information

• Web Vitals (web.dev)
• Cumulative Layout Shift (CLS) (web.dev)
• CLS Debugger (fili)