Media may load without reserved space

Why it matters

web.dev's guide to optimising Cumulative Layout Shift names images, embeds and iframes without dimensions among the most common causes of layout shifts. When the browser knows an element's height before the file arrives, it can keep that space free, so the text and buttons below it stay in place.

What to do

1. Open the finding: it shows each unsized element with its original opening tag, its declared width and height, and the CSS declarations that matched it, with their stylesheet, selector and position.
2. Add width and height attributes that match the file's proportions, or give the element a CSS height or min-height, or a width together with aspect-ratio.
3. For an iframe or embed, set the height on the element itself. A surrounding container's height alone does not prove that the element reserves space, but a confirmed parent height can provide the basis for an explicit percentage height on the element.
4. Check in a browser that content no longer moves while the media loads.

When to leave it as it is: If the element cannot move other content, for example because a container around it already has a fixed height, you can leave it.

What we read

We read the complete original HTML of pages that returned 200 and appear to be rendered on the server, using the audit's existing HTML5 parser, including navigation and footer. We inspect <img>, <video>, <iframe> and <embed> elements outside non-rendered boundaries such as <template>, <noscript> and <script>. Not every namespace-related layout difference is modelled. Nothing is rendered and no JavaScript runs; pages that seem to depend on JavaScript are marked as not checked, and quirks-mode layout differences are not modelled.

We apply the page's styles in their cascade order: stylesheets linked anywhere in the document, <style> blocks, the files they pull in with @import up to three levels deep, and inline style attributes, using the bytes the audit retained. Print-only stylesheets and @media rules that do not apply to screens are skipped. Only selectors built from element names, classes and IDs, joined by spaces or >, are matched; a rule that sets sizing, background, display, visibility or layout properties with any other selector leaves the page not checked. Imports with a CSS layer, and unresolved conditional imports, cannot confirm sizing.

An element counts as sized when it ends up with a positive height: from its height attribute, a CSS height or min-height in pixels, a percentage of a parent whose height is known, or a known width combined with an aspect ratio from its attributes or CSS aspect-ratio. Width alone, or an aspect ratio without a known width, does not reserve height.

Elements hidden with display: none or visibility: hidden are skipped only when their visibility is confirmed. A conditional override cannot establish that an element stays hidden. The hidden attribute, a closed <details> or <dialog>, media nested in other media, keywords such as auto, calc() or var() values, and position, float, transform or animation on the element or an ancestor cannot be resolved and leave the page not checked.

The page is reported only when everything relevant could be read and at least one displayed media element has no reserved height. If any media element, stylesheet or rule cannot be resolved, the whole page is marked as not checked, even when another element is clearly unsized. If complete evidence shows no displayed media, this rule does not apply; that absence does not confirm an earlier problem fixed.

Example & evidence

Illustrative example — schematic HTML and CSS, not a live audit.

The page https://bakery.example/menu/ links /assets/site.css, which contains this rule:

.hero img {
  width: 600px;
  aspect-ratio: 3 / 2;
}

<div class="hero"><img src="/hero.jpg" alt="Our bakery"></div>
<img src="/bread.jpg" alt="Fresh bread">

The first image has a width and an aspect ratio, so its height is reserved. The second has no height in its HTML or CSS, so the page is reported.

<img src="/bread.jpg" width="1200" height="800" alt="Fresh bread">

A possible correction: declare the second image's size. The next full audit confirms the fix when it reads the same page and all of its CSS in full and finds every displayed media element sized; removing all media leaves the earlier problem unconfirmed.

Confirm & check again

Check for yourself: open the page in Chrome with network throttling turned on in the developer tools and watch whether text moves as images and frames appear; the Performance panel marks layout shifts and the elements that moved.

Check again: Full audit — run a new full audit of the site. The finding is confirmed fixed only when the same page is read in full again with all of its stylesheets and every displayed image, video, iframe and embed on it has reserved height. Removing all media from the page, a missing stylesheet or any rule the check cannot resolve leaves the finding unconfirmed.

Limits & sources

This is a static reading of the captured HTML and CSS: we do not run JavaScript, render the page or measure Cumulative Layout Shift, and reserving space does not by itself prove a steadier page. Many common CSS patterns cannot yet be resolved, including height: auto, max-width: 100%, positioning, floats, transforms and selectors with pseudo-classes or attributes; on a media element or its ancestors they leave the page not checked. A container's fixed height alone does not confirm reserved space on the media element; a confirmed parent height can provide the basis for an explicit percentage height. Media added by scripts is not seen.

Confidence: Medium because declared sizes show where the browser can keep space free, but whether content actually moves depends on how the page renders.

Sources

• web.dev, Optimize Cumulative Layout Shift — lists images, ads, embeds and iframes without dimensions among the most common causes of poor CLS, and advises declaring width and height on images and video or reserving the space with CSS such as aspect-ratio or min-height. Checked 10 October 2026.

Editorial review: 2 November 2026