Image Compression with WebP and AVIF: A Practical Guide
How to convert your JPEG and PNG files to modern formats without losing quality. Real file size comparisons and step-by-step conversion tools.
You’ve probably heard about Core Web Vitals by now. They’re everywhere — in Google’s search rankings, in PageSpeed Insights reports, in conversations about site performance. But here’s the thing: most people know they matter, yet they’re not entirely sure what these numbers actually mean or how to improve them.
We’re going to change that. In this guide, you’ll understand what Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) really measure. You’ll learn how to find these metrics in PageSpeed Insights and, more importantly, how to spot real performance improvements in your actual user data.
The Three Core Web Vitals Explained
Each metric tells you something different about how real users experience your site
Largest Contentful Paint (LCP)
LCP measures when the largest visible element on the page has loaded. That could be a hero image, a headline, or a video thumbnail. If your LCP is 2.5 seconds, it means visitors waited 2.5 seconds before seeing the main content they came for.
Here’s why it matters: A slow LCP doesn’t just feel sluggish. It actually affects conversions. We’ve seen sites cut their bounce rate by 20% just by improving LCP from 4 seconds to 2.5 seconds. The Google threshold is 2.5 seconds for “good” performance.
Good: 2.5 seconds or faster | Needs work: 4.0 seconds or slower
First Input Delay and Cumulative Layout Shift
FID (First Input Delay) is about responsiveness. When someone clicks a button or taps a link, how long until your site actually responds? If there’s a 300ms delay, that’s FID. You’ll notice this especially on mobile — your thumb taps a link and nothing happens for a half-second. That’s terrible UX.
CLS (Cumulative Layout Shift) measures visual stability. Have you ever been reading an article and suddenly the text jumps down because an ad loaded above it? That’s layout shift. It’s annoying and, if it happens during checkout, it can cause clicks on the wrong button.
FID Target
100ms or less (good)
CLS Target
0.1 or less (good)
Reading PageSpeed Insights Reports
How to find your metrics and understand what you’re looking at
PageSpeed Insights gives you two datasets: lab data and field data. Lab data is synthetic — Google runs your page in a controlled environment. Field data comes from real users in the Chrome User Experience Report. Don’t ignore either one.
The report shows your metrics with a color: green (good), orange (needs improvement), or red (poor). But here’s what many people miss: the report also shows you what’s actually slowing you down. It’ll tell you if an unoptimized image is hurting LCP, or if JavaScript is blocking FID.
- Go to PageSpeed Insights and enter your URL
- Look at the “Core Web Vitals” section at the top
- Scroll down to “Diagnostics” to see specific issues
- Check both mobile and desktop results (they differ)
Important Note on Testing
PageSpeed Insights lab scores and real user data sometimes don’t match. That’s normal. Lab tests run in ideal conditions. Real users on slower networks or older devices might see different performance. Always check your actual user data (through Chrome User Experience Report or tools like web-vitals.js) to get the complete picture. The numbers in PageSpeed are a starting point, not the final word.
Moving Beyond PageSpeed to Real User Data
Here’s the truth: PageSpeed Insights is helpful, but it’s not the whole story. You need to see how your actual visitors experience your site. That’s where the Chrome User Experience Report comes in. It aggregates real browsing data from millions of Chrome users.
If you want even more control, implement the web-vitals JavaScript library. It’ll measure LCP, FID, and CLS for every single visitor on your site. You’ll see your 75th percentile score (that’s what Google uses), not just averages.
We’ve found that sites measuring real data improve 40% faster than those relying only on lab scores. Why? Because you’re fixing actual problems users face, not theoretical ones.
Quick Wins to Improve Your Metrics
Start here if you’re just getting serious about Core Web Vitals
Optimize Hero Images
Your largest images usually become your LCP element. Use WebP or AVIF format, compress aggressively, and make sure they’re responsive. A 500KB hero image won’t cut it anymore.
Defer Non-Critical JavaScript
JavaScript blocks rendering. If your analytics script loads before your content, FID suffers. Move tracking scripts to load after the page interactive. Your site won’t break, but it’ll feel faster.
Reserve Space for Dynamic Content
If ads or notifications load after page load, set their dimensions in CSS first. Don’t let content shift. Even a tiny shift adds up across the page, tanking your CLS score.
Use a CDN (Especially for Hong Kong)
If your users are in Hong Kong, serving from a CDN with Asia-Pacific nodes cuts latency dramatically. We’ve seen LCP drop by 1+ second just by using a regional CDN.
Minify CSS and JavaScript
Removing unnecessary whitespace and comments from code files shaves off file sizes. It’s not revolutionary, but it compounds. Every millisecond counts for FID.
Lazy Load Below-the-Fold Images
Images below the fold don’t need to load immediately. Use lazy loading to defer them. This frees up bandwidth for above-the-fold content, which directly impacts LCP.
The Path Forward
Core Web Vitals aren’t just Google’s obsession. They’re about real user experience. When your LCP is fast, when clicks respond instantly, and when layouts stay stable, people stay on your site longer. They convert more. They come back.
Start with PageSpeed Insights. Understand your three metrics. Then move to real data. Measure, improve, measure again. It’s not a one-time fix — it’s an ongoing process. But if you’re tracking your metrics properly and testing improvements with actual user data, you’ll see results.
The sites that take Core Web Vitals seriously aren’t just ranking better in search. They’re genuinely faster and more enjoyable to use. That’s worth the effort.
