Core Web Vitals
LCP, INP and CLS — what they measure, and the architecture that moves them.
5 to work through
-
intermediate
A commerce platform's field performance metrics are poor. Which improvements have the largest effect on conversion?
2 min answer -
intermediate
A single-page application scores well in the lab and users on mid-range Android phones say it is unusable. Diagnose.
2 min answer -
intermediate
Mobile conversion is 40% below desktop. Product blames the design; analytics shows users leaving before the page is usable. How do you investigate?
2 min answer -
intermediate
You want a 2.5 second largest contentful paint at the 75th percentile on mid-range Android over a typical mobile connection. Roughly how much JavaScript can you ship on the critical path, and which assumption dominates the error?
3 min answer -
advanced
A commerce site's layout shift metric worsens sharply after a release and the team cannot reproduce it locally. How do you find it?
1 min answer
3 terms in this topic
Core Web Vitals
A small set of user-centred performance metrics covering loading, interactivity and visual stability, measured on real users rather than in a lab.
metricCumulative Layout Shift
The extent to which visible content moves unexpectedly during load, which correlates with mis-taps and is almost entirely preventable by reserving space.
practiceLayout Space Reservation
Allocating space for content before it arrives, so that late-loading elements fill a gap rather than displacing what the user is already reading.
Neighbouring topics
Frontend & Experience Architecture
General material on architecting the surface the user actually touches.
Rendering Strategies
Client, server, static and incremental rendering, and what each costs on first paint.
Edge Rendering
Running the render close to the user, and the personalisation and cache trade it implies.
Hydration Cost
The gap between visible and interactive, and the JavaScript that closes it.
Micro-Frontends
Independent deployment of UI slices, and the shared runtime that undermines it.
Module Federation
Loading code from another build at runtime, with versioning and failure to think about.
UI Monorepo Strategy
One repository for many front ends, and the build graph that makes it viable.
Design Systems
Components as a versioned internal product, with adoption and deprecation like any API.
Component Contracts
Props, slots and events as an interface, and the breaking change hidden in a style.
Client State Architecture
Server state, UI state and derived state, and why conflating them causes most bugs.
Client Caching & Data Layer
Stale-while-revalidate, invalidation and optimistic updates on the client.
BFF for Experience
One backend per experience, shaped by the screen rather than by the domain.
API Shapes for UI
REST, GraphQL and RPC judged by over-fetching, round trips and client coupling.
Web Performance Budgets
A number a build can fail against, rather than a performance sprint once a year.
Accessibility Architecture
Semantics, focus management and announcements designed in rather than audited in.
Internationalisation
Locale, direction, pluralisation and dates as structural concerns, not string tables.
Client Feature Flags
Flag evaluation on a device you do not control, and the flicker and staleness it brings.
Real User Monitoring
Field data from real devices and networks, against the synthetic run that looked fine.
Frontend Security
CSP, XSS, CSRF, token storage, and the trust boundary that ends at the browser.