Web Vitals Scorer
Enter your LCP, INP, and CLS values to get instant Pass/Fail ratings against Google's Core Web Vitals thresholds — with actionable optimization tips for each metric.
Optimization Tips
Threshold Reference
| Metric | ✓ Good | ⚠ Needs Improvement | ✗ Poor |
|---|---|---|---|
| LCP | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |
| INP | ≤ 200ms | 200ms – 500ms | > 500ms |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Frequently Asked Questions
What are Core Web Vitals?▼
Core Web Vitals are a set of real-world performance metrics defined by Google that measure the user experience of a web page. The three key metrics are LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift). Google uses these as ranking signals for search results.
What is LCP (Largest Contentful Paint)?▼
LCP measures how long it takes for the largest visible content element (image, video, or text block) to render. Good: ≤2.5s, Needs Improvement: ≤4.0s, Poor: >4.0s. Optimize LCP by improving server response time, using a CDN, preloading critical resources, and optimizing images.
What is INP (Interaction to Next Paint)?▼
INP measures the responsiveness of a page to user interactions. It replaced FID (First Input Delay) as of March 2024. Good: ≤200ms, Needs Improvement: ≤500ms, Poor: >500ms. Improve INP by reducing JavaScript execution time, breaking up long tasks, and using requestIdleCallback.
What is CLS (Cumulative Layout Shift)?▼
CLS measures visual stability — how much page elements move around during loading. Good: ≤0.1, Needs Improvement: ≤0.25, Poor: >0.25. Fix CLS by always specifying width/height for images and embeds, avoiding inserting content above existing content, and using CSS transform animations.
How do I measure my Core Web Vitals?▼
Use Chrome DevTools (Lighthouse, Performance tab), PageSpeed Insights (web.dev/measure), Chrome UX Report in Google Search Console, or install the web-vitals JavaScript library. Field data from real users is most accurate for ranking purposes.
Related Products
on GumroadDevToolkit 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 →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 →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 →
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 →
PWA Manifest Generator
Generate a valid Web App Manifest (manifest.json) for your Progressive Web App. Configure name, icons, display mode, theme colors, and orientation. Download ready-to-use JSON.
Open free tool →
More Free Tools
Related Articles
Web Performance 2026: INP, Core Web Vitals & Lighthouse CI
Master web performance in 2026: INP replacing FID, LCP and CLS optimization, Lighthouse CI in GitHub Actions, RUM with web-vitals.js, and setting performance budgets to keep your site fast.
Zed Editor 2026: Is It Ready to Replace VS Code for Developers?
Zed is a high-performance code editor built in Rust that challenges VS Code with blazing-fast startup, native multiplayer collaboration, and integrated AI features. Is it ready for daily use in 2026?
Progressive Web Apps Complete Guide 2026: Service Workers, Offline-First, and Beyond
The definitive PWA guide for 2026. Learn service workers, Web App Manifest, offline-first strategies, push notifications, installability, and how PWAs compare to native apps—with real code examples.
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.
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.
Enjoying this tool? Get more like it.
Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.
Unlock AI-Powered Dev Tools
- ⚡ AI Code Review, Doc Generator & SQL Builder
- ⚡ All premium templates & early access
- ⚡ Member discounts on Gumroad products
$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.
MIT licensed · Instant download · No subscription
See what's included → Browse all deals →