How to Measure Image Performance Impact on Your Site

You converted your hero to AVIF and compressed your gallery. Did it actually help? Performance work without measurement is theatre. Here's how to verify, with concrete tools and metrics.

What to measure

Four metrics tell the story:

1. LCP (Largest Contentful Paint). Direct image impact: does your hero render in under 2.5s?
2. CLS (Cumulative Layout Shift). Did width/height attributes prevent layout shifts?
3. Total page weight. Have your image savings translated to a lighter page?
4. Real-User bounce rate. The business metric: fewer abandonments on slow connections.

Lab tools

Lighthouse (Chrome DevTools)

DevTools → Lighthouse → Analyze. Gives you LCP, CLS, total page weight, and image-specific audits.

Pros: fast, free, runs locally. Cons: synthetic. Your laptop is faster than your users' phones.

PageSpeed Insights

Same Lighthouse engine, but Google runs it on their hardware AND adds field data (real user metrics) when available.

Pros: shows both lab and field data side-by-side. Cons: field data only available for sites with sufficient traffic.

WebPageTest

The gold standard for synthetic testing. Lets you pick connection speed, location, device, and run multiple iterations.

Pros: granular, repeatable, comprehensive waterfall view. Cons: paid for advanced features.

Field tools

CrUX (Chrome User Experience Report)

Real Chrome user data, aggregated by Google. Available via PageSpeed Insights for individual URLs, and via BigQuery for full datasets.

Field data > lab data every time. Lab is "what could happen"; field is "what actually happens."

Web Vitals JS library

Capture LCP, CLS, INP from real users and send to your analytics. ~3 KB.

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP((m) => sendToAnalytics('lcp', m.value));
onCLS((m) => sendToAnalytics('cls', m.value));
onINP((m) => sendToAnalytics('inp', m.value));

This is the only way to see what your actual users experience. Lab data is a guide; field data is the truth.

Real-User Monitoring (RUM)

Datadog, New Relic, Cloudflare Web Analytics: all offer RUM with image-specific breakdowns. Worth the cost if image weight is a significant part of your business.

A measurement protocol

To verify an image optimization actually worked:

Step 1: Baseline

Before changes, capture:

• PageSpeed lab LCP for 3 representative URLs
• PageSpeed field LCP (if available)
• Total page weight
• Image-specific audits (you'll see what's broken)

Step 2: Single change

Make ONE change. E.g., convert hero to AVIF. Re-deploy.

Step 3: Re-measure

Capture the same metrics. Compare.

Step 4: Repeat

Do not bundle five optimizations into one push. If LCP gets worse you won't know which change caused it.

A realistic example

Site before:

• Lab LCP: 4.1s
• Field LCP (p75): 5.8s
• Page weight: 4.2 MB (3 MB images)
• "Properly size images": 1.5 MB savings flagged
• "Serve next-gen formats": 850 KB savings flagged

After converting hero to AVIF and adding <picture> for the gallery:

• Lab LCP: 2.6s
• Field LCP (p75): 3.4s
• Page weight: 1.9 MB (900 KB images)
• Page-weight saved: 2.3 MB
• LCP improvement: 1.5s lab, 2.4s field

The field improvement is bigger than lab, typical because real users are on slower connections than lab tests assume.

Common measurement mistakes

1. Trusting only lab data. A 1.8s lab LCP can mask a 4s field LCP if your users are on flaky mobile.
2. Measuring once. Network variation matters. Run 3-5 lab tests and average.
3. Not measuring before changes. Without a baseline, you can't claim improvement.
4. Comparing different pages. Apples to apples: same URL, same conditions.
5. Ignoring CLS. Image optimizations sometimes break CLS if you remove width/height attributes.

Tools

• Image Compressor: batch compress with multi-format output
• AVIF Converter: for maximum compression
• PNG to WebP: fast PNG conversion

All client-side via WASM, no uploads.

Related

• What Is LCP and Why Images Are the Main Cause
• How to Pass Google PageSpeed Image Audits
• Image Optimization Checklist for Web Developers