Skip to main content

Core Web Vitals Budget Calculator

Enter your LCP, INP, and CLS measurements to instantly check pass/fail status against Google's official thresholds, get an estimated performance score, and see tips for each metric.

✓ Google 2024 thresholds ✓ LCP / INP / CLS ✓ Optimization tips

Enter Your Metrics

Largest Contentful Paint
Interaction to Next Paint
Cumulative Layout Shift
Quick Presets

Frequently Asked Questions

What are the Google thresholds for Core Web Vitals?▼

Google defines three tiers for each metric. LCP (Largest Contentful Paint): Good ≤ 2500ms, Needs Improvement 2500–4000ms, Poor > 4000ms. INP (Interaction to Next Paint): Good ≤ 200ms, Needs Improvement 200–500ms, Poor > 500ms. CLS (Cumulative Layout Shift): Good ≤ 0.1, Needs Improvement 0.1–0.25, Poor > 0.25. All three must be in the 'Good' range to pass the Core Web Vitals assessment.

What is LCP and how do I improve it?▼

LCP (Largest Contentful Paint) measures how long it takes for the largest visible element (hero image, headline, video thumbnail) to fully render. To improve it: 1) Preload the LCP image with <link rel='preload'>. 2) Use a CDN to reduce server response time. 3) Avoid lazy-loading the LCP element. 4) Use modern image formats (WebP/AVIF) with appropriate sizes. 5) Inline critical CSS to eliminate render-blocking. Target: < 2500ms for at least 75% of page loads.

What is INP and how does it replace FID?▼

INP (Interaction to Next Paint) replaced FID as an official Core Web Vital in March 2024. Unlike FID (which measured only the input delay of the first interaction), INP captures the full latency of all interactions — tap, click, or key press — and reports the worst one. To improve INP: break up long tasks with setTimeout/scheduler.yield, reduce JavaScript execution time, use web workers for heavy computation, and defer non-critical scripts.

What is CLS and what causes layout shifts?▼

CLS (Cumulative Layout Shift) measures how much page content unexpectedly moves during load. A score of 0 means no shifting; higher is worse. Common causes: images/videos without explicit width and height attributes, ads or embeds injecting content above existing text, web fonts causing FOIT/FOUT reflow, and dynamically inserted banners. Fix: always declare image dimensions, use CSS aspect-ratio, and load fonts with font-display: optional.

How does Google use Core Web Vitals for ranking?▼

Google uses Core Web Vitals as part of its 'Page Experience' ranking signal. The signal is based on field data from the Chrome User Experience Report (CrUX), which aggregates real user measurements. A page passes Core Web Vitals if at least 75% of visits achieve 'Good' scores on all three metrics. Failing doesn't cause a ranking penalty per se, but passing can give a small positive signal when other ranking factors are equal.

Share this tool: X / Twitter LinkedIn
✓ 60,000+ developers use DevPlaybook ★★★★★ 4.8 / 5 on Gumroad ✓ MIT licensed · Instant download ✓ No login required

Related Products

on Gumroad

You Might Also Need

More Free Tools

Enjoying this tool? Get more like it.

Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.

DevPlaybook Pro 7 days free

Unlock AI-Powered Dev Tools

  • ⚡ AI Code Review, Doc Generator & SQL Builder
  • ⚡ All premium templates & early access
  • ⚡ Member discounts on Gumroad products
Start Free Trial →

$9/mo after trial · Cancel anytime

Want the full toolkit?

Get DevPlaybook Pro

Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.

$79
$241 separately Save $162 (67% off)
Get DevPlaybook Pro — $79 →

MIT licensed · Instant download · No subscription

See what's included → Browse all deals →