Layout shift: content that jumps while the page loads

Layout shift is content moving while the page loads, measured as Cumulative Layout Shift (CLS). Give every image and video width and height attributes, reserve space for ads, embeds and banners before they arrive, and keep web fonts from reflowing text. web.dev calls a CLS of 0.1 or less good; SERPCompass flags pages over 0.25 in its lab test.

Last updated 29 October 2026, when every step was checked against the vendor's documentation.

Why it matters

Cumulative Layout Shift measures the largest burst of unexpected layout shifts in a page's life: shifts less than a second apart, in a window of at most five seconds. web.dev calls 0.1 or less good and more than 0.25 poor, at the 75th percentile of page loads. A shift within half a second of a click or a key press is expected and does not count.

CLS is one of the three Core Web Vitals. Google says "Core Web Vitals are used by our ranking systems", but that there is no single page experience signal, that its core ranking systems look at a variety of signals, and that it shows the most relevant content even when the page experience is poor. Fix layout shift for the people who misread or mis-tap a page that moves, not for a promised ranking change.

An image without width and height takes no space until it has downloaded, then pushes everything below it down. With both attributes, the browser works out the image's aspect ratio before it loads and reserves the space. web.dev adds that lazy loading makes this more important: those images arrive while the visitor is already reading.

web.dev names the other usual causes: ads, embeds and iframes without reserved space, content injected above what is already shown, such as banners, and web fonts that swap in and reflow the text.

Lab tools such as ours and Lighthouse only measure shifts during loading. Field data covers the whole visit, so the CLS Search Console shows can be higher than a lab test finds.

The audit findings this guide fixes: Poor layout stability (CLS over 0.25, lab); Images without width and height.

Find every page with this problem

Run the free scan on your domain. It opens a sample of your pages in our own headless Chromium: the start page, then one page of each template, then the most-linked pages, up to 10 in the free scan (25 or 50 in larger workspace audits). Each page loads once, with an empty cache, under simulated mobile conditions modelled on Lighthouse's mobile test: a 412 by 823 pixel screen, a slow 4G connection and a processor slowed four times. CLS is the largest burst of shifts seen until shortly after the page has loaded and its network has gone quiet; our browser never scrolls, clicks or types, so every shift counts and shifts later in a visit are not measured. Over 0.25 is flagged. These are lab measurements from our browser, not field data from your visitors: Search Console's Core Web Vitals report shows field data, from the Chrome UX Report. On every page it crawls, the scan also counts the <img> elements (outside <noscript>) that have neither both width and height attributes nor a style attribute setting aspect-ratio or both width and height. It does not read your stylesheets, so an image whose aspect ratio is set there is counted too: give it the attributes anyway, as web.dev recommends for every image. The scan shows your most urgent findings with the number of pages each affects; the Gap Report and a SERPCompass workspace list the pages, with the CLS measured on each page, or up to five of its images that have no size.

Scan my site free

How to fix it on your platform

Interaction to Next Paint, the third Core Web Vital, is not covered here.

WordPress

Add images from the Media Library, for example with the Image block. Since WordPress 5.5, it adds width and height to images in post content that lack them, when it can read the image's size from the Media Library.
An image added by its web address and not uploaded gets no such help. Use the Image block's Upload to Media Library button, or write width and height into its HTML yourself.
In theme templates, print images with wp_get_attachment_image(), which writes width and height from the image's real size, rather than a hand-written <img>.
If your theme sizes images in CSS, set the other dimension to auto, such as height: auto, so the attributes do not stretch them.

Sources: Lazy-loading images in 5.5 (Make WordPress Core); wp_img_tag_add_width_and_height_attr() (WordPress developer reference); Image block (WordPress documentation); wp_get_attachment_image() (WordPress developer reference).

Shopify

In theme code, print images with the image_tag filter, which adds width and height from the image address, or give every <img> both attributes.
Shopify names images without dimensions, fonts that swap in late and content injected by apps as the common causes. If shifts started after you installed an app, look at what it adds to the page and ask its developer.
For web fonts, use size-adjust and the other override descriptors on the fallback font so that it takes the same space as the web font.
Animate with transform and opacity, not with layout properties such as top or left.

