Web Vitals Reference

The Web Vitals Reference is a comprehensive, interactive guide to Google's Core Web Vitals and supplementary performance metrics. It covers the three Core Web Vitals — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — as well as supplementary metrics like First Contentful Paint (FCP), Time to First Byte (TTFB), and Total Blocking Time (TBT).

Each metric card displays the official good/needs-improvement/poor thresholds with color-coded indicators. You can enter your own values into the built-in checker to instantly see whether your site's performance falls into the green, yellow, or red zone. The visual gauge shows exactly where your value sits relative to the thresholds.

The tool includes detailed optimization tips, diagnostic checklists for common causes of poor scores, and an interactive page-load timeline that shows when each metric fires during the loading process. Understanding the relationships between metrics — for example, how a slow TTFB directly delays LCP — is key to effective performance work.

If you are building a performance budget, pair this tool with a performance budget calculator to set concrete targets. For resource optimization, the preload generator helps you craft the right preload hints, and the cache control builder lets you configure optimal caching headers.

All processing happens entirely in your browser. No performance data is sent to any server. This makes it safe to reference while working on production performance audits.

1. Browse the metric cards to understand each Web Vital — its name, description, and official thresholds.
2. Use the filter buttons (All / Core Web Vitals / Supplementary) to focus on the metrics you care about.
3. Enter a numeric value in the "Check your value" input field on any metric card to see if it falls in the good, needs-improvement, or poor range.
4. Watch the gauge visualization update to show exactly where your value sits relative to the thresholds.
5. Click "Details & Optimization Tips" to expand the full explanation, improvement strategies, and diagnostic checklist for each metric.
6. Review the Page Load Timeline to understand when each metric fires during the loading process.
7. Use the search bar to quickly find a specific metric by name, description, or category.