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 warnings are non-fatal messages the browser emits about deprecated APIs, security best-practice violations, performance hints, or potential bugs. They do not break the page today, but most warnings indicate something that will eventually become a hard error. Fixing this issue means triaging each warning, resolving the actionable ones, and adding monitoring so new warnings get caught early.

Where to make the change

• Open DevTools, Console tab: filter the panel to Warnings only. Each entry includes a link to the source location and often documentation explaining the recommended replacement.
• Application code: update the call site to use the modern API. Most browser deprecations include a recommended replacement in the warning text.
• Third-party tags: contact the vendor or upgrade to the current loader script. Outdated tags are the most common source of deprecation warnings.

Common causes and how to resolve them

• Deprecated DOM or Web APIs: swap the deprecated method for the modern equivalent. The MDN documentation linked in the warning describes the replacement.
• Performance hints (forced reflow, large layout shifts, long tasks): investigate with the Performance tab. These warnings often map directly to Core Web Vitals failures.
• Insecure features (Permissions-Policy, deprecated headers): update server response headers to use the current syntax.
• Cookie warnings (SameSite, Secure): set explicit SameSite and Secure attributes on every cookie, especially those used in cross-site contexts.

Best practices

• Resolve warnings before they become errors: deprecation cycles usually run six to twelve months. Fix early to avoid emergency patches when the API is removed.
• Keep the console clean on production: a noisy console hides genuine new issues among the chronic ones.
• Pin third-party scripts to maintained versions: outdated vendor scripts are the dominant source of long-running warnings.

A Content Delivery Network serves static assets from edge locations close to the user, reducing latency, improving cache hit rates, and offloading traffic from the origin server. Fixing this issue means routing your images, JavaScript, CSS, and fonts through a CDN so visitors anywhere in the world get fast, consistent delivery.

Where to make the change

• Cloud platforms: Cloudflare, Fastly, AWS CloudFront, Bunny.net, and similar providers offer free or low-cost CDN tiers. Sign up, point your domain through the CDN, and enable caching for static asset paths.
• WordPress: use a CDN integration plugin or sign up directly with Cloudflare and update the site's nameservers.
• Shopify: Shopify serves storefront assets through its own CDN automatically; the failure usually points at custom assets uploaded outside the platform.
• Headless or framework sites: deploying to Vercel, Netlify, or Cloudflare Pages puts the entire site behind a global CDN by default.

Common causes and how to resolve them

• No CDN at all: add one. Even a free Cloudflare account in front of an existing host produces measurable speed gains.
• CDN configured but bypassed for some assets: ensure all img, script, link, and font URLs use the CDN hostname rather than the origin.
• Cache headers prevent caching: long-lived assets need cache-control headers like public, max-age=31536000, immutable. Without them, the CDN cannot cache effectively.
• Origin-only third-party scripts: many vendors already serve their scripts via their own CDN. Use the URL the vendor provides rather than self-hosting.

Best practices

• Use a versioned asset path: filenames like app.a3f9.css let you set far-future cache headers without ever serving stale files. Update the filename when content changes.
• Enable Brotli at the edge: most CDNs can compress responses on the fly, including text formats.
• Pre-warm caches for new launches: after a major release, request key URLs through every region (or use the CDN's purge-and-prefetch tools) so users do not hit cold caches.

This test fails when external JavaScript files are not minified. Minification strips whitespace, comments, and shortens identifiers, producing smaller files that are faster to download and parse. Fixing this issue is almost always a build configuration change rather than a code change.

Where to make the change

• Build pipeline: enable minification in your bundler. Webpack, Rollup, Vite, esbuild, and Parcel all minify by default in production mode.
• WordPress: a caching or optimization plugin can minify enqueued scripts on the fly.
• Shopify: Shopify serves theme JavaScript minified automatically when delivered through the platform asset pipeline.
• CDN-based minification: Cloudflare and others offer auto-minify for JavaScript responses if you cannot change the build.

Common causes and how to resolve them

• Build running in development mode: ensure the production build (NODE_ENV=production or equivalent) runs in deploy.
• Minifier disabled in config: a previous config tweak may have turned minification off. Re-enable it explicitly.
• Inline scripts not minified: minifiers usually skip inline scripts. Move large inline scripts to external files so they are processed.

Best practices

• Pair minification with compression: a minified file compresses even better with Brotli or Gzip.
• Ship sourcemaps: upload sourcemaps to your error monitoring tool so production stack traces remain readable.
• Use modern syntax targets: targeting modern browsers in your build produces smaller output than transpiling everything down to ES5.

This test fails when JavaScript or CSS resources block the browser from rendering visible content. Each render-blocking file delays the first paint, and on slower networks the cumulative impact can be severe. Fixing this issue means inlining the truly critical CSS, deferring or asynchronously loading non-essential scripts, and removing unused code.

Example

<head>
  <!-- Inline only above-the-fold critical CSS -->
  <style>/* critical styles here */</style>

  <!-- Load full stylesheet asynchronously -->
  <link rel="preload" href="/styles/main.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">

  <!-- Defer non-critical scripts -->
  <script src="/scripts/app.js" defer></script>
</head>

Where to make the change

• Application code or templates: identify the CSS and JavaScript needed for the initial render and load only those synchronously. Defer the rest.
• Build pipeline: use a critical CSS extractor (such as critical or penthouse) to generate the above-the-fold styles automatically.
• WordPress: performance plugins offer "delay JS execution" and "load CSS asynchronously" options that handle most of this without code changes.
• Headless or framework sites: use the framework's preload and code-splitting hints to control what blocks rendering.

Common causes and how to resolve them

• Single large stylesheet blocking render: inline critical CSS for the first viewport, load the full stylesheet asynchronously.
• Synchronous third-party scripts in the head: add defer or async, or move them to the end of the body.
• Web fonts blocking text rendering: add font-display: swap in @font-face rules so the fallback font shows immediately.
• Render-blocking @import in CSS: replace with separate <link rel="stylesheet"> tags so the browser can fetch them in parallel.

Best practices

• Use defer for scripts that need the DOM: they execute after parsing but before DOMContentLoaded.
• Use async for fully independent scripts: they execute as soon as they download, in any order.
• Preload the critical request chain: tell the browser early about fonts and key assets with <link rel="preload">.
• Audit with Lighthouse: the Render-blocking resources audit lists every offending file with the estimated time saved by deferring it.