← Back to Blog
Technical SEO September 15, 2024 11 min read

Core Web Vitals: Optimization Techniques That Actually Work

Master the three critical metrics that impact your search rankings and user experience.

Core Web Vitals are a set of metrics that Google uses to measure user experience on web pages. Since becoming a ranking factor in 2021, they've been crucial for SEO success. But improving these metrics isn't always straightforward—let's dive into what actually works.

Understanding Core Web Vitals

Google's Core Web Vitals consist of three main metrics:

1. Largest Contentful Paint (LCP)

What it measures: Loading performance—how long it takes for the largest content element to become visible.

Target: 2.5 seconds or faster

Common culprits: Large images, slow server response times, render-blocking resources

2. First Input Delay (FID) / Interaction to Next Paint (INP)

What it measures: Interactivity—how quickly your page responds to user interactions.

Target: 100 milliseconds or faster (FID) / 200 milliseconds or faster (INP)

Common culprits: Heavy JavaScript execution, long tasks blocking the main thread

3. Cumulative Layout Shift (CLS)

What it measures: Visual stability—how much unexpected content movement occurs during page load.

Target: 0.1 or less

Common culprits: Images without dimensions, ads, embeds, dynamically injected content

Optimizing Largest Contentful Paint (LCP)

1. Optimize and Compress Images

Use Modern Formats:

  • WebP offers 25-35% smaller file sizes than JPEG
  • AVIF provides even better compression but less browser support
  • Use the <picture> element to serve multiple formats with fallbacks

Implement Responsive Images:

  • Use srcset and sizes attributes
  • Serve appropriately sized images for different screen sizes
  • Don't serve 2000px images on mobile devices

Compress Aggressively:

  • Use tools like ImageOptim, TinyPNG, or Squoosh
  • Aim for 70-85% quality for JPEGs
  • Strip unnecessary metadata

2. Improve Server Response Time (TTFB)

Target: Under 200ms

Strategies:

  • Use a fast web host with SSD storage
  • Implement server-side caching
  • Use a Content Delivery Network (CDN)
  • Optimize database queries
  • Consider upgrading your hosting plan if necessary
  • Use HTTP/2 or HTTP/3

3. Eliminate Render-Blocking Resources

CSS Optimization:

  • Inline critical CSS in the <head>
  • Defer non-critical CSS
  • Remove unused CSS
  • Minify CSS files

JavaScript Optimization:

  • Defer JavaScript that's not needed for initial render
  • Use async for independent scripts
  • Load JavaScript at the end of <body>
  • Code-split large JavaScript bundles

4. Preload Critical Resources

Use resource hints to load important assets faster:

  • <link rel="preload"> for critical resources
  • <link rel="preconnect"> for external domains
  • Preload fonts, hero images, and critical scripts

5. Optimize Web Fonts

  • Use font-display: swap to show text immediately
  • Preload font files
  • Use variable fonts to reduce file count
  • Self-host fonts instead of using Google Fonts
  • Only load font weights you actually use

Optimizing First Input Delay (FID) and INP

1. Minimize JavaScript Execution Time

Break Up Long Tasks:

  • Split tasks longer than 50ms
  • Use requestIdleCallback for non-critical work
  • Implement code splitting
  • Lazy load JavaScript for features not immediately needed

Optimize Third-Party Scripts:

  • Load third-party scripts asynchronously
  • Use facade patterns for heavy embeds (YouTube, etc.)
  • Evaluate if you really need each third-party script
  • Self-host critical third-party scripts when possible

2. Implement Code Splitting

  • Split code by route for single-page applications
  • Lazy load below-the-fold components
  • Use dynamic imports for heavy features
  • Only load polyfills for browsers that need them

3. Use Web Workers

  • Offload heavy computations to background threads
  • Keep the main thread free for user interactions
  • Process data, run calculations, or handle complex logic in workers

4. Optimize Event Handlers

  • Debounce or throttle expensive operations
  • Use passive event listeners where appropriate
  • Avoid forced synchronous layouts
  • Batch DOM updates

Optimizing Cumulative Layout Shift (CLS)

1. Set Explicit Dimensions for Images and Videos

