Skip to main content

Core Web Vitals Calculator

Enter your LCP, INP, and CLS values to get an instant pass/fail grade. Color-coded results show exactly where you stand against Google's thresholds. Also supports FCP and TTFB. All calculations run in your browser.

✓ LCP, INP, CLS (+ FCP, TTFB) ✓ Good / Needs Improvement / Poor thresholds ✓ Overall grade + optimization tips

Enter Your Metrics

Frequently Asked Questions

What are Core Web Vitals?▼

Core Web Vitals are three user-centric performance metrics used by Google as ranking signals: LCP (Largest Contentful Paint) measures how fast the main content loads, INP (Interaction to Next Paint) measures responsiveness to user interactions, and CLS (Cumulative Layout Shift) measures visual stability. Google updated CWV in March 2024, replacing FID with INP.

What are the Good, Needs Improvement, and Poor thresholds?▼

LCP: Good ≤ 2.5s, Needs Improvement 2.5–4.0s, Poor > 4.0s. INP: Good ≤ 200ms, Needs Improvement 200–500ms, Poor > 500ms. CLS: Good ≤ 0.1, Needs Improvement 0.1–0.25, Poor > 0.25. FCP: Good ≤ 1.8s, Needs Improvement 1.8–3s, Poor > 3s. TTFB: Good ≤ 0.8s, Needs Improvement 0.8–1.8s, Poor > 1.8s.

What replaced FID in Core Web Vitals?▼

INP (Interaction to Next Paint) replaced FID (First Input Delay) as an official Core Web Vital in March 2024. FID only measured the delay before the browser started processing the first interaction. INP measures the full input latency — from user interaction through rendering — for all interactions on the page, giving a more accurate picture of responsiveness.

How do I measure my site's Core Web Vitals?▼

Field data (real users): Google Search Console Core Web Vitals report, Chrome User Experience Report (CrUX), and the web-vitals.js library. Lab data (simulated): Chrome DevTools Lighthouse, PageSpeed Insights, WebPageTest. Important: Google uses field data (CrUX) for search ranking, not lab data. Lab data is for debugging — field data shows what real users experience.

How do I fix a poor LCP score?▼

LCP is usually the hero image or largest text block. Fixes: (1) Preload the LCP element with <link rel='preload'>. (2) Use a CDN to serve images close to users. (3) Optimize image formats — use WebP/AVIF with proper sizing. (4) Eliminate render-blocking resources (defer non-critical JS/CSS). (5) Use HTTP/2 or HTTP/3. (6) Enable compression (gzip/brotli). Target: LCP should load within the first 2.5 seconds of page start.

How do I reduce CLS?▼

CLS (layout shift) is caused by elements that move after initial render. Common fixes: (1) Always specify width and height attributes on images and videos. (2) Reserve space for ads and embeds with CSS aspect-ratio. (3) Avoid inserting content above existing content. (4) Use font-display: optional or preload fonts to avoid FOIT/FOUT. (5) Animate with transform and opacity instead of properties that trigger layout (margin, height, top).

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
🚀 $19

DevToolkit Starter Kit

A ready-to-deploy developer tools website with 12 built-in tools. Astro + Preact + Tailwind. Deploy to Cloudflare Pages for free. Built-in SEO, dark mode, and ad-ready layout.

Buy on Gumroad →
📘 $14

TypeScript Quick Reference Toolkit

5 practical reference files for TypeScript developers: cheatsheet, TS vs JS comparison, 20 utility types with real examples, tsconfig best practices template, and 15 common mistakes guide. Print it. Keep it on your desk.

Buy on Gumroad →
⚡ $29

Developer Productivity Bundle

Stop rebuilding the same setup every project. 51 VSCode snippets, 40 Git aliases, 5 Docker Compose stacks, 5 GitHub Actions workflows, 5 README templates, and a dotfiles kit. Set up a professional dev environment in under an hour.

Buy on Gumroad →

You Might Also Need

Web Performance Checklist

Interactive web performance checklist covering images, fonts, JavaScript, CSS, caching, and server. Check off items to track your score out of 100 and export as Markdown.

Open free tool →

Database Index Analyzer

Paste SQL schema + queries to find missing and redundant indexes. Generates CREATE INDEX statements for WHERE filters, JOINs, and ORDER BY columns.

Open free tool →

Lighthouse Score Simulator

Estimate Lighthouse performance scores based on JS bundle size, CSS, images, TTFB, and render-blocking resources. Get LCP, FID, CLS, FCP estimates.

Open free tool →

More Free Tools

Web Performance Checklist Database Index Analyzer Lighthouse Score Simulator Web Vitals Budget Planner Image Optimization Calculator Database Query Cost Analyzer Core Web Vitals Guide Image Optimizer Checklist URL Slug Generator WebP Converter Web Vitals Scorer SQL Index Advisor HAR Diff Analyzer MySQL Query Explainer PostgreSQL EXPLAIN Analyzer Dockerfile Linter k6 Load Test Script Generator HTTP/2 Server Push Headers Builder Web Vitals Analyzer Image Compression Estimator Database Index Advisor Smart Contract Gas Estimator Docker Layer Optimizer LLM Benchmark Calculator k6 Script Generator RAG Chunking Calculator Core Web Vitals Budget Calculator Bundle Size Budget Calculator TTFB Analyzer

Related Articles

Mar 24, 2026 · 11 min read

JavaScript Bundle Size Optimization: From 2MB to 200KB — A Practical Guide

Practical techniques to reduce JavaScript bundle size from megabytes to kilobytes. Covers tree shaking, code splitting, dynamic imports, bundle analysis, and tools that actually work in 2026.
Mar 24, 2026 · 6 min read

JavaScript Minifier Online: Compress and Minify JS Files Free

Minify JavaScript online for free. Reduce JS file size by removing whitespace, comments, and shortening variable names. Learn when to minify, how it works, and best practices.
Mar 24, 2026 · 11 min read

Web Vitals Optimization: Achieve Core Web Vitals Score 90+ in 2026

Step-by-step guide to achieving Core Web Vitals score of 90+ in 2026. Covers LCP, INP, CLS optimization techniques with code examples, measurement tools, and before/after benchmarks.
Apr 2, 2026 · 12 min read

AWS Lambda Cold Start Optimization: 10 Proven Techniques 2026

Eliminate or minimize AWS Lambda cold starts with 10 proven techniques: provisioned concurrency, SnapStart, package minimization, ARM Graviton2, lazy loading, and more with benchmark data.
Mar 24, 2026 · 11 min read

Best Load Testing Tools for Developers in 2025: k6, JMeter, Locust, and More

A practical comparison of load testing tools in 2025 — k6, JMeter, Locust, Gatling, and Artillery — covering scripting ease, CI integration, cloud execution, and when each tool fits your testing needs.

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 →