Sources: image_tag (Shopify Liquid reference); Performance best practices for Shopify themes (Shopify.dev); Improving your online store performance (Shopify Help Center).

Plain HTML

Give every <img> and <video> width and height attributes: whole numbers of pixels, without a unit, in the image's own proportions. Keep it responsive with CSS such as img { max-width: 100%; height: auto; }.
With srcset, make every candidate the same aspect ratio, so one pair of attributes fits them all. In a <picture> that crops differently by screen, put width and height on each <source>.
Reserve space for ads, embeds and iframes with min-height or aspect-ratio in CSS, and keep the space, with a placeholder, when no ad arrives.
Show banners and notices without pushing the page down: reserve their space in advance, or lay them over the content.
For web fonts, use font-display: optional, or match the fallback font with size-adjust and the override descriptors, and preload the fonts the first screen needs with <link rel="preload">.
Animate with transform rather than top or left.

Sources: Optimize Cumulative Layout Shift (web.dev); The Image Embed element (MDN); Browser-level image lazy loading for the web (web.dev).

Examples

Bad
```
<img src="/img/team.jpg" alt="Our team outside the shop">
```
No size: the text below jumps down when the photo arrives.
Good
```
<img src="/img/team.jpg" width="1200" height="800"
     alt="Our team outside the shop">
```
The browser reserves a 3:2 box before the photo loads. With img { max-width: 100%; height: auto; } it still shrinks on a phone.
Bad
```
<img src="/img/team.jpg" width="100%" alt="Our team outside the shop">
```
width takes a whole number of pixels, not a percentage, and there is no height: set the width in CSS and the real size in the attributes.
Good
```
.ad-slot {
  min-height: 250px;
}
```
The ad's space is kept before it loads, so the content under it stays put.

Common mistakes

Setting only width, or a percentage, in the attributes. The browser needs both numbers, in pixels, to reserve the space.
Fixing the height in CSS while the width is fluid, which stretches the image. Set height: auto when the width can change.
Inserting a cookie notice, newsletter bar or promotion above content that is already showing.
Letting an ad slot collapse when no ad is returned, which moves everything below it when one arrives later.
Judging by a lab test alone. Shifts after loading, such as those caused by content loaded as a visitor scrolls, only show up in field data.

Questions and answers

What is a good CLS score?

web.dev calls 0.1 or less good, up to 0.25 needs improvement, and more than 0.25 poor, measured at the 75th percentile of page loads on phones and desktops separately. Search Console uses the same bands. SERPCompass flags pages over 0.25 in its lab test.

Do I need width and height if my CSS makes images 100% wide?

Yes. The attributes tell the browser the image's aspect ratio before it loads, so it can reserve the right amount of space; the CSS still decides the displayed width. Pair a fluid width with a height of auto in CSS, and the image scales without stretching or shifting.

Why does Search Console report a CLS problem that SERPCompass did not find?

Lab tests, ours included, only measure shifts while the page loads, on one visit. Search Console reports real Chrome users over the whole visit, so shifts that happen as people scroll, or that depend on their device, show up there and not in a lab test. The reverse can happen too: our lab counts every shift during one slow simulated load, which real visits may not see.

Does layout shift affect rankings?

CLS is one of the Core Web Vitals, which Google says are used by its ranking systems. Google also says there is no single page experience signal and that it shows the most relevant content even when the page experience is poor. We make no promise of a ranking change; a page that stays still is easier to read and to tap.

Do lazy-loaded images need width and height?

Yes, even more than others. A lazy-loaded image downloads as the visitor scrolls towards it, so without a reserved space it pushes the content they are reading. web.dev says lazy loading makes the attributes more important.

Slow-loading pages and a poor Largest Contentful Paint
Images that are too large or in an older format
All guides
Free tools: checks for robots.txt and llms.txt that need no account.

Sources

Every step above was checked against these documents on 29 October 2026. Vendors change their menus; if a step no longer matches, the vendor's page is the authority.

Start with a free scan of your site.

Two to five minutes, no account. You get your three most urgent findings, and the exact count of everything else.