Google's 2026 Core Update: CLS Still Plagues the Web

Google's latest Core Web Vitals data from the Chrome UX Report (CrUX) shows that CLS remains the most failed metric across desktop and mobile. While LCP and INP have improved steadily thanks to format adoption and faster JavaScript runtimes, CLS hasn't budged — roughly 22% of mobile pages still fail the 0.1 threshold as of Q1 2026. And the single largest contributor? Images without explicit dimensions.

The problem is old but persistent. Browser rendering engines reserve space for elements only when they know the dimensions in advance. When an image tag lacks width and height attributes, the browser assigns it zero height initially. Once the image loads, the browser suddenly has real dimensions and pushes everything below it downward — that is a layout shift. One hero image shifting 300 pixels can easily push your CLS score past 0.25, well above the "good" threshold of 0.1.

In March 2026, Google rolled out a refined CWV scoring methodology that weights CLS slightly higher for pages with above-the-fold images. If your LCP element is an image and it shifts the layout during load, you are penalized twice — once for slow LCP, once for the shift itself. This makes fixing image-related CLS more urgent than ever for SEO teams.

The business impact is measurable. A 2025 study by Search Engine Land found that pages failing CLS had 15% higher bounce rates and 8% lower conversion rates compared to passing pages on the same domain. For an e-commerce site processing 10,000 sessions per day, that translates to roughly 1,500 lost sessions and dozens of missed conversions daily — all from a fixable HTML attribute issue.

A study by HTTP Archive analyzed 4 million pages and found that 68% of layout shifts are caused by images. The remaining 32% come from web fonts, ads, and dynamically injected content. Of the image-caused shifts, 91% could be prevented simply by adding width and height attributes to the <img> tag. That is a one-line HTML fix that addresses the majority of CLS problems.

Why Images Are the #1 CLS Culprit

Three rendering scenarios cause virtually all image-related layout shifts:

Scenario 1: Missing dimensions on img tags. This is the classic case and still the most common. A <img src="hero.jpg"> tag with no width or height tells the browser nothing about the space to reserve. The browser renders the page with zero height for that image. When the image finally loads — say, 1.2 seconds later on a 4G connection — the content below jumps downward by however many pixels tall the image happens to be. If you have three images on a page each missing dimensions, the cumulative shifts can easily exceed 0.5.

Scenario 2: CSS aspect-ratio without HTML fallback. Modern CSS aspect-ratio is excellent, but it is not universally supported in older browsers. If you rely solely on aspect-ratio without also providing width and height attributes, those older browsers still see zero height initially. The fix: use both — HTML attributes for the fallback, CSS for modern browsers. The browser uses whichever it supports.

Scenario 3: Responsive images without source dimensions. When using srcset or <picture> elements, the browser still needs to know the intrinsic dimensions of the default source. If you provide srcset but omit width and height on the <img> element, the browser cannot calculate the aspect ratio at each breakpoint. Each time the viewport changes and a different source is selected, the layout reflows.

The common thread: the browser needs to know the aspect ratio before the image loads. Every technique below achieves that goal differently, but they all solve the same fundamental problem — telling the browser "this much space is reserved" before the bytes arrive.

It is worth noting that ads and embeds also contribute to CLS, but they are harder to control because third-party code often injects content dynamically. Images, by contrast, are entirely within your control. Fixing image-related CLS is the lowest-hanging fruit: no third-party coordination needed, no complex JavaScript, just proper HTML attributes and a few lines of CSS.

Three Code Fixes That Actually Work

Fix 1: Always include width and height attributes

<img src="hero.jpg" width="1600" height="900" alt="Hero banner" />

This is the simplest fix and the one with the highest ROI. The browser uses these attributes to calculate the aspect ratio (1600:900 = 16:9) and reserves space immediately, before the image loads. Modern browsers automatically apply this ratio even if CSS later changes the rendered width via width: 100% or max-width. The key insight: the attributes set the ratio, not the display size — CSS handles the display size.

Fix 2: CSS aspect-ratio for fluid containers

.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

For responsive containers where the width changes dynamically, aspect-ratio maintains the height proportionally. Combine with object-fit: cover to prevent distortion when the source image does not match the container ratio exactly. This approach is ideal for hero sections, card thumbnails, and gallery grids where you want strict control over the visual layout.

Fix 3: Wrapper with padding-bottom (legacy fallback)

.image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  overflow: hidden;
}
.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

This technique predates aspect-ratio but still works everywhere. The padding-bottom percentage is relative to the container width, creating a fixed-aspect-ratio box. It is verbose but bulletproof — use it if you need to support browsers older than 2021 or if you are working in a corporate environment with locked-down legacy browsers.

Pre-Launch CLS Audit Checklist

Before shipping any page with images, run through this checklist:

  1. Every img tag has width and height attributes. No exceptions — even decorative and background images need them. Set them to the intrinsic pixel dimensions of the source file.
  2. Hero and above-the-fold images use aspect-ratio in CSS. This provides a second layer of protection beyond HTML attributes, ensuring the container height is correct even before the HTML parser reaches the img tag.
  3. Responsive images include width and height on the img element. The attributes should match the largest source in your srcset — the browser will scale down proportionally.
  4. Lazy-loaded images still have explicit dimensions. The loading="lazy" attribute defers loading but does NOT prevent CLS — the image still shifts the layout when it eventually loads if dimensions are missing.
  5. Background images in CSS have a min-height. A background-image with no min-height can collapse to zero if the container has no other content, then expand when the image loads.
  6. Test with Chrome DevTools Lighthouse. Open DevTools, run a Performance audit. The CLS score appears in the Diagnostics section with a breakdown of each contributing shift.
  7. Check field data at PageSpeed Insights. Lab data (Lighthouse) simulates a single device; field data (CrUX) reflects real user experience across thousands of devices and connections. Both matter for SEO rankings.
  8. Audit third-party embeds. Instagram embeds, Twitter cards, and YouTube iframes often lack dimensions. Wrap them in a container with aspect-ratio to prevent the iframe from causing shifts.

For teams managing dozens of pages, manually checking every img tag is tedious. The Image Toolbox web optimizer can scan your entire HTML codebase and flag every image tag missing dimensions, then generate corrected markup with proper width/height attributes and aspect-ratio CSS in a single batch pass — turning a multi-hour audit into a five-minute review.

References