Performance & Web Vitals

Loading, interaction responsiveness and visual stability measured on real devices, with the main-thread and memory work behind each one. Measure before optimising, always.

Measure Before Optimising
▶ lab

Lab profiles and field data are two instruments answering two different questions. Which browser signal to reach for, and why a local recording is a hypothesis rather than evidence.

Q · Before I change any code, which signal tells me what is actually slow for the people using this?
Loading: Why Content Arrives Late
▶ lab

The main content has to be discovered, requested, delivered and unblocked before it can paint. Late is usually a discovery or a blocking problem, not a byte problem.

Q · The main content of this page appears late — which of the steps between the request and the pixel is holding it up?
Interaction Responsiveness
▶ lab

A slow tap is three separable delays: waiting for the thread, running the handler, and producing the frame that shows the result. Each has a different fix.

Q · When a tap or a keystroke feels slow, which of the three phases between the input and the pixel is actually slow?
Visual Stability
▶ lab

Content moves because something arrived after layout had already been decided. Reserve the space before the content exists, and the shift never happens.

Q · Why does content jump around while the page is loading, and what would have to be true for it not to?
The Real Cost of JavaScript
▶ lab

Bytes are only the download. Parse, compile, execute and retain all cost more, they all scale with the device, and execution competes with rendering for the one thread that can paint.

Q · My bundle is smaller than it was and the app is not faster — what does shipping JavaScript actually cost?
Images and Fonts
▶ lab

The two heaviest things on most pages, and the two most often shipped at the wrong size, in the wrong format, discovered too late, and without any space reserved for them.

Q · How do I get the right pixels and the right glyphs to the user quickly, without moving anything that is already on screen?
Memory Leaks
▶ lab

The app is fine on load and slow an hour later. Something is being retained on every interaction and released on none.

Q · Why does it get slower the longer someone leaves it open?
List Virtualization
▶ lab

A hundred thousand rows of data, about thirty rows of DOM. It is the right answer for large lists and it costs you real things.

Q · The table has 100,000 rows and the page is unusable. What do I actually do?
Memoization

Trading recomputation for memory and an invalidation problem. Sometimes clearly worth it; applied everywhere, a net loss with extra bugs.

Q · Should I memoize this, and how would I know?