DEV Community

Hardi
Hardi

Posted on

Core Web Vitals: How Image Optimization Impacts Your Lighthouse Score

#webdev #programming #javascript #devops

Your Lighthouse performance score directly impacts SEO rankings, user experience, and conversion rates. While many factors contribute to Core Web Vitals, images often represent the biggest opportunity for improvement—and the easiest wins.

In this deep dive, we'll explore exactly how image optimization affects each Core Web Vital, backed by real data and actionable strategies you can implement today.

Understanding Core Web Vitals and Images

Core Web Vitals measure real user experience through three key metrics:

  • Largest Contentful Paint (LCP): Time until the largest visible element loads
  • First Input Delay (FID): Time from first user interaction to browser response
  • Cumulative Layout Shift (CLS): Visual stability during page load

Here's the crucial insight: images impact all three metrics, often more than any other factor.

The Image Impact Breakdown 

// Typical performance impact of images on Core Web Vitals
const imageImpact = {
  LCP: {
    impact: "Direct and severe",
    commonCause: "Hero images, above-fold content images",
    improvementPotential: "2-5 seconds reduction possible"
  },
  FID: {
    impact: "Indirect but significant", 
    commonCause: "Large images blocking main thread during decode",
    improvementPotential: "50-200ms improvement typical"
  },
  CLS: {
    impact: "Direct when dimensions unknown",
    commonCause: "Images loading without defined dimensions",
    improvementPotential: "0.1-0.25 CLS reduction common"
  }
};
Enter fullscreen mode Exit fullscreen mode

Largest Contentful Paint (LCP): The Big Winner

LCP measures when the largest visible element finishes loading. In most cases, this is an image—making image optimization your highest-impact LCP improvement strategy.

Real-World LCP Improvements

I recently optimized a client's e-commerce site and documented the results:

Optimization Before After Improvement
Format (JPEG → WebP) 3.2s 2.1s -34%
+ Responsive sizing 2.1s 1.4s -33%
+ Preloading 1.4s 0.9s -36%
Total improvement 3.2s 0.9s -72%

LCP Optimization Strategies

1. Optimize Your Hero Image 

<!-- Bad: Single large image -->
<img src="hero-4k.jpg" alt="Hero image">

<!-- Good: Responsive with modern formats -->
<picture>
  <source 
    srcset="hero-400.avif 400w,
            hero-800.avif 800w,
            hero-1200.avif 1200w,
            hero-1600.avif 1600w"
    sizes="100vw"
    type="image/avif">
  <source 
    srcset="hero-400.webp 400w,
            hero-800.webp 800w,
            hero-1200.webp 1200w,
            hero-1600.webp 1600w"
    sizes="100vw"
    type="image/webp">
  <img 
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w,
            hero-800.jpg 800w,
            hero-1200.jpg 1200w,
            hero-1600.jpg 1600w"
    sizes="100vw"
    alt="Hero image"
    fetchpriority="high">
</picture>
Enter fullscreen mode Exit fullscreen mode

2. Preload Critical Images 

<!-- Preload the hero image -->
<link rel="preload" as="image" href="hero-800.webp" fetchpriority="high">

<!-- For responsive images, preload the most likely size -->
<link rel="preload" as="image" 
      href="hero-800.webp"
      imagesrcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
      imagesizes="100vw">
Enter fullscreen mode Exit fullscreen mode

3. Use the Priority Hints API 

<!-- High priority for LCP candidate -->
<img src="hero.webp" alt="Hero" fetchpriority="high">

<!-- Low priority for below-fold images -->
<img src="footer-logo.webp" alt="Logo" fetchpriority="low" loading="lazy">
Enter fullscreen mode Exit fullscreen mode

Measuring LCP Impact 

// Monitor LCP with real user data
function measureLCP() {
  new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    const lastEntry = entries[entries.length - 1];

    console.log('LCP:', lastEntry.startTime);

    // Track what element caused LCP
    if (lastEntry.element && lastEntry.element.tagName === 'IMG') {
      console.log('LCP Element:', lastEntry.element.src);
      console.log('LCP Element size:', lastEntry.size);
    }

    // Send to analytics
    gtag('event', 'LCP', {
      value: Math.round(lastEntry.startTime),
      element_type: lastEntry.element?.tagName || 'unknown'
    });
  }).observe({entryTypes: ['largest-contentful-paint']});
}

