Performance Guide
How to Fix Core Web Vitals: A Step-by-Step Guide to LCP, INP & CLS
Google uses Core Web Vitals as a ranking signal. If your site fails these metrics, you're losing traffic. Here's exactly how to fix each one.
What are Core Web Vitals?
Core Web Vitals are three specific metrics Google uses to measure real-world user experience on your website. They directly affect your search rankings:
- LCP (Largest Contentful Paint): How fast the main content loads. Target: under 2.5 seconds.
- INP (Interaction to Next Paint): How responsive your page is to user input. Target: under 200 milliseconds.
- CLS (Cumulative Layout Shift): How much the page layout shifts while loading. Target: under 0.1.
As of 2026, nearly 43% of websites still fail at least one Core Web Vital threshold. Fixing these gives you a real competitive advantage in search results.
Check your Core Web Vitals score
Foglift scans your website and shows your performance score alongside SEO, security, and accessibility — all in one report.
Test Your Website FreeHow to check your Core Web Vitals
Before you fix anything, measure where you stand. Here are the best tools:
- Foglift Page Speed Checker: Free Core Web Vitals test powered by Google PageSpeed Insights with lab + field data. Read our page speed test guide.
- Google PageSpeed Insights: Shows both lab data (simulated) and field data (real users) for your URL.
- Google Search Console: Core Web Vitals report showing which pages pass or fail across your entire site.
- Chrome DevTools: Performance tab for detailed waterfall analysis of individual page loads.
How to fix Largest Contentful Paint (LCP)
LCP measures how quickly the largest visible element loads — usually a hero image, heading, or video poster. A slow LCP means users stare at a blank or incomplete page.
1. Optimize your largest image
The LCP element is often an image. Compress it, use modern formats (WebP or AVIF), and serve responsive sizes with srcset. A 2MB hero image should become a 100-200KB WebP. See our complete image optimization guide for format selection, compression techniques, and responsive image setup.
2. Preload the LCP resource
Add <link rel="preload" as="image" href="/hero.webp"> in your HTML head. This tells the browser to start downloading the image before it discovers it in the CSS or DOM.
3. Use fetchpriority="high"
Add fetchpriority="high" to your hero image tag. This tells the browser this image is more important than other resources.
4. Eliminate render-blocking resources
CSS and JavaScript in your <head> block rendering. Inline critical CSS, defer non-critical stylesheets, and add defer or async to script tags.
5. Improve server response time (TTFB)
If your server takes 2+ seconds to respond, LCP can't possibly be fast. Use a CDN, enable server-side caching, upgrade your hosting, or switch to a static site generator / SSG.
How to fix Interaction to Next Paint (INP)
INP replaced FID (First Input Delay) in 2024. It measures the responsiveness of your page across all interactions — clicks, taps, key presses — not just the first one.
1. Break up long JavaScript tasks
Any JavaScript task longer than 50ms blocks the main thread. Split heavy operations into smaller chunks using requestIdleCallback() or scheduler.yield().
2. Reduce JavaScript bundle size
Less JavaScript means less parsing and execution. Use code splitting, tree shaking, and lazy loading for components that aren't immediately visible. Review your bundle with webpack-bundle-analyzer.
3. Defer non-critical work
Analytics, chat widgets, and social media embeds don't need to load before the user can interact. Defer them with setTimeout or load them on user interaction (scroll, click).
4. Reduce DOM complexity
Pages with 1,500+ DOM elements are slow to update. Simplify your HTML structure, virtualize long lists, and avoid deeply nested containers.
How to fix Cumulative Layout Shift (CLS)
CLS measures visual stability. When elements shift around while the page loads, users accidentally click wrong buttons and lose their reading position. It's frustrating.
1. Set dimensions on images and videos
Always include width and height attributes on images and videos. This lets the browser reserve the correct space before the media loads.
2. Reserve space for dynamic content
Ads, cookie banners, and notification bars push content around when they load. Use CSS min-height to reserve space or load them in fixed positions that don't shift the layout.
3. Use font-display: swap
Custom fonts can cause text to reflow when they load. Use font-display: swap and preload critical fonts. Better yet, use system fonts that require no download.
4. Avoid inserting content above existing content
Never dynamically insert banners, promotions, or notifications above the fold after the page has loaded. If you must show dynamic content, use fixed/sticky positioning or append it below the viewport.
Priority order: what to fix first
Not all fixes have equal impact. Here's the recommended order:
- Server response time (TTFB): If your server is slow, nothing else matters. Fix hosting/caching first.
- LCP: The biggest perceived improvement. Optimize your hero image, preload it, and eliminate render-blocking CSS/JS.
- CLS: Quick wins here. Add image dimensions and reserve space for ads — often fixable in an hour.
- INP: Harder to fix but important for interactive pages. Start with code splitting and deferring third-party scripts.
Monitor your Core Web Vitals
Run a free Foglift scan to see your current performance score and get a prioritized list of what to fix. Pro users get weekly monitoring and email alerts when scores change.
Check Your Performance Score FreeCommon mistakes to avoid
- Only testing lab data: Lab scores (Lighthouse) can differ from real-user data (CrUX). Check both.
- Ignoring mobile: Google uses mobile-first indexing. Your mobile Core Web Vitals matter more than desktop.
- Over-optimizing one metric: A perfect LCP means nothing if your CLS is terrible. Balance all three.
- One-time fixes: New features, content, and third-party scripts can regress your scores. Monitor regularly.
Bottom line
Core Web Vitals are a direct Google ranking factor. Fixing them improves both your search position and user experience. Start by measuring your current scores, focus on LCP first, and set up regular monitoring to prevent regressions.
Run a free Foglift scan to see your performance score and get specific recommendations for your site.