A structured, hands-on learning repository for mastering Core Web Vitals and key browser performance metrics — from theory to measurement to optimization.
web-vitals-mastery/
│
├── web_vital/ # Overview of all Web Vitals
│ ├── web_vitals.md # What are Web Vitals? Why do they matter?
│ └── index.js # Measuring web vitals via JS API
│
├── TTFB/ # Time to First Byte
│ └── TTFB.md # Concept, thresholds, and optimization tips
│
├── FCP/ # First Contentful Paint
│ ├── fcp.md # Concept, thresholds, and optimization tips
│ └── index.js # Measuring FCP with PerformanceObserver
│
├── LCP/ # Largest Contentful Paint
│ ├── lcp.md # Concept, thresholds, and optimization tips
│ └── index.js # Measuring LCP with PerformanceObserver
│
├── FID/ # First Input Delay
│ └── FID.md # Concept, thresholds, and optimization tips
│
├── INP/ # Interaction to Next Paint (replaces FID)
│ └── INP.md # Concept, thresholds, and optimization tips
│
├── CLS/ # Cumulative Layout Shift
│ └── cls.md # Concept, thresholds, and optimization tips
│
├── TBT/ # Total Blocking Time
│ └── TBT.md # Concept, thresholds, and optimization tips
│
├── TTI/ # Time to Interactive
│ └── TTI.md # Concept, thresholds, and optimization tips
│
└── web_vitals_interview_questions/ # Interview Prep
└── questions.md # Basic to advanced interview questions
An introduction to the Web Vitals initiative by Google. Covers:
- What Web Vitals are and why they matter for UX & SEO
- The difference between Core Web Vitals and Other Web Vitals
- How to measure them using the
web-vitalsJS library andPerformanceObserver
Measures the time from when the browser sends an HTTP request to when it receives the first byte of a response from the server.
| Threshold | Rating |
|---|---|
| ≤ 800 ms | ✅ Good |
| 800 ms – 1800 ms | |
| > 1800 ms | ❌ Poor |
Key topics: Server response time, CDN caching, HTTP/2, Edge computing.
Measures the time from page load start to when any part of the page's content is rendered on screen (text, image, SVG, etc.).
| Threshold | Rating |
|---|---|
| ≤ 1.8 s | ✅ Good |
| 1.8 s – 3 s | |
| > 3 s | ❌ Poor |
Key topics: Render-blocking resources, critical CSS, font loading strategy.
Measures the time for the largest visible content element (image, video, block-level text) to fully render in the viewport.
| Threshold | Rating |
|---|---|
| ≤ 2.5 s | ✅ Good |
| 2.5 s – 4 s | |
| > 4 s | ❌ Poor |
Key topics: Image optimization, preloading, lazy loading, server-side rendering.
Measures the time from when a user first interacts with a page (click, tap, key press) to when the browser is actually able to begin processing that event.
| Threshold | Rating |
|---|---|
| ≤ 100 ms | ✅ Good |
| 100 ms – 300 ms | |
| > 300 ms | ❌ Poor |
⚠️ Note: FID has been replaced by INP as a Core Web Vital since March 2024.
Key topics: JavaScript execution, long tasks, main thread blocking.
Measures the overall responsiveness of a page to user interactions throughout its entire lifecycle. It replaces FID as a Core Web Vital.
| Threshold | Rating |
|---|---|
| ≤ 200 ms | ✅ Good |
| 200 ms – 500 ms | |
| > 500 ms | ❌ Poor |
Key topics: Event callbacks, rendering pipeline, scheduler.yield(), debouncing.
Measures the visual stability of a page by quantifying how much the layout unexpectedly shifts during the page's lifespan.
| Threshold | Rating |
|---|---|
| ≤ 0.1 | ✅ Good |
| 0.1 – 0.25 | |
| > 0.25 | ❌ Poor |
Key topics: Image/ad/embed dimensions, aspect-ratio, font font-display, dynamic content insertion.
Measures the total amount of time the main thread was blocked long enough to prevent input responsiveness, between FCP and TTI.
| Threshold | Rating |
|---|---|
| ≤ 200 ms | ✅ Good |
| 200 ms – 600 ms | |
| > 600 ms | ❌ Poor |
Key topics: Long tasks (>50ms), code splitting, third-party scripts, Web Workers.
Measures the time until the page is fully interactive — the main thread has been idle for at least 5 seconds after the last long task.
| Threshold | Rating |
|---|---|
| ≤ 3.8 s | ✅ Good |
| 3.8 s – 7.3 s | |
| > 7.3 s | ❌ Poor |
Key topics: JavaScript hydration, deferring non-critical JS, SSR vs CSR trade-offs.
A curated list of basic to advanced Core Web Vitals interview questions to help prepare for frontend and performance engineering roles.
Topics include:
- Definitions and thresholds for each metric
- How to measure and monitor them in production
- Optimization strategies and real-world trade-offs
- Tooling: Lighthouse, PageSpeed Insights, CrUX, DevTools
| Tool | Purpose |
|---|---|
| PageSpeed Insights | Real-world & lab data for any URL |
| Web Vitals article | Official Google guide |
| Chrome DevTools | Performance panel, Lighthouse |
| CrUX Dashboard | Chrome User Experience Report |
web-vitals npm package |
Measure all vitals in JS |
| Metric | Full Name | Measures | Good Threshold |
|---|---|---|---|
| TTFB | Time to First Byte | Server speed | ≤ 800 ms |
| FCP | First Contentful Paint | Loading | ≤ 1.8 s |
| LCP | Largest Contentful Paint | Loading | ≤ 2.5 s |
| FID | First Input Delay | Interactivity (legacy) | ≤ 100 ms |
| INP | Interaction to Next Paint | Interactivity | ≤ 200 ms |
| CLS | Cumulative Layout Shift | Visual Stability | ≤ 0.1 |
| TBT | Total Blocking Time | Main thread | ≤ 200 ms |
| TTI | Time to Interactive | Full interactivity | ≤ 3.8 s |