From what users feel to what you measure: Core Web Vitals and their phases, field and lab, percentiles and device tiers, attribution, the usual costs, the techniques, and the budgets that hold.
What users feel, how it is measured, and how the cause is attributed.
Google's three field metrics for loading, responsiveness and visual stability: LCP, INP and CLS, judged at the 75th percentile.
in practiceSearch Console reports, CrUX, RUM dashboards; the thresholds every performance budget starts from.
Largest Contentful Paint: when the largest image or text block in the viewport rendered; a proxy for "the main content is here".
in practiceThe hero image or headline; attribution splits it into TTFB, load delay, load time and render delay.
Interaction to Next Paint: the slowest (near-worst) interaction latency in a visit, from input to the next frame, split into input delay, processing and presentation.
in practiceSlow click handlers, long tasks blocking input, heavy re-renders after a keypress.
First Contentful Paint: when any text or image first rendered; the end of the blank screen.
in practiceRender-blocking CSS and scripts delaying it; the first thing a slow-network user sees.
Total Blocking Time: the sum of the over-50 ms portions of long tasks between FCP and interactive; the lab proxy for INP.
in practiceLighthouse's heaviest-weighted score input; hydration and big bundles drive it.
Field (RUM, CrUX) measures real users on real devices as a distribution; lab (Lighthouse, WebPageTest) measures one run in a controlled setup.
in practiceA perfect Lighthouse score with poor CrUX numbers; the lab explains, the field decides.
The value below which that share of samples fall; p75 is what three-quarters of users get or better.
in practiceVitals judged at p75; averages hiding slow tails; never average percentiles across segments.
The Chrome User Experience Report: Google's public dataset of field Core Web Vitals from opted-in Chrome users, by origin and URL.
in practicePageSpeed Insights field section; the data search ranking uses.
Limits on metrics or resources (LCP, INP, KB of JS) per page and device tier, enforced in CI and monitored in the field.
in practicesize-limit failing a PR; a Lighthouse CI assertion; an alert on field regression.
Grouping users by device capability (memory, cores) so performance is measured and budgeted for the slow phones, not the average.
in practicenavigator.deviceMemory and hardwareConcurrency in RUM; the 2 GB Android tier in emerging markets.
Slowing the CPU or network in DevTools or Lighthouse to approximate slower devices and connections.
in practice4× or 6× CPU slowdown; "Slow 4G" presets; an approximation, not a real low-end phone.
performance.mark and measure for your own named timings, visible in traces and readable by RUM.
in practice"search-results-rendered" marks; User Timing in the Performance panel's Timings track.
Where the time usually goes, the techniques that remove it, and the gates that keep it removed.
An API reporting frames that took over 50 ms with the scripts responsible, sources and durations: attribution for INP.
in practicePerformanceObserver for long-animation-frame entries; script URLs and function names in RUM.
The sequence from HTML to first paint: HTML, CSS, render-blocking scripts, render tree, layout, paint; shortening it speeds first render.
in practiceInlining critical CSS, deferring scripts, preloading the LCP resource.
Time the main thread spends on script, style, layout and paint; the budget input and interactions compete for.
in practiceLighthouse's "Minimize main-thread work" breakdown; the Summary tab in a trace.
The performance cost of scripts from other origins (tags, chat, analytics, ads): connections, bytes and main-thread time you do not control.
in practiceLighthouse third-party summary; facades for chat widgets; loading tags after interaction.
A lightweight placeholder that looks like a heavy embed (video player, chat widget) and loads the real thing on interaction.
in practicelite-youtube-embed; "Chat with us" buttons that load the SDK on click.
Keeping a page's full state in memory on navigation away, so back and forward restore it instantly.
in practiceunload handlers and Cache-Control: no-store making pages ineligible; the bfcache test in DevTools Application.
A JSON script telling the browser to prefetch or prerender likely next pages, so navigation is near-instant.
in practice<script type="speculationrules"> with eagerness settings; prerendered product pages from a listing.
The main-thread time to download, parse and run the framework and component code that re-renders server HTML on the client.
in practiceTBT and INP spikes after load; islands, partial hydration, Server Components and resumability reduce it.
A service that resizes, recompresses and reformats images on the fly per request (width, AVIF/WebP, quality).
in practiceURL parameters like ?w=800&fm=avif; responsive srcsets without storing every variant.
dns-prefetch, preconnect, preload, modulepreload, prefetch and prerender: telling the browser about work before it discovers it.
in practiceOne preconnect per critical third-party origin; preload only what is critical; prefetch for next pages.
A byte limit per chunk (compressed) enforced in CI, so JavaScript cannot grow unnoticed.
in practicesize-limit, bundlesize; the 2 KB a day slow rot.
A measurable worsening of a metric tied to a change, found in the lab gate, the ring comparison, or the field trend.
in practiceAn alert cut by route, tier and release; the release diff as the suspect list.