Always include width and height:

  • Use the width and height attributes
  • Modern browsers calculate aspect ratio automatically
  • Use aspect-ratio CSS property for responsive designs

2. Reserve Space for Ads and Embeds

  • Set minimum heights for ad slots
  • Use placeholder containers
  • Avoid inserting content above existing content
  • Reserve space based on historical ad sizes

3. Handle Fonts Carefully

Prevent FOIT (Flash of Invisible Text):

  • Use font-display: swap or font-display: optional
  • Preload critical fonts
  • Use system fonts when possible
  • Match fallback font metrics to web font metrics

4. Avoid Dynamically Injected Content

  • Don't insert content above the fold after page load
  • If you must, do it in response to user interaction
  • Use transform instead of position properties for animations
  • Reserve space for dynamic content

5. Be Careful with Cookie Banners

  • Avoid banners that push content down
  • Use overlay or bottom-positioned banners
  • Show banners immediately on page load, not after delay

Testing and Monitoring Tools

Lab Testing Tools

PageSpeed Insights:

  • Combines lab and field data
  • Provides specific recommendations
  • Free and easy to use

Lighthouse:

  • Built into Chrome DevTools
  • Detailed performance analysis
  • Can be run locally

WebPageTest:

  • Test from multiple locations
  • Different device types
  • Filmstrip and waterfall views

Field Data (Real User Monitoring)

Chrome User Experience Report (CrUX):

  • Real user data from Chrome browsers
  • Available in PageSpeed Insights
  • Shows 75th percentile performance

Google Search Console:

  • Core Web Vitals report
  • Shows pages grouped by status
  • Helps prioritize optimization efforts

Real User Monitoring (RUM) Tools:

  • Google Analytics 4
  • Cloudflare Web Analytics
  • SpeedCurve
  • Calibre

Advanced Optimization Techniques

1. Implement Resource Prioritization

  • Use fetchpriority="high" on LCP images
  • Deprioritize below-the-fold images
  • Control resource loading order strategically

2. Leverage Browser Caching

  • Set appropriate cache headers
  • Use versioned URLs for cache busting
  • Implement service workers for offline support

3. Consider Server-Side Rendering (SSR)

  • Faster initial page load
  • Better Core Web Vitals scores
  • Improved SEO for JavaScript-heavy sites

4. Optimize for Mobile First

  • Mobile users typically have slower connections
  • Test on real mobile devices with throttled connections
  • Optimize for 3G and 4G speeds

Common Pitfalls to Avoid

  • ❌ Optimizing only for lab tests (field data matters more)
  • ❌ Ignoring mobile performance
  • ❌ Over-relying on plugins for optimization
  • ❌ Not monitoring performance after updates
  • ❌ Trying to fix everything at once
  • ❌ Neglecting third-party script impact
  • ❌ Using too many fonts and font weights
  • ❌ Not setting image dimensions

Creating a Performance Budget

Set limits to maintain good performance:

  • Maximum page weight: 1-2MB
  • Maximum image size: 200KB per image
  • Maximum JavaScript: 300KB total
  • Maximum CSS: 100KB
  • LCP: Under 2.5 seconds
  • CLS: Under 0.1
  • INP: Under 200ms

Monitoring and Continuous Improvement

Regular Audits:

  • Run weekly Lighthouse tests
  • Check Google Search Console monthly
  • Monitor real user metrics continuously
  • Set up alerts for performance regressions

Testing Before Deployment:

  • Test performance on staging environments
  • Automate Lighthouse tests in CI/CD pipeline
  • Compare before and after metrics
  • Catch regressions before they hit production

Conclusion

Optimizing Core Web Vitals is an ongoing process, not a one-time fix. Start with the biggest issues, implement fixes methodically, and monitor the impact. Focus on field data from real users rather than perfect lab scores.

Remember: the goal isn't perfection—it's providing a fast, responsive, and stable experience for your users. Better Core Web Vitals lead to better user experience, which leads to better business outcomes.

Need Help Optimizing Core Web Vitals?

Our technical SEO experts can audit your site, identify performance bottlenecks, and implement optimizations that improve your Core Web Vitals scores.

Get Your Performance Audit