Core Web Vitals & Image Optimization — Speed Up Your Website

Updated 2025 · Covers LCP, CLS & INP · With a complete image optimization checklist

What Are Core Web Vitals?

Core Web Vitals are three metrics Google uses to measure real-world user experience. All three are directly impacted by how images are handled on your pages — making image optimization the single highest-leverage action for most sites.

┌─────────────────────────────────────────────────────────────────────┐
│                       Core Web Vitals Overview                       │
├──────────────────────┬──────────────────────┬───────────────────────┤
│         LCP          │         CLS          │          INP          │
│  Largest Contentful  │  Cumulative Layout   │  Interaction to       │
│       Paint          │       Shift          │   Next Paint          │
├──────────────────────┼──────────────────────┼───────────────────────┤
│  Measures how fast   │  Measures unexpected │  Measures page        │
│  your largest visible│  visual shifts —     │  responsiveness.      │
│  element loads.      │  often caused by     │  Large images that    │
│                      │  images without      │  block the main       │
│                      │  set dimensions.     │  thread delay it.     │
├──────────────────────┼──────────────────────┼───────────────────────┤
│  🎯 Target: < 2.5s   │  🎯 Target: < 0.1   │  🎯 Target: < 200ms  │
└──────────────────────┴──────────────────────┴───────────────────────┘

Core Web Vitals Score Thresholds

Metric	Good ✅	Needs Improvement ⚠️	Poor ❌
LCP	Under 2.5 seconds	2.5 – 4.0 seconds	Over 4.0 seconds
CLS	Under 0.1	0.1 – 0.25	Over 0.25
INP	Under 200ms	200 – 500ms	Over 500ms

LCP: How Images Impact It and How to Fix It

The LCP element is a large image in over 70% of all web pages. When that image is large, uncompressed, or discovered late by the browser, your LCP score suffers.

How a Page Loads Its LCP Image

Request starts
      │
      ▼
  HTML parsed ──→ Too late for LCP without preload
      │
      ▼
  Image discovered
      │
      ├─── With preload ──→ ⚡ Loading starts immediately
      │
      └─── Without preload ──→ ⏳ Up to 1.5s delay
      │
      ▼
  Image painted → LCP timestamp recorded

Fixes in Order of Impact

1. Convert to WebP
A WebP hero image is 25–35% smaller than the same JPG, loading proportionally faster. Use our free converter to convert in seconds. Learn more in our complete WebP guide.

2. Compress to 80–85% quality
Most hero images can be compressed to 80% quality with no visible difference. See our compression guide for exact settings per image type.

3. Add rel="preload"
Tell the browser to load your LCP image immediately — this is often the single biggest LCP improvement possible:

<link rel="preload" as="image" href="hero.webp">

4. Add fetchpriority="high"
Add directly to your LCP image element so the browser prioritizes it over other resources:

<img src="hero.webp" fetchpriority="high" alt="Hero image">

5. Serve from a CDN
A CDN reduces latency by serving images from a server geographically close to the user. Cloudflare’s free plan works well for most sites.

6. Use responsive images (srcset)
Don’t serve a 1600px image to a 375px mobile screen:

<img
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  src="hero-800.webp"
  alt="Hero image"
>

Quick LCP test: Open Chrome DevTools → Performance tab → Look for the element labeled “LCP”. If it’s an image, that’s your highest-priority optimization target. Converting it to WebP and preloading it typically cuts LCP by 0.5–1.5 seconds.

CLS: How Images Cause Layout Shifts and How to Stop Them

CLS measures unexpected layout shifts — when content jumps around as the page loads. Images without explicit width and height attributes are the #1 cause of CLS. The browser can’t reserve space for an image it hasn’t loaded yet, so content shifts when it appears.

What Happens Without Dimensions

Without width/height set:
┌───────────────────────────────┐
│ Page headline                  │  ← Renders immediately
│                               │
│ ░░░░ Loading... ░░░░          │  ← Browser doesn't know the size
│                               │
│ Body text paragraph            │
└───────────────────────────────┘
        ↓ After image loads
