Images without width and height: the CLS risk squirrel finds

What causes layout shift

Cumulative Layout Shift measures how much visible content moves after it has been painted. The most common cause is a replaced element with no declared size: the browser lays out the page with the element collapsed, then reflows everything below it once the file arrives and its real dimensions are known.

Declaring width and height on an <img> gives the browser the aspect ratio before the bytes arrive, so it can reserve the right box immediately. The attributes are unitless numbers and CSS still controls the rendered size, so width="1200" height="630" with style="width:100%;height:auto" is both responsive and stable. Iframes need the same treatment.

What squirrel checks

The rule runs on every crawled page and emits one or two checks:

• cls-images: fails with the message N image(s) without width/height (CLS risk) when more than five images lack dimensions, warns with the same message for one to five, and passes with All images have dimensions when none do. Each offending image src is listed as an item.
• cls-iframes: emitted only when at least one iframe lacks dimensions, warning with the message N iframe(s) without dimensions and listing each src.

An <img> counts as dimensioned when it has a non-empty width attribute other than auto, or a non-empty height attribute other than auto, or an inline style containing both the strings width and height. One attribute is therefore enough to clear the check even though the browser needs both to compute a ratio, and width="" clears nothing. Only images with a src are considered. An <iframe> is flagged when it has a src and either width or height is missing, so a srcdoc iframe is never reported.

The candidates come from a shared analysis of the page that six performance rules read, computed once per page.

Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.

How to fix it

<img src="/photo.jpg" width="1200" height="630" style="width:100%;height:auto" alt="" />

The attributes carry the aspect ratio and the CSS carries the layout. For an element whose size is only known at runtime, such as an ad slot or an embed, reserve the box in CSS instead:

.ad-slot { min-height: 250px; }

The common false positive is an image sized entirely in an external stylesheet with aspect-ratio. The browser is stable, but the check reads attributes and inline styles only, so it still reports the image.

Enable / disable

Disable this rule

[rules]
disable = ["perf/cls-hints"]

Disable all Performance rules

[rules]
disable = ["perf/*"]

Enable only this rule

[rules]
enable = ["perf/cls-hints"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• images/dimensions: the same attributes checked from the images category.
• images/aspect-mismatch: width and height attributes declaring a different ratio from the CSS box.
• perf/font-loading: font-display, the other common source of a late reflow.
• perf/carousel-hidden-eager: hidden slides that load eagerly and shift the page when revealed.

Performance findings ship in every audit next to the SEO, security and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Cumulative Layout Shift, web.dev
• The img element, HTML Standard
• aspect-ratio, MDN

Check your site

Run squirrel audit https://example.com and open the Performance section of the report. Every image and iframe missing dimensions is listed by page. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.