This test fails when one or more images on the page are served at dimensions significantly larger than the size at which the browser actually renders them. Fixing this issue means resizing the source files (or serving responsive variants) so the bytes downloaded match the pixels actually displayed. The result is faster page loads, lower data usage, and better Core Web Vitals scores.

Example

<img
  src="/images/hero-800.jpg"
  srcset="/images/hero-400.jpg 400w,
          /images/hero-800.jpg 800w,
          /images/hero-1600.jpg 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Marathon runners at sunrise"
  width="800" height="450">

Where to make the change

• Raw HTML: use srcset and sizes to let the browser pick the right variant for the user's viewport. Always include intrinsic width and height attributes.
• WordPress: WordPress generates multiple image sizes automatically. Use the the_post_thumbnail() helper or the block editor's image block, both of which emit responsive srcset markup.
• Shopify: use the image_url Liquid filter with size parameters (for example {{ image | image_url: width: 800 }}) and pair with image_tag to emit a responsive image.
• Wix or Squarespace: both platforms generate responsive variants automatically; this issue is typically caused by uploading a deliberately oversized image.
• Headless or framework sites: use the framework's image component (for example next/image or astro:assets), which generates responsive variants and lazy-loads off-screen images.

Common causes and how to resolve them

• Original camera or stock-photo file uploaded as-is: a 6000-pixel-wide JPEG rendered in a 400-pixel column wastes most of the bytes. Resize the source or generate responsive variants.
• No srcset: the browser has no choice but to use the single source. Add multiple variants so mobile users get smaller files.
• Hero images sized for ultra-wide displays: if your largest layout is 1600 pixels, do not ship a 4000-pixel original.
• Background images set in CSS without responsive sources: use the image-set() CSS function or media queries to swap in different image files at different breakpoints.

Best practices

• Generate variants at common widths: 400, 800, 1200, and 1600 pixels covers most viewports cleanly.
• Always set width and height: intrinsic dimensions let the browser reserve space and avoid layout shift, helping CLS.
• Lazy-load off-screen images: add loading="lazy" to images below the fold so the browser only downloads them when needed.
• Pair with modern formats: resizing alone is good; resizing and serving WebP or AVIF compounds the savings.

This test fails when one or more images are rendered at an aspect ratio meaningfully different from the source file's native ratio, producing stretched or squashed visuals. Fixing this issue means either using width and height attributes that match the file's real dimensions or replacing the source with a correctly proportioned crop.

Example

<!-- Source file is 1600 x 900 (16:9). Set matching attributes: -->
<img src="/images/marathon-1600.jpg"
     alt="Marathon runners at sunrise"
     width="1600" height="900"
     style="max-width: 100%; height: auto;">

Where to make the change

• Raw HTML and CSS: set the width and height attributes to the source file's native dimensions. Use CSS height: auto when scaling responsively so the browser preserves the ratio.
• WordPress: when inserting an image via the block editor, choose the image's intended size rather than overriding dimensions in custom CSS.
• Shopify, Wix, or Squarespace: use the platform's built-in image cropper so the displayed crop matches the source file you upload.
• Headless or framework sites: components like next/image require both width and height, which prevents distortion when the layout scales.

Common causes and how to resolve them

• Hard-coded width and height that do not match the file: recompute them from the source dimensions or remove them and rely on the file's intrinsic ratio.
• Container has a fixed height that crops the image: use CSS object-fit: cover if cropping is intentional, or change the container so the image keeps its natural ratio.
• Wrong source file uploaded: swap in a correctly proportioned crop rather than stretching the wrong file in CSS.

Best practices

• Always set both width and height: the browser uses these to reserve space and avoid layout shift before the image loads, which helps CLS.
• Use object-fit when cropping is intentional: cover fills the container without distortion; contain letterboxes to preserve the full image.
• Standardize on a few aspect ratios: picking one or two ratios per template makes it easier to crop assets consistently and avoid one-off distortions.

Console errors include any unhandled JavaScript exceptions, network request failures, security warnings, or deprecation notices the browser emits while loading the page. Fixing this issue means resolving the underlying problem each error reports rather than suppressing the message. Even errors that do not visibly break the page can degrade performance, leak data, or trip Core Web Vitals.

Where to make the change

• Open DevTools, Console tab: expand each entry to see the file, line, and stack trace. Right-click an entry to filter, save, or jump to the source.
• Application code: patch the offending script (see js-errors). For network failures, fix the failing endpoint or remove the stale request.
• Third-party tags: if the error originates in an analytics, ad, or widget script, update the snippet, switch to the vendor's current loader, or remove unused tags.

Common causes and how to resolve them

• JavaScript runtime errors: see the JS Error Test fix; the same approach applies.
• Failed network requests (404 or 5xx): remove the dead request or fix the endpoint. Stale tracking pixels and removed assets are common culprits.
• Mixed content warnings: the page is HTTPS but loads an HTTP resource. Update the resource URL to https://.
• CORS or CSP violations: tighten or expand the policy as appropriate. CSP errors usually require allowlisting the offending origin in the response header.
• Deprecation warnings: update the call site to use the recommended API. These do not break the page today but will when the deprecation cycle completes.

Best practices

• Treat the console as a build artifact: a clean console is a sign of a healthy page. Aim for zero errors and zero warnings on production routes.
• Use error monitoring in production: real users hit edge cases your local environment will never reproduce. A monitoring service surfaces them with frequency data.
• Defer or remove unused third-party scripts: every removed script is one fewer source of console noise.