measureLCP();
Enter fullscreen mode Exit fullscreen mode

First Input Delay (FID): The Hidden Impact

While images don't directly cause FID, they can significantly impact it through main thread blocking during image decode operations.

How Images Affect FID 

// Large images can block the main thread during decode
const problematicScenarios = {
  largeImages: {
    issue: "Decoding blocks main thread",
    solution: "Use smaller images, lazy loading"
  },
  manyImages: {
    issue: "Multiple simultaneous decodes",
    solution: "Throttle image loading, use web workers"
  },
  highResolution: {
    issue: "Memory pressure causes janky interactions",
    solution: "Serve appropriate DPI, use responsive images"
  }
};
Enter fullscreen mode Exit fullscreen mode

FID Optimization Techniques

1. Throttle Image Loading 

class ThrottledImageLoader {
  constructor(maxConcurrent = 2) {
    this.maxConcurrent = maxConcurrent;
    this.loading = new Set();
    this.queue = [];
  }

  async loadImage(img) {
    return new Promise((resolve, reject) => {
      this.queue.push({ img, resolve, reject });
      this.processQueue();
    });
  }

  async processQueue() {
    if (this.loading.size >= this.maxConcurrent || this.queue.length === 0) {
      return;
    }

    const { img, resolve, reject } = this.queue.shift();
    this.loading.add(img);

    try {
      await this.loadSingleImage(img);
      resolve();
    } catch (error) {
      reject(error);
    } finally {
      this.loading.delete(img);
      this.processQueue(); // Process next in queue
    }
  }

  loadSingleImage(img) {
    return new Promise((resolve, reject) => {
      if (img.complete) {
        resolve();
        return;
      }

      img.onload = resolve;
      img.onerror = reject;

      // Set src only when ready to load
      if (img.dataset.src) {
        img.src = img.dataset.src;
      }
    });
  }
}

// Usage with intersection observer
const loader = new ThrottledImageLoader(3);
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loader.loadImage(entry.target);
      observer.unobserve(entry.target);
    }
  });
});
Enter fullscreen mode Exit fullscreen mode

2. Decode Images Off the Main Thread 

// Modern approach using decode() API
async function loadImageSafely(img, src) {
  try {
    img.src = src;

    // Decode off main thread if supported
    if ('decode' in img) {
      await img.decode();
    }

    img.classList.add('loaded');
  } catch (error) {
    console.warn('Image decode failed:', error);
    // Fallback handling
  }
}

// Usage
const heroImage = document.querySelector('.hero-image');
loadImageSafely(heroImage, 'hero-optimized.webp');
Enter fullscreen mode Exit fullscreen mode

FID Monitoring 

// Monitor FID and correlate with image loading
function monitorFID() {
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      const FID = entry.processingStart - entry.startTime;

      console.log('FID:', FID);

      // Check if images were loading during this time
      const loadingImages = document.querySelectorAll('img[src]:not(.loaded)').length;

      gtag('event', 'FID', {
        value: Math.round(FID),
        images_loading: loadingImages
      });
    }
  }).observe({type: 'first-input', buffered: true});
}
Enter fullscreen mode Exit fullscreen mode

Cumulative Layout Shift (CLS): Preventing Image-Induced Shifts

Images without defined dimensions are a leading cause of layout shifts. The solution is surprisingly simple—yet often overlooked.

The CLS Problem with Images 

<!-- Bad: No dimensions specified -->
<img src="product.jpg" alt="Product">

<!-- Good: Dimensions prevent layout shift -->
<img src="product.jpg" alt="Product" width="400" height="300">

<!-- Better: Responsive with aspect ratio -->
<img src="product.jpg" alt="Product" 
     width="400" height="300"
     style="max-width: 100%; height: auto;">
Enter fullscreen mode Exit fullscreen mode

Modern CLS Prevention 

/* Using aspect-ratio for modern browsers */
.image-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 1) {
  .image-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
  }

  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Dynamic Dimension Detection 

// Automatically set dimensions for CLS prevention
function preventImageCLS() {
  const images = document.querySelectorAll('img:not([width])');

  images.forEach(async (img) => {
    if (img.dataset.width && img.dataset.height) {
      img.width = img.dataset.width;
      img.height = img.dataset.height;
      return;
    }

    // For images already loaded
    if (img.complete && img.naturalWidth) {
      img.width = img.naturalWidth;
      img.height = img.naturalHeight;
      return;
    }

    // For images still loading
    img.onload = () => {
      img.width = img.naturalWidth;
      img.height = img.naturalHeight;
    };
  });
}

