Google has made it clear: page experience matters for rankings. At the heart of page experience are Core Web Vitals—a set of metrics that measure real-world user experience. If your site is slow, unstable, or unresponsive, you're fighting an uphill SEO battle.
This guide explains what Core Web Vitals are, why they matter, and how to improve them.
What Are Core Web Vitals?
Core Web Vitals are three specific metrics that Google uses to evaluate user experience:
Largest Contentful Paint (LCP)
What it measures: Loading performance. Specifically, how long it takes for the largest content element (usually a hero image or heading) to become visible.
Target: Under 2.5 seconds
Impact: Users perceive pages as slow if the main content doesn't appear quickly. High LCP means visitors leave before seeing your content.
Interaction to Next Paint (INP)
What it measures: Responsiveness. How quickly the page responds when users interact (clicking, tapping, typing).
Target: Under 200 milliseconds
Impact: Sluggish interactions feel broken. Users expect immediate response when they click a button or fill a form.
Cumulative Layout Shift (CLS)
What it measures: Visual stability. How much the page content moves around unexpectedly during loading.
Target: Under 0.1
Impact: Nothing frustrates users more than accidentally clicking the wrong thing because the page shifted. High CLS destroys trust.
These metrics are measured on real user devices, not just lab tests. Google collects data from actual Chrome users visiting your site—so real-world performance matters.
Why Core Web Vitals Matter for SEO
Direct Ranking Factor
Google confirmed that Core Web Vitals are a ranking factor. While content relevance still matters most, all else being equal, faster sites outrank slower ones.
Indirect Benefits
Beyond rankings, good Core Web Vitals improve:
- Bounce rate: Users stay longer on fast, stable pages
- Conversion rate: Faster sites convert better—even small improvements matter
- User satisfaction: Happy users return and recommend you
- Crawl efficiency: Google can crawl fast sites more effectively
Search Console Visibility
Google Search Console now reports Core Web Vitals issues. Pages with "poor" scores are flagged, and this data influences how Google treats your site.
How to Measure Core Web Vitals
Field Data (Real Users)
Google Search Console: Shows Core Web Vitals for your actual pages based on Chrome user data.
PageSpeed Insights: Enter any URL to see both field data (real users) and lab data (simulated tests).
Chrome UX Report (CrUX): The underlying dataset. Access via BigQuery for detailed analysis.
Lab Data (Simulated)
Lighthouse: Built into Chrome DevTools. Simulates load performance on a standard device.
WebPageTest: Detailed waterfall analysis and comparison tools.
Field data and lab data often differ. Your development machine with fast internet isn't representative of real users. Always check field data when available.
Common Core Web Vitals Problems
LCP Issues
Slow server response: The server takes too long to deliver the initial HTML.
Fix: Upgrade hosting, implement caching, use a CDN.
Render-blocking resources: CSS and JavaScript that must load before content appears.
Fix: Inline critical CSS, defer non-essential JavaScript.
Slow resource loading: Large images or fonts that take time to download.
Fix: Optimise images, use modern formats (WebP, AVIF), preload critical resources.
Client-side rendering: JavaScript-heavy sites that don't show content until scripts execute.
Fix: Server-side rendering or static generation (Next.js excels at this).
INP Issues
Long JavaScript tasks: Scripts that block the main thread, preventing response to user input.
Fix: Break up long tasks, defer non-essential work, use web workers.
Heavy event handlers: Click handlers that do too much work.
Fix: Optimise handler code, debounce where appropriate.
Third-party scripts: Analytics, chat widgets, and ads that consume resources.
Fix: Load third parties asynchronously, audit their necessity.
CLS Issues
Images without dimensions: Images that load and push content down.
Fix: Always specify width and height attributes.
Ads and embeds: Dynamic content that inserts into the page after load.
Fix: Reserve space for dynamic elements.
Web fonts: Text that re-renders when custom fonts load.
Fix: Use font-display: swap and preload fonts.
Dynamically injected content: Banners or notifications that shift the page.
Fix: Reserve space or inject above the fold.
Improving Core Web Vitals: Priority Actions
High Impact, Lower Effort
- Optimise images: Use WebP format, resize to actual display size, lazy load below-fold images
- Enable compression: Gzip or Brotli compression for text resources
- Specify image dimensions: Prevents layout shift from loading images
- Reduce third-party scripts: Remove or defer non-essential scripts
High Impact, Higher Effort
- Implement server-side rendering: Frameworks like Next.js make this accessible
- Use a CDN: Serve content from locations close to users
- Optimise critical rendering path: Inline critical CSS, defer non-critical JS
- Upgrade hosting: Sometimes the server is simply too slow
Start with the lowest-effort, highest-impact improvements. You often don't need to rebuild your site—image optimisation alone frequently produces dramatic gains.
Modern Web Development and Performance
Modern frameworks have made building performant sites much easier:
Next.js Advantages
- Automatic image optimisation
- Server-side rendering by default
- Code splitting per page
- Built-in performance optimisations
Static Site Generation
Pre-building pages at deploy time means:
- No server processing time
- CDN caching is trivial
- LCP is typically excellent
Headless Architecture
Separating content management from rendering allows:
- Optimal frontend frameworks
- CDN distribution of static content
- Reduced complexity
E-commerce Considerations
E-commerce sites face particular Core Web Vitals challenges:
- Product images: Many large images per page
- Dynamic content: Prices, stock levels, personalisation
- Third-party scripts: Reviews, chat, analytics, payment processing
- Heavy pages: Complex layouts with many elements
Solutions include:
- Aggressive image optimisation and lazy loading
- Reserving space for dynamic elements
- Auditing third-party scripts ruthlessly
- Pagination or infinite scroll for large catalogs
Monitoring and Maintenance
Core Web Vitals aren't a one-time fix. Ongoing monitoring is essential:
Regular Audits
Run Lighthouse audits monthly. Check Search Console weekly for Core Web Vitals issues.
Performance Budgets
Set thresholds that trigger alerts if exceeded. Prevent gradual degradation.
Regression Testing
Test Core Web Vitals before deploying significant changes. Catch problems before they affect users.
Third-Party Management
Regularly review third-party scripts. New additions can quickly degrade performance.
The Bottom Line
Core Web Vitals represent a shift in how Google evaluates websites. Technical performance is now a clear ranking factor, not just a nice-to-have.
The good news: improvements are achievable for most sites without complete rebuilds. Start with the basics—image optimisation, dimension attributes, reducing render-blocking resources—and work up from there.
For sites built on older platforms or with accumulated technical debt, a rebuild using modern frameworks like Next.js may ultimately be the most efficient path to excellent Core Web Vitals.
Need help improving your Core Web Vitals? Our web development team builds performance-first websites, and our SEO services include technical audits. Get in touch to discuss your performance goals.