Core Web Vitals in Production: LCP, INP and CLS
Operate web performance like a system: LCP, INP and CLS from field data, lab diagnosis, budgets, release-tagged RUM, regression gates and rollback.
Core Web Vitals: common questions
What are the Core Web Vitals?
Largest Contentful Paint (loading, good under 2.5 s), Interaction to Next Paint (responsiveness, good under 200 ms) and Cumulative Layout Shift (visual stability, good under 0.1), measured at the 75th percentile of real users.
What is the difference between field data and lab data?
Field data (RUM, CrUX) comes from real users on real devices and is what Google ranks on. Lab data (Lighthouse) is one controlled run, useful for finding the cause.
Related chapters
- The Cost of JavaScript: Bundle Size, Parsing and Hydration
- Critical Rendering Path Explained: DOM, CSSOM, Paint
- Critical CSS: Inline Above-the-Fold Styles
- CSS Performance: Selectors, @import and Layout Cost
- HTTP Caching Explained: Cache-Control, ETag, CDN
- Lazy Loading Images and Code: Best Practices
- List Virtualization (Windowing) in React Explained
- Intersection Observer API Explained, with Examples
- Frontend Performance Case Studies: Netflix, Airbnb, Flipkart
Keep learning
More courses
- Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
- Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
- React from open source with patterns — Patterns extracted from Material UI, Radix, React Aria, React Hook Form, Redux Toolkit, TanStack, and Next.js — not slides about hooks.
- Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
- System Design — Core concepts first (SQL vs NoSQL, CAP, indexing, replication, sharding), then designs grouped by what carries them: the database, Redis, Kafka, or many services.
- Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
- Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
- TypeScript in depth — The type system as a design tool. Inference, narrowing, generics, and the errors that mean the model is wrong — not a catalog of utility types.
- CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
- Accessibility — Foundations first (WCAG in plain words, semantic HTML, lists, alt text), then hands-on HTML labs, a full pass of WAI-ARIA 1.3, and a final fix-the-page challenge.
- Docker — What an image is, why layers cache, and how containers find each other on a network.
- Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.