I used to obsess over shaving 10KB from my JavaScript bundle. Then I looked at my images. Ouch.
Turns out, uncompressed images are silent killers for performance. They look fine, but they weigh more than the rest of your site combined.
So I did a quick test to see how much difference compression actually makes. Spoiler: it’s not subtle.
🧪 The Setup
- A landing page with 6 hero images and 12 thumbnails
- Each image: ~500KB (mix of JPEGs + PNGs)
- Total page weight: ~6.8 MB
Tested with Lighthouse on a throttled 4G connection.
🐌 Before Compression
- First Contentful Paint (FCP): 4.3s
- Largest Contentful Paint (LCP): 6.2s
- Total Page Size: ~6.8 MB
Result: “Cool, I’ll go grab a coffee while this loads.”
⚡ After Compression
Ran all images through a compressor (👋 shameless plug: tinyimage.online).
- Hero images dropped to ~120KB each
- Thumbnails to ~30KB
- Total page weight: ~1.1 MB
New numbers:
- FCP: 1.2s
- LCP: 1.8s
- Total Page Size: ~1.1 MB
Result: “Oh hey, it’s already there.”
📉 The Difference
- Page size reduced by 84%
- Load time cut by 70%
- Lighthouse score: 56 → 93
That’s not a micro-optimization. That’s night-and-day.
🔑 Takeaway
- Google cares → Core Web Vitals directly impact SEO.
- Users care → most people bounce if they wait more than 3 seconds.
- You should care → faster pages = happier users + better ad revenue.
And honestly? Watching that Lighthouse dial swing from red to green feels better than any framework upgrade.
🛠️ Your Turn
Next time you’re sweating over webpack configs or debating which state management library to use… stop. Compress your images first.
It’s the fastest performance win you’ll ever get.
If you need a quick start: tinyimage.online. Drag, drop, done ✅.
That’s it. Small tweak. Huge payoff.
Top comments (0)