// Run on page load and for dynamically added images
preventImageCLS();

// For SPA routing
const observer = new MutationObserver(() => {
  preventImageCLS();
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});
Enter fullscreen mode Exit fullscreen mode

Real-World Case Study: Complete Optimization

Let me walk you through a complete optimization of a news website that improved all three Core Web Vitals:

Before Optimization

  • LCP: 4.1 seconds (Poor)
  • FID: 285ms (Needs Improvement)
  • CLS: 0.31 (Poor)
  • Lighthouse Score: 23/100

Step 1: Format and Size Optimization 

# Converting hero images to modern formats
# I used multiple tools including online converters for quick testing
Enter fullscreen mode Exit fullscreen mode

When implementing these optimizations, I often use tools like Image Converter to quickly test different formats and quality settings, ensuring I find the optimal balance between file size and visual quality before implementing the changes in production.

Step 2: Implementation Changes 

<!-- Hero section optimization -->
<div class="hero" style="aspect-ratio: 16/9;">
  <picture>
    <source 
      srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
      sizes="100vw"
      type="image/avif">
    <source 
      srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
      sizes="100vw"
      type="image/webp">
    <img 
      src="hero-800.jpg"
      srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
      sizes="100vw"
      alt="Breaking news hero"
      width="1200"
      height="675"
      fetchpriority="high">
  </picture>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 3: JavaScript Optimization 

// Implemented throttled loading for article images
const articleImages = document.querySelectorAll('.article-content img[data-src]');
const imageLoader = new ThrottledImageLoader(2);

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      imageLoader.loadImage(entry.target);
      imageObserver.unobserve(entry.target);
    }
  });
}, { rootMargin: '100px' });

articleImages.forEach(img => imageObserver.observe(img));
Enter fullscreen mode Exit fullscreen mode

After Optimization Results

  • LCP: 1.2 seconds (Good) - 70% improvement
  • FID: 45ms (Good) - 84% improvement
  • CLS: 0.02 (Good) - 94% improvement
  • Lighthouse Score: 94/100 - 309% improvement

Automated Monitoring and Optimization

Performance Budget for Images 

// Set up performance budgets
const imageBudgets = {
  heroImage: { maxSize: 150000, maxLCP: 2000 }, // 150KB, 2s LCP
  contentImages: { maxSize: 50000 }, // 50KB per image
  totalImages: { maxSize: 500000 } // 500KB total
};

function validateImageBudgets() {
  const images = document.querySelectorAll('img');
  let totalSize = 0;
  const violations = [];

  images.forEach(img => {
    const entry = performance.getEntriesByName(img.src)[0];
    if (entry) {
      totalSize += entry.transferSize;

      // Check individual image budgets
      if (img.classList.contains('hero') && 
          entry.transferSize > imageBudgets.heroImage.maxSize) {
        violations.push(`Hero image exceeds budget: ${entry.transferSize}B`);
      }
    }
  });

  // Check total budget
  if (totalSize > imageBudgets.totalImages.maxSize) {
    violations.push(`Total image size exceeds budget: ${totalSize}B`);
  }

  return violations;
}
Enter fullscreen mode Exit fullscreen mode

Continuous Monitoring 

// Real User Monitoring for image performance
class ImagePerformanceMonitor {
  constructor() {
    this.metrics = [];
    this.init();
  }

  init() {
    this.monitorLCP();
    this.monitorCLS();
    this.monitorImageLoading();
  }

  monitorLCP() {
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];

