LCP, INP, and CLS — what field data measures, good thresholds, and fixes that actually move the needle (per web.dev guidance).

intermediate

Measure before optimizing: hypotheses, percentiles, user journeys, and stopping when the metric doesn’t move.

beginner

Lighthouse lab vs CrUX/RUM field: what each is for, how they diverge, and how to use both.

intermediate

Deep tactics for Largest Contentful Paint — discovery, priority, bytes, server delay, and render delay — beyond the CWV overview.

intermediate

Fix Interaction to Next Paint for real — input delay, handler cost, presentation delay, long tasks, and yielding patterns that move field INP.

intermediate

Fix cumulative layout shift: dimensions, font metrics, reserved slots, and stable late-loading UI.

intermediate

Diagnose Time to First Byte with Navigation Timing and break down backend phases via Server-Timing.

intermediate

Set enforceable JS size budgets per route, measure with CI, and cut payload without cargo-cult micro-opts.

intermediate

Dead-code elimination for ES modules: sideEffects, named imports, and why some libraries won’t shake.

intermediate

Route, component, and vendor splits: dynamic import(), magic comments, and avoiding over-splitting waterfalls.

intermediate

AVIF, WebP, JPEG, PNG: choose formats, quality, and tooling so LCP images stay sharp and small.

beginner

srcset, sizes, and density descriptors so browsers download the right image bytes for each viewport.

intermediate

font-display, preload, subsetting, and metric overrides to balance FOIT/FOUT against CLS and LCP text.

intermediate

Inline above-the-fold CSS, extract critical rules, and avoid shipping megabyte stylesheets on first paint.

advanced

Measure and contain tags, embeds, and widgets: main-thread cost, facades, consent, and contractual budgets.

intermediate

Break up long tasks so INP survives: chunking, scheduler.yield, isInputPending, and framework patterns.

intermediate

scheduler.yield, postTask priorities, and how modern scheduling APIs improve INP over setTimeout hacks.

advanced

Warm critical third-party origins with preconnect; use dns-prefetch lightly; don’t shotgun hints.

intermediate

What H2/H3 change for waterfalls, prioritization, and why domain sharding died — frontend-relevant bits only.

advanced

Enable Brotli/gzip for text assets, pick quality levels, and verify Content-Encoding in production.

beginner

Content-hash filenames, long-cache headers, HTML revalidation, and CDN invalidation without stuck users.

intermediate

Collect field CWV and custom timings from real sessions: sampling, beacons, privacy, and dashboards.

intermediate

Encode LCP/size budgets in CI with Lighthouse CI or size-limit so regressions fail pull requests.

intermediate

Stop forced sync layout loops: batch DOM reads and writes, use rAF, and fix janky measurement code.

intermediate

Render only visible rows: windowing mental model, overscan, scroll issues, and accessibility tradeoffs.

advanced

React.memo, useMemo, useCallback, and cache maps: when memoization helps, when it wastes memory and time.

intermediate

requestIdleCallback, idle deadlines, and what work is safe to defer without breaking UX or analytics.

advanced

Read request waterfalls: critical path chains, priority, blocking, and how to shorten discovery delays.

beginner

What the 0–100 Lighthouse score means, metric weights, variance, and how not to game it.

beginner