Web Performance

CLS scores how much visible content moves unexpectedly during a page's life. It ignores movement the user just triggered — shifts within 500 milliseconds of a click, tap or key press — and elements moved with CSS transforms.

INP measures discrete interactions — clicks, taps and key presses — timing each from the user's input to the next frame painted after the page responds. Scrolling and hovering are excluded, and one value per page visit is reported.

LCP records when the largest content element visible in the viewport finished rendering, timed from the start of navigation. Eligible candidates are images, SVG <image> elements, video poster frames, elements with a CSS background-image, and block-level elements containing text.

First Contentful Paint marks the moment the browser first renders any piece of DOM content — text, an image, a non-white canvas or an SVG. It proves the page has stopped being blank, but says nothing about whether the main content or anything usable has arrived.

Each shift scores impact fraction times distance fraction: the share of the viewport the moving content covered before and after, times how far it moved relative to the viewport's larger side. The page reports the largest sum inside one session window.

The critical rendering path is everything a browser must fetch and process before it can paint: the HTML, the DOM built from it, and the CSS. A render-blocking resource is one the browser insists on having before that first paint.

Deferring offscreen images and iframes saves bytes, requests and connection capacity for content the user never scrolls to, leaving more bandwidth for what is on screen first. It does not make the deferred content itself arrive faster — it arrives later, on demand.

preload fetches a resource the current page definitely needs, at high priority, during this navigation. prefetch fetches something a likely next navigation will need, at the lowest priority, using idle time. Same syntax, opposite intent.

Parser-blocking stops the HTML parser from building more DOM; render-blocking only withholds the first paint while parsing continues. A synchronous script waits for preceding stylesheets because it may read computed styles, which requires a complete CSSOM.

Deferring everything delays content the user is already looking at, so the page starts slower rather than faster. Draw the line by viewport probability: anything that paints in the first screen loads eagerly, and only content the user may never reach is deferred.

Route-based splitting shrinks the first download to the landing route's code, so the app becomes interactive sooner. It does not reduce total JavaScript: a user who visits every route still fetches all of it, just later and in more requests.

Attribute cost per origin: count the requests and bytes that vendor's hosts pull, measure the main-thread time its scripts occupy, then block the domain and re-measure the same journey. The difference is the number to report.

Tree shaking cannot narrow what the module format hides: lodash's main published build is CommonJS, so a named import still drags in the whole library. Confirm the size in the build output, then deep-import lodash/debounce, switch to lodash-es, or drop the dependency.

A transfer budget should be measured on the compressed bytes actually sent, not the file on disk, and it must name the algorithm: brotli output for the same JavaScript is typically noticeably smaller than gzip, so "150 KB" is ambiguous otherwise.

Each rectangle's area is the byte size that module contributes to an emitted chunk, nested by its folder path. The report shows what is in the bundle and how heavy it is — never whether that code ever runs.

font-display tells the browser what to paint while a web font is still downloading: nothing (FOIT, a flash of invisible text) or the fallback family (FOUT, a flash of unstyled text that is later replaced by the web font).

Match the format to the content: JPEG for photographs, PNG when flat artwork needs exact pixels or transparency, SVG for vector art such as logos and icons that must stay crisp at any size and any screen density.

The browser downloads a 2000px image's full bytes no matter how small CSS draws it, so a phone that needs roughly 800 pixels of width pays for several times the pixels it can show. Serving a ladder of widths recovers that budget.

Each value sets two windows. block gives a short blocking window then swaps whenever the font lands; swap blocks for almost nothing and swaps at any time; fallback blocks briefly and swaps only within a short window; optional blocks briefly and never swaps on that load.

Both compress photographs far better than JPEG — WebP typically around a quarter to a third smaller, AVIF usually smaller again — and both support alpha. AVIF costs much more CPU to encode, can smear fine detail, and can inflate tiny flat images.

A frame lasts about 16.7 ms at 60 Hz and about 8.3 ms at 120 Hz. The browser needs part of every frame for its own style, layout, paint and compositing work, so budget only around half of it — roughly 8-10 ms at 60 Hz — for your code.

Release everything setup registered on something longer-lived than the view: listeners on window or document, timers, observers, store and socket subscriptions, in-flight requests, and entries pushed into module-level collections. A multi-page site gets a clean heap on every navigation; an SPA never does.

That sawtooth is layout thrashing: the code measures geometry and mutates the DOM in the same loop, so each iteration forces the browser to redo layout. To locate it, open the detail pane on one of those layout entries — DevTools flags a forced layout and links to the JavaScript that triggered it.

A long task is one uninterrupted unit of main-thread work lasting over 50 ms. The 50 ms comes from the roughly 100 ms budget for responding to input: it leaves half that budget free. While a long task runs, input, timers and frames all wait.

Yield right after the DOM update that shows feedback and before the expensive recalculation. The interaction is timed until the next paint, so painting the feedback first closes the measured window while the heavy work runs after it.

A content hash changes only when the file's bytes change, so unchanged files keep their URL across releases and stay cached, while changed files get a new URL nobody has cached. That is what makes a year-long cache lifetime safe.

A CDN keeps copies of responses in data centres near users, so each request travels a short distance instead of crossing an ocean, removing most of the round trips before the first byte. It only helps responses it can cache; an uncacheable, per-user response still goes to the origin.

The server compressed the response with gzip or Brotli, so only compressed bytes crossed the network. The browser decompresses first and then parses all 380 kB, so compression saves download time, not parse or execution cost.

Cache hit ratio is the share of requests an edge answered from its own cache instead of fetching from the origin. On never-changing files a low ratio usually means cache-key fragmentation from query strings, a lifetime shorter than the gap between requests, traffic spread thinly across independent PoPs, or responses the CDN was told not to store.

A back/forward cache restore returns the previous page instantly — scroll position and in-page state intact, no network requests and no scripts re-run. Back navigations are a sizable share of real traffic, which makes eligibility one of the cheapest perceived-speed wins available.

A performance budget is a limit agreed in advance on a measurable property of the built site — bytes shipped, request count, or a metric such as LCP — that a CI job checks on every pull request and fails the build when exceeded.

Lab data comes from a page load you generate yourself on a chosen device, network and cache profile, so it is repeatable and debuggable. Field data comes from real visitors' browsers, so it is messy but describes what users actually experienced.

A lab run measures one scripted load on a device, network and cache profile you chose; field data aggregates every real visit on real hardware. Both can be accurate because they describe different populations and, for some metrics, different definitions.

A p75 LCP of 2.4 seconds means three quarters of measured page loads reached their largest contentful paint at or before 2.4 seconds, and one quarter were slower. p75 is chosen because it represents most visits while staying far enough from the extreme tail to be stable and actionable.

The observe() call omitted buffered: true. A PerformanceObserver normally only sees entries created after it registers, so an observer starting late misses events the browser already recorded. buffered: true replays matching entries already sitting in the performance timeline, and it only works with the single-type form of observe().