Performance work goes wrong in a predictable way. Someone decides the site feels slow, changes three things, and has no way to tell whether any of them helped. The discipline is the opposite: pick a metric that describes something a person actually experiences, find out where the time currently goes, change the part that owns most of it, then look at the number again. This guide gives you the shape: which metrics exist and what each really counts, why lab and real-user scores disagree on purpose, and where the time hides on an ordinary page.
Each chapter opens with the short version. Tap one to read the detail.
What "fast" means, and why it is a percentile
~2 min
Three metrics describe the loading, responsiveness and visual stability a person actually feels. Each is judged at the 75th percentile of page loads, not the average — so a site that is fine for most visitors can still fail.
Measure first, then hold the line
~3 min
A scripted run and real-visitor data answer different questions, so a green lab score beside a failing field score is normal rather than contradictory. Measure before you change anything, then turn the number you care about into a budget the build can fail on.
Largest Contentful Paint: where the time actually goes
~2 min
LCP times the paint of the largest content element. It splits into four subparts, and the two meant to be tiny — discovery delay and render delay — are where a slow page usually sits. Blaming the framework is the reflex; the hero image is the culprit.
Cumulative Layout Shift: the metric that keeps counting
~2 min
CLS scores content jumping under the reader. It is not the sum of every shift but the worst burst, and it accrues for the page's whole life. The element that appears is not what scores; the content it shoves is.
Responsiveness: the main thread and the frame budget
~3 min
INP measures a click, tap or key press through to the next painted frame, so a handler that returns fast and leaves heavy rendering behind still scores badly. Underneath sits one thread and a ~16.7 millisecond frame: yield it, or make the change cheaper.
JavaScript is the most expensive thing you ship
~2 min
A kilobyte of script is not a kilobyte of image: it is parsed, compiled and executed on the thread that handles input. Split on routes and interactions, load the rest without blocking the parser, and make every third-party tag justify itself.
Before the first byte, and the queue behind it
~2 min
Time to First Byte counts everything before your HTML starts arriving. After that it is a queue, and hints nudge the order rather than overriding it. The as attribute on a preload is not decoration: without it the file is fetched twice.
Images and fonts: the assets that decide both metrics
~2 min
Images are usually the largest paint and fonts a classic source of shift, and both are governed by declarations rather than code. Pick a modern format, describe your *layout* honestly in sizes, and choose a font-display value on purpose.
Don't fetch it again — or fetch it before it is asked for
~2 min
Caching is two decisions: how long a response may be reused without asking, and what happens when that runs out. The versioned-URL pattern makes repeat visits nearly free, no-cache does not mean what it looks like, and Vary: User-Agent quietly disables caching.
Written by Keentune. We are not affiliated with or endorsed by the organizations whose documentation informs this guide, and any linked sources belong to their respective owners.
All exam, test, and product names and trademarks are the property of their respective owners and are used here for identification and reference only. Keentune is independent study practice — not affiliated with, authorized, or endorsed by any of these organizations.