Imagine: your site loads in 5 seconds, but LCP is 4.5 s. Google already marks the page as slow, and traffic drops by 20%. We've encountered this dozens of times: the culprit is not the hosting but an unoptimized hero element, slow TTFB, or render-blocking CSS. Our team has optimized Core Web Vitals for over 200 projects with 7+ years of experience, delivering green metrics on any stack. In this article, we break down how to improve LCP, INP, and CLS using modern techniques. You'll learn which tools track progress and how much time a typical optimization takes. No magic wands—only precise server config, preloads, and font optimization. Every second of delay reduces conversion by 7%, and Core Web Vitals optimization can boost it by 10–15%. Speed and Google Page Experience compliance are mandatory for competitiveness.
Three metrics and target values
| Metric | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5 s | 2.5–4.0 s | > 4.0 s |
| INP (Interaction to Next Paint) | ≤ 200 ms | 200–500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0.1–0.25 | > 0.25 |
INP replaced FID. FID measured only the first interaction; INP measures all interactions. More details in the MDN documentation.
Core Web Vitals optimization strategy
When should you consider optimization?
If at least one metric falls into the red zone, you lose up to 20% of traffic. Green metrics give an advantage in ranking. This is especially important for e-commerce: every second of delay reduces conversion by 7%. Google research shows that 53% of mobile users leave if loading takes longer than 3 seconds.
Why is LCP the main metric?
LCP is the moment when the largest element (usually a hero image or H1) appears on screen. The main causes: missing preload, slow TTFB, render-blocking CSS/JS, and unoptimized images. Preloading the LCP image is 2 times more effective than simply optimizing images.
<link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1200.webp 1200w" imagesizes="100vw"> <img src="/images/hero.webp" fetchpriority="high" loading="eager" width="1200" height="630" alt="LCP optimization"> How does INP affect user experience?
INP measures the delay between a user action and the next paint. Poor INP indicates an overloaded main thread. Techniques:
async function processLargeList(items) { for (let i = 0; i < items.length; i++) { processItem(items[i]); if (i % 50 === 0) { await new Promise(r => setTimeout(r, 0)); } } } import { startTransition } from 'react'; function handleSearch(query) { setInputValue(query); startTransition(() => { setSearchResults(filterResults(query)); }); } CLS: layout stability without surprises
CLS is the sum of element shifts during loading. Each shift irritates users and reduces conversion. Solutions:
<img src="photo.webp" width="800" height="600" alt="layout stability"> <style> .hero-image { aspect-ratio: 16 / 9; width: 100%; } </style> @font-face { font-family: 'Inter'; font-display: optional; src: url('/fonts/inter.woff2') format('woff2'); } Measurement and monitoring tools
| Tool | Data type | Purpose |
|---|---|---|
| PageSpeed Insights | Lab | Quick check |
| Lighthouse (DevTools) | Lab | Detailed audit |
| CrUX (Search Console) | Field | Real users |
| web-vitals npm | Field | Collect into analytics |
import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals'; function sendToAnalytics({ name, value, rating, id }) { gtag('event', name, { event_category: 'Web Vitals', event_label: id, value: Math.round(name === 'CLS' ? value * 1000 : value), non_interaction: true, custom_map: { metric_rating: rating } }); } onCLS(sendToAnalytics); onINP(sendToAnalytics); onLCP(sendToAnalytics); onFCP(sendToAnalytics); onTTFB(sendToAnalytics); How we optimize Core Web Vitals: step-by-step plan
- Audit all pages via PageSpeed Insights, CrUX, and Lighthouse.
- Identify quick wins (preload, sizes, fonts) and deep issues (JS optimization, server delays).
- Implement changes by priority impact on LCP, INP, CLS stabilization.
- Monitor in real time after deployment.
- Document results and recommendations.
What's included in the work
- Full Core Web Vitals audit with a report for each page.
- Elimination of blocking resources, image and font optimization.
- Server caching and CDN configuration if needed.
- JavaScript optimization (breaking long tasks, lazy loading).
- Providing ready-made code with comments for your team.
- Monitoring metrics for 3 months and adjustments.
Work process
- Audit: analysis of all pages, identifying bottlenecks.
- Implementation: making code changes, configuring server caching.
- Monitoring: tracking via CrUX and web-vitals after deployment.
- Warranty: documentation and support of green metrics for 3 months.
Timeline and cost
Typical Core Web Vitals optimization takes 2 to 4 weeks. Cost is calculated individually after the audit, typically ranging from $500 to $2000. Our turnkey optimization includes a free initial audit. Write to us: we will evaluate your project and provide a detailed plan.
Order a free Core Web Vitals audit to get an exact optimization plan and timeline. Get a consultation from our engineer on your metrics.