Understanding Core Web Vitals
Page performance directly impacts both user experience and search rankings. Google uses Core Web Vitals as ranking signals, making performance optimization essential for SEO.
What are Core Web Vitals?
Core Web Vitals are three specific metrics that Google considers important for user experience:
1. Largest Contentful Paint (LCP)
What it measures: Loading performance—how long until the largest content element is visible.
Target: Under 2.5 seconds
What counts as LCP:
- Images (
<img>elements) - Video poster images
- Elements with background images (via CSS)
- Block-level text elements (
<h1>,<p>, etc.)
2. Interaction to Next Paint (INP)
What it measures: Responsiveness—how quickly the page responds to user interactions.
Target: Under 200 milliseconds
Note: INP replaced First Input Delay (FID) in March 2024. It measures the latency of all interactions, not just the first one.
3. Cumulative Layout Shift (CLS)
What it measures: Visual stability—how much the page layout shifts unexpectedly.
Target: Under 0.1
Common causes:
- Images without dimensions
- Ads or embeds that load late
- Web fonts causing text shifts
- Dynamic content injection
Core Web Vitals Thresholds
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2.5s | 2.5s - 4s | > 4s |
| INP | ≤ 200ms | 200ms - 500ms | > 500ms |
| CLS | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
Why Core Web Vitals Matter
User Experience
Poor metrics correlate with:
- Higher bounce rates
- Lower engagement
- Fewer conversions
- Negative brand perception
Search Rankings
Google uses Core Web Vitals as ranking signals. Sites with better metrics may:
- Rank higher for competitive queries
- Get more visibility in search results
- Receive more organic traffic
How Google Measures CWV
Google uses two types of data:
Field Data (Real User Metrics)
Collected from actual users via Chrome User Experience Report (CrUX):
- Represents real-world performance
- Based on 75th percentile of users
- Updated monthly in Search Console
Lab Data (Synthetic Tests)
Collected via Lighthouse and similar tools:
- Controlled environment
- Useful for debugging
- May not reflect real-world conditions
Understanding LCP
LCP identifies the largest element visible in the viewport during page load.
LCP Element Selection
The browser tracks candidate elements as the page loads:
- Initial render - maybe a heading
- Image loads - becomes new LCP if larger
- Hero image loads - final LCP candidate
Common LCP Issues
- Slow server response - High TTFB
- Render-blocking resources - CSS, fonts
- Large images - Unoptimized, not lazy-loaded
- Client-side rendering - Content not in initial HTML
Understanding INP
INP measures responsiveness across all user interactions:
- Clicks
- Taps
- Keyboard input
How INP is Calculated
- Records latency of all interactions
- Takes the highest value (or high percentile for many interactions)
- Reports at page unload
Common INP Issues
- Heavy JavaScript - Long-running tasks blocking main thread
- Too many event listeners - Complex interaction handlers
- Large DOM - Slow to update
- Third-party scripts - Analytics, ads
Understanding CLS
CLS measures unexpected layout shifts during the page's lifespan.
What Counts as a Shift
- Element moves from its previous position
- Movement wasn't caused by user interaction
- Movement happens within 500ms of user input
CLS Calculation
Each shift has a score:
Impact Fraction × Distance Fraction = Shift Score
CLS is the sum of all unexpected shift scores.
Common CLS Issues
- Images without dimensions - Size unknown until load
- Ads without reserved space - Push content when they load
- Injected content - Banners, popups appearing above content
- Web fonts - FOUT (Flash of Unstyled Text)
Measuring Core Web Vitals
Google PageSpeed Insights
- Shows both field and lab data
- Provides specific recommendations
- Tests mobile and desktop
Google Search Console
Core Web Vitals report shows:
- URLs grouped by status
- Issues affecting multiple pages
- Trends over time
Chrome DevTools
Performance tab:
- Detailed waterfall
- Main thread activity
- Layout shift visualization
Lighthouse
Built into Chrome or run via CLI:
- Comprehensive audit
- Specific recommendations
- Performance score
Summary
In this lesson, you learned:
- What Core Web Vitals are (LCP, INP, CLS)
- Target thresholds for each metric
- Why they matter for SEO and UX
- How Google measures and uses these metrics
- Common issues affecting each metric
- Tools for measuring Core Web Vitals
In the next lesson, we'll focus on optimizing LCP in Next.js.