FrontendHaltCore Web Vitals
Diagnose LCP, INP, and CLS with field and lab evidence.
WHAT YOU WILL BE ABLE TO DO
Learning outcomes
- Explain core web vitals in plain language.
- Connect the behavior to the underlying browser or framework model.
- Implement the core pattern and reason through edge cases.
- Answer common follow-ups without relying on memorized phrases.
01Signals
- LCP (Largest Contentful Paint): time until the largest visible element renders. Good: ≤ 2.5s.
- INP (Interaction to Next Paint): responsiveness of interactions across the page's lifetime, from input to the next visual update. Good: ≤ 200ms.
- CLS (Cumulative Layout Shift): sum of unexpected layout-shift scores. Good: ≤ 0.1.
02Measurement
Field data (CrUX, real-user monitoring) reflects what actual visitors on real devices and networks experienced, and is what search ranking and business impact are based on. Lab data (Lighthouse, synthetic runs) is reproducible and great for debugging and regression testing, but a single lab run can miss the variance real users hit.
03Diagnosis
- LCP: preload/priority-hint the hero resource, remove render-blocking CSS/JS above the fold, use a CDN, avoid client-side-only rendering for the LCP element.
- INP: break up long tasks on input handlers, defer non-critical JS, avoid large synchronous state updates on every keystroke.
- CLS: reserve space for images/ads/embeds with explicit dimensions, avoid injecting content above existing content, load web fonts with font-display and size-matched fallbacks.
DDConcept deep dives
Deep dive 1
The metrics cover load, response, and stability
LCP captures when the largest relevant content element is rendered, INP summarizes interaction latency across a visit, and CLS accumulates unexpected layout-shift clusters. Production assessment uses field data at the 75th percentile, commonly segmented between mobile and desktop, rather than one developer machine.
- Current good thresholds are LCP at most 2.5 seconds, INP at most 200 ms, and CLS at most 0.1.
- The metrics evolve, so verify current definitions before quoting them.
- A metric score identifies an outcome; attribution identifies the cause.
Deep dive 2
Field and lab evidence have different jobs
Real-user monitoring and CrUX include actual device, network, cache, route, and interaction diversity. Lab tools provide controlled reproduction and detailed traces. A green synthetic landing-page test cannot disprove poor INP caused by a later dashboard interaction.
- Segment field data so a fast majority does not hide a damaged route or device class.
- Use attribution to capture the LCP element and slow interaction target.
- Compare before and after over an appropriate traffic window.
Deep dive 3
Optimize timing subparts, not the acronym
For LCP, separate server response, resource discovery delay, resource load duration, and render delay. For INP, separate input delay, handler processing, and presentation delay. For CLS, inspect which unstable element shifted and which preceding content caused it. This directs work to the actual bottleneck.
- Preloading cannot fix a slow origin or client-rendered discovery path by itself.
- Breaking long tasks improves responsiveness only if the chunks truly yield.
- Reserve media and embed space before content arrives.
QAInterview questions and model answers
Attempt each answer aloud before opening it. The model answer shows the depth and precision expected in an interview; it is not a script to memorize.
Intermediate · Conceptual · 1 min · Question 1What are the current Core Web Vitals?Open model answer
Model answer
Largest Contentful Paint measures loading experience, Interaction to Next Paint measures interaction responsiveness, and Cumulative Layout Shift measures visual stability. Field assessment uses the 75th percentile separated by device class.
Open question page →Intermediate · Conceptual · 1 min · Question 2How do lab and field data differ?Open model answer
Model answer
Lab data is repeatable and diagnostic under controlled conditions. Field data records real users, devices, networks, caches, and interactions. Use field data to understand outcomes and lab traces to reproduce and fix causes.
Open question page →Intermediate · Conceptual · 1 min · Question 3What commonly hurts LCP?Open model answer
Model answer
Slow server response, render-blocking resources, late discovery or low priority of the LCP resource, excessive client-side rendering, and delayed fonts or images. First identify the actual LCP element and its timing subparts.
Open question page →Intermediate · Conceptual · 1 min · Question 4How do you improve INP?Open model answer
Model answer
Find slow interactions, reduce main-thread long tasks, minimize rendering work, break up CPU work, avoid layout thrashing, and give immediate feedback. The problem may be input delay, handler time, or presentation delay.
Open question page →Intermediate · Conceptual · 1 min · Question 5What causes CLS?Open model answer
Model answer
Images or embeds without reserved space, injected content above existing content, late font metric changes, and layout-changing animations. User-initiated shifts within the allowed window are treated differently, but the UI should still avoid surprise.
Open question page →Intermediate · Conceptual · 1 min · Question 6Can a perfect Lighthouse score guarantee good field vitals?Open model answer
Model answer
No. One lab run cannot represent the distribution of real users or later interactions. It can identify opportunities, while field telemetry and CrUX reveal actual population performance.
Open question page →Beginner · Conceptual · 1 min · Question 7What are the good Core Web Vitals thresholds?Open model answer
Model answer
At the 75th percentile, good is LCP at or below 2.5 seconds, INP at or below 200 milliseconds, and CLS at or below 0.1.
Open question page →Advanced · Conceptual · 1 min · Question 8How is INP selected across a page visit?Open model answer
Model answer
It observes interaction latencies and reports a high-percentile interaction, with handling adjusted for the number of interactions, rather than simply averaging every event.
Open question page →Advanced · Conceptual · 1 min · Question 9What is an LCP resource load delay?Open model answer
Model answer
It is time between the first-byte milestone and when the browser starts fetching the LCP resource, often caused by late discovery or low priority.
Open question page →Advanced · Conceptual · 1 min · Question 10Do all layout shifts count toward CLS?Open model answer
Model answer
Shifts following recent user input within the exclusion window are generally excluded, and shifts are grouped into session windows. Unexpected movement should still be minimized.
Open question page →SCScenario questions
Scenario 1
Field INP is poor, but the landing-page Lighthouse run is green.
- Collect interaction attribution from real sessions.
- Segment by route, device, and interaction type.
- Reproduce the slow interaction with CPU throttling.
- Inspect input delay, handler work, rendering, and third-party tasks.
Reveal worked answer
INP concerns interactions throughout the visit, while Lighthouse mainly audits an initial lab journey. I would add web-vitals attribution, find the interaction and population driving the 75th percentile, reproduce it, reduce long tasks or render scope, and watch field data over the next reporting window.