How to Improve Core Web Vitals
Pass Google's Thresholds & Boost Rankings
Step-by-step guide to optimizing LCP, INP, and CLS. Get your site to 'Good' status with actionable strategies and AI-powered analysis.
Analyze Your Core Web VitalsWhat Are Core Web Vitals?
Core Web Vitals are Google's official metrics for measuring user experience. They became ranking factors in 2021 and directly impact SEO.
LCP
Largest Contentful Paint
Good threshold
INP
Interaction to Next Paint
Good threshold
CLS
Cumulative Layout Shift
Good threshold
How to Improve LCP (Largest Contentful Paint)
LCP measures how long it takes for the largest visible element to load. Target: under 2.5 seconds.
1. Optimize Images
- •Use WebP/AVIF: 30-50% smaller than JPEG/PNG
- •Proper sizing: Serve correctly sized images (not oversized)
- •Priority hints: Add fetchpriority="high" to LCP image
- •Preload: Use <link rel="preload"> for critical images
2. Reduce Server Response Time (TTFB)
- •Use a CDN: Serve content from edge locations
- •Cache HTML: Full-page caching with Redis or Varnish
- •Optimize queries: Database query optimization and indexing
- •Upgrade hosting: Better server specs if TTFB > 600ms
3. Eliminate Render-Blocking Resources
- •Inline critical CSS: Include above-fold styles in HTML
- •Defer JavaScript: Use async/defer for non-critical scripts
- •Remove unused CSS: Use PurgeCSS or similar tools
- •Minimize CSS/JS: Compress files with minification
How to Improve INP (Interaction to Next Paint)
INP measures responsiveness—how quickly the page responds to user interactions. Target: under 200ms.
1. Reduce JavaScript Execution Time
- •Code splitting: Break large bundles into smaller chunks
- •Avoid long tasks: Break up work into smaller chunks (use requestIdleCallback)
- •Web Workers: Move heavy computation off main thread
- •Optimize loops: Reduce iteration complexity in event handlers
2. Optimize Event Handlers
- •Debounce/throttle: Limit event handler execution frequency
- •Passive listeners: Use passive: true for scroll/touch events
- •Remove listeners: Clean up unused event listeners
- •Event delegation: Use single listener instead of many
3. Minimize Main Thread Work
- •Lazy load third-party: Defer analytics, ads, social widgets
- •Reduce polyfills: Only include necessary browser support
- •Optimize animations: Use CSS transforms (GPU accelerated)
- •Virtual scrolling: For long lists, render only visible items
How to Improve CLS (Cumulative Layout Shift)
CLS measures visual stability—how much content shifts during loading. Target: under 0.1.
1. Set Image and Video Dimensions
- •Width and height: Always specify dimensions on img/video elements
- •Aspect ratio: Use CSS aspect-ratio for responsive images
- •Placeholder space: Reserve space for lazy-loaded content
2. Avoid Inserting Content Above Existing Content
- •Load ads below fold: Don't place ads above main content
- •Reserve ad space: Set min-height for ad containers
- •Avoid banners: Don't inject banners/notifications dynamically
3. Use CSS for Layout, Not JavaScript
- •Preload fonts: Use font-display: swap and preload
- •CSS transforms: Use transform instead of changing top/left
- •Avoid FOUT/FOIT: System fonts or fallback fonts during load
Quick Wins for All Three Metrics
Optimize Images
WebP format, proper sizing, lazy loading
Use a CDN
Serve content globally, reduce TTFB
Set Dimensions
Width/height on all images and embeds
Defer JavaScript
Async/defer non-critical scripts
Inline Critical CSS
Include above-fold styles in HTML
Remove Unused Code
Tree shaking, code splitting, minimize
Get Your Core Web Vitals Score
Get a free analysis with specific recommendations for improving your LCP, INP, and CLS scores
Want to Analyze YOUR Website?
Get AI-powered performance insights with actionable fixes in 30 seconds