┌───────────────────────────────┐
│ Page headline                  │
│ ┌───────────────────────────┐ │
│ │         Image             │ │  ← Image appears, pushes content
│ └───────────────────────────┘ │
│ Body text paragraph ←CLS! ↑   │  ← Content jumps = bad UX + bad score
└───────────────────────────────┘

The Fix: Always Set Dimensions

<!-- ❌ Bad — causes CLS -->
<img src="photo.webp" alt="Product photo">

<!-- ✅ Good — prevents CLS -->
<img src="photo.webp" alt="Product photo" width="800" height="600">

<!-- ✅ For responsive images — use aspect-ratio in CSS -->
<style>
  img { aspect-ratio: 16/9; width: 100%; height: auto; }
</style>

Additional Rules to Prevent CLS

Never inject images dynamically above existing content
Reserve container space before async images load
Use skeleton screens for images loaded asynchronously

Image Lazy Loading — LCP vs Below-the-Fold

Lazy loading defers off-screen images until the user scrolls close to them — reducing initial page weight. But applying it incorrectly destroys your LCP score.

Image Position	Correct Attribute	Why
Hero / LCP image	`loading="eager"` (default)	Never lazy-load your LCP image — this is the most common mistake
Above-the-fold images	`loading="eager"`	Load these immediately for visual completeness
Below-the-fold images	`loading="lazy"`	Defer these to reduce initial page weight and improve LCP

<!-- Hero image — always eager -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="...">

<!-- Content images — lazy below the fold -->
<img src="article-photo.webp" loading="lazy" alt="...">

Before vs After: Impact of Image Optimization on Core Web Vitals

Before optimization:
  LCP  ████████████████░░░░  3.8s ❌  (uncompressed JPG, no preload)
  CLS  ████░░░░░░░░░░░░░░░░  0.24 ❌  (images without dimensions)
  INP  ██████░░░░░░░░░░░░░░  280ms ⚠️

After applying all image optimizations:
  LCP  ████████░░░░░░░░░░░░  1.9s ✅  (WebP + preload + fetchpriority)
  CLS  █░░░░░░░░░░░░░░░░░░░  0.04 ✅  (all images have width/height)
  INP  ████░░░░░░░░░░░░░░░░  160ms ✅

Complete Image Optimization Checklist for Core Web Vitals

[ ] Convert all images to WebP format for 25–35% size reduction
[ ] Compress images to 75–85% quality — see our compression guide
[ ] Add width and height attributes to every <img> tag to prevent CLS
[ ] Add rel="preload" and fetchpriority="high" to your LCP image
[ ] Add loading="lazy" to all below-the-fold images only
[ ] Use srcset for responsive images — serve the correct size per device
[ ] Use a CDN to serve images from edge locations
[ ] Batch convert your image library — see our batch convert guide
[ ] Verify improvements with PageSpeed Insights — aim for green LCP (< 2.5s) and CLS (< 0.1)

Frequently Asked Questions

What are Core Web Vitals?
Core Web Vitals are three metrics Google uses to measure real-world user experience: LCP (load speed of your largest visible element), CLS (visual stability — does content jump around?), and INP (responsiveness to user interaction). They are direct Google ranking factors.

How do I fix a slow LCP score?
The most impactful fixes for LCP are: (1) Convert your hero image to WebP and compress it to 80–85% quality. (2) Add rel="preload" to the LCP image in your HTML <head>. (3) Add fetchpriority="high" to the LCP image element. (4) Serve from a CDN. These steps alone typically cut LCP by 0.5–2 seconds.

What causes CLS and how do I fix it?
The most common cause of CLS is images without explicit width and height attributes. The browser can’t reserve space before the image loads, so content shifts when it appears. Fix: add width and height to every img tag, and use aspect-ratio in CSS for responsive images.

Should I add loading="lazy" to all images?
No. Never add loading="lazy" to your LCP image or any above-the-fold image — this will delay their loading and hurt your LCP score significantly. Only add it to images that are below the visible viewport on initial page load.

Authoritative External Resources

Related Guides

Last updated: May 2025 · MixsMix — Free Image Converter