On This Page
What Are Core Web Vitals?
Core Web Vitals are three metrics Google uses to measure page experience and rank websites. They're official ranking factors that directly impact your organic traffic. Core Web Vitals are one critical piece of complete technical SEO—see our comprehensive technical SEO guide for the full strategy.
The Three Metrics
- LCP (Largest Contentful Paint): Time for main content to load. Target: <2.5 seconds
- FID (First Input Delay): Time browser responds to user action. Target: <100ms
- CLS (Cumulative Layout Shift): Visual stability (elements don't jump around). Target: <0.1
Top 10% Sites See +25% Higher CTR
How to Measure Your Core Web Vitals
Option 1: Google PageSpeed Insights (Free)
- Go to pagespeed.web.dev
- Enter your URL
- See LCP, FID, CLS scores for mobile + desktop
- Get optimization suggestions
Option 2: Google Search Console
- Sign in to Search Console
- Go to "Experience" > "Core Web Vitals"
- See real-world data from actual visitors
- Identify which pages need fixes
Fix Largest Contentful Paint (LCP) – The Speed Score
LCP is often the biggest culprit. Here's how to improve it:
1. Optimize Images (Biggest Impact)
- Use WebP format (30-40% smaller than JPEG)
- Serve responsive images:
<img srcset="small.webp 480w, large.webp 1200w"> - Compress images (use TinyPNG, ImageOptim)
- Lazy load images:
<img loading="lazy">
2. Use a CDN (Cloudflare, AWS CloudFront)
CDN serves content from servers geographically closer to users. During load shedding or network congestion, this cuts LCP time by 30-40%.
3. Prioritize Above-the-Fold Content
- Load critical CSS inline (in
<head>) - Defer non-critical JavaScript
- Lazy load below-the-fold content
Expected improvement: 4+ seconds → 2 seconds LCP (50% reduction)
Fix First Input Delay (FID)
FID measures browser responsiveness to user actions (clicks, taps, keyboard input).
Common FID Issues
- Heavy JavaScript parsing (3rd-party scripts run on main thread)
- Analytics, chat widgets, ads slowing page
- Poor code optimization
Fixes
- Defer third-party scripts:
<script defer src="..."> - Async-load low-priority scripts:
<script async src="..."> - Use Web Workers to offload heavy tasks
- Minimize and compress JavaScript
Fix Cumulative Layout Shift (CLS)
CLS prevents elements from unexpectedly moving around during load. Example: ads pop in and shift content down.
Common CLS Culprits
- Images/videos without explicit dimensions
- Ads/embeds inserted without reserved space
- Web fonts causing text reflow
- Animations/transitions during load
Fixes
- Set explicit width + height on all images:
<img width="1200" height="630"> - Pre-allocate space for ads/embeds
- Use
font-display: swapin @font-face - Avoid inserting content above existing content
Real South African Case Study
Client: Johannesburg eCommerce store (vitamin supplements)
Before: LCP 5.2s, FID 180ms, CLS 0.25 | Mobile score: 32
Fixes Applied:
- Cloudflare CDN (free tier)
- Image optimization (WebP + compression)
- Deferred non-critical JavaScript
- Fixed image dimensions
After (6 weeks): LCP 1.8s, FID 65ms, CLS 0.05 | Mobile score: 78
Impact: +35% conversion rate, +40% organic traffic
Tools to Monitor & Test
- Google PageSpeed Insights – Lab + field data
- Web.dev Measure – Detailed audit
- Web Vitals Chrome Extension – Real-time monitoring
- Google Search Console – Real-world user data
Action Plan: Next 30 Days
Week 1: Audit Core Web Vitals (PageSpeed Insights + GSC)
Week 2: Implement quick wins (image optimization, lazy loading)
Week 3: Deploy CDN + defer JavaScript
Week 4: Monitor improvements + iterate
Get Your Free Core Web Vitals Audit
We'll analyze your site and identify the top 5 quick wins to improve rankings.
Related: Read the complete Technical SEO guide