      if (lastEntry.element?.tagName === 'IMG') {
        this.metrics.push({
          type: 'LCP',
          value: lastEntry.startTime,
          element: lastEntry.element.src,
          timestamp: Date.now()
        });
      }
    }).observe({entryTypes: ['largest-contentful-paint']});
  }

  monitorCLS() {
    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (entry.hadRecentInput) continue;

        entry.sources?.forEach(source => {
          if (source.node?.tagName === 'IMG') {
            this.metrics.push({
              type: 'CLS',
              value: entry.value,
              element: source.node.src,
              timestamp: Date.now()
            });
          }
        });
      }
    }).observe({entryTypes: ['layout-shift']});
  }

  monitorImageLoading() {
    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (entry.initiatorType === 'img') {
          this.metrics.push({
            type: 'IMAGE_LOAD',
            value: entry.duration,
            size: entry.transferSize,
            element: entry.name,
            timestamp: Date.now()
          });
        }
      }
    }).observe({entryTypes: ['resource']});
  }

  getReport() {
    const report = {
      lcpImages: this.metrics.filter(m => m.type === 'LCP'),
      clsImages: this.metrics.filter(m => m.type === 'CLS'),
      imageLoads: this.metrics.filter(m => m.type === 'IMAGE_LOAD')
    };

    return {
      ...report,
      averageImageLoadTime: report.imageLoads.reduce((sum, m) => sum + m.value, 0) / report.imageLoads.length,
      totalCLS: report.clsImages.reduce((sum, m) => sum + m.value, 0),
      slowestImages: report.imageLoads.sort((a, b) => b.value - a.value).slice(0, 5)
    };
  }
}

// Initialize monitoring
const monitor = new ImagePerformanceMonitor();

// Report metrics every 30 seconds
setInterval(() => {
  const report = monitor.getReport();
  console.table(report.slowestImages);
}, 30000);
Enter fullscreen mode Exit fullscreen mode

Tools and Automation

Lighthouse CI Integration 

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [push]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.8.x
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
Enter fullscreen mode Exit fullscreen mode 
// lighthouse.config.js
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000/'],
      numberOfRuns: 5,
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2000 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'uses-optimized-images': 'error',
        'modern-image-formats': 'error',
        'uses-responsive-images': 'error'
      }
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

Advanced Optimization Techniques

Machine Learning for Format Selection 

// Use ML to predict optimal format based on image content
class MLImageOptimizer {
  constructor() {
    this.model = null;
    this.loadModel();
  }

  async loadModel() {
    // Load pre-trained model for image classification
    this.model = await tf.loadLayersModel('/models/image-optimizer.json');
  }

  async analyzeImage(imageElement) {
    if (!this.model) return 'webp'; // Fallback

    try {
      // Convert image to tensor
      const tensor = tf.browser.fromPixels(imageElement);
      const resized = tf.image.resizeBilinear(tensor, [224, 224]);
      const batched = resized.expandDims(0);

      // Predict optimal format
      const prediction = await this.model.predict(batched);
      const result = await prediction.data();

      // Return format based on prediction
      if (result[0] > 0.8) return 'avif';
      if (result[1] > 0.6) return 'webp';
      return 'jpg';
    } catch (error) {
      console.warn('ML prediction failed:', error);
      return 'webp';
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Image optimization is the highest-impact strategy for improving Core Web Vitals and Lighthouse scores. The data is clear: properly optimized images can improve LCP by 70%+, reduce FID significantly, and virtually eliminate image-related CLS.

Key takeaways:

  1. LCP optimization should focus on hero images first—modern formats, responsive sizing, and preloading
  2. FID improvements come from throttling image loads and using decode APIs
  3. CLS prevention requires defining image dimensions and using aspect ratios
  4. Automation is crucial—set up monitoring, budgets, and CI/CD checks
  5. Measure everything—use RUM data to validate optimizations

The compound effect is remarkable: sites that properly implement image optimization often see 200-400% improvements in Lighthouse scores, directly translating to better SEO rankings and user experience.

Start with your LCP image—it's usually the biggest win. Then systematically work through content images, implementing the strategies that best fit your architecture and performance goals.

Remember: Core Web Vitals optimization is an iterative process. Start with the highest-impact changes, measure the results, and continuously refine your approach.

What Core Web Vitals improvements have you seen from image optimization? Have you found any unexpected challenges or particularly effective techniques? Share your experiences and results in the comments!

Top comments (2)

Collapse
 
xwero profile image
david duymelinck •

Great post. I wasn't aware of the priority hints API.
I don't specialize in frontend, but I try to keep up with the latest updates.

I have a few questions:

  1. How do you separate the images between above and under the fold with all the screen size and layout possibilities out there? The only thing I can think of is going for the most used. But what if two or three are very close together in numbers but are for instance mobile and desktop.

  2. How much does the javascript help with getting better results. Do you have before and after data from that addition?

Collapse
 
dotallio profile image
Dotallio •

Those LCP and CLS gains are huge - I’ve seen similar jumps just by switching hero images to AVIF and setting aspect ratios. What do you use to automate image format selection at deployment?