webdevreviews
← All field guides

Guide 04 / Performance

Measure the experience, not just the score.

Connect frontend measurements to real journeys and turn observations into focused improvements.

Choose a question before running a tool

A performance review is most useful when it starts with an experience that needs explaining. Does the main article appear late? Does the menu hesitate after a tap? Does a layout jump just as someone tries to follow a link? A single score compresses several behaviors and can hide the one that matters to your readers.

Pick a representative page and a specific journey. Record the device, connection conditions, browser, build, and cache state. These details turn a measurement into something another person can investigate. Without them, a fast result on a development laptop may say little about a visitor on a busy mobile device.

Separate laboratory tests from field evidence

Laboratory tools run controlled scenarios. They are useful for reproducing a problem, inspecting a trace, and comparing a change under similar conditions. They cannot represent every device, network, or interaction. Run several trials and inspect the spread rather than selecting the most flattering result.

Field data describes actual visits from a measured population. It can reveal experiences a laboratory setup misses, but it also needs interpretation: which pages, devices, regions, and dates are included? A small sample or a change in audience can alter the picture. Collecting real-user measurements also creates privacy responsibilities; do not add analytics casually just to fill a dashboard.

Core Web Vitals describe important aspects of loading, responsiveness, and visual stability. Largest Contentful Paint concerns the main visible content, Interaction to Next Paint concerns interaction responsiveness, and Cumulative Layout Shift concerns unexpected movement. Consult the current definitions and guidance rather than assuming a cached checklist captures every measurement detail.

Trace the work behind the symptom

For slow content appearance, inspect the request waterfall. Look for delayed HTML, render-blocking resources, oversized images, and a critical asset discovered too late. An image should have useful dimensions and an appropriate delivery size. Lazy loading is useful for some offscreen images, but delaying the main visible image can work against the goal.

For sluggish interaction, examine main-thread work around the action. Large script evaluation, expensive event handlers, and repeated layout work can all contribute. Reduce unnecessary work before reaching for a complicated scheduling strategy. Splitting a bundle helps only if it changes what the browser must download or execute at the relevant moment.

For shifting content, reserve space for media and embeds, and inspect content inserted above what someone is reading. Font changes can also affect layout. A trace and a recording often explain more than a summary metric alone.

Make one change and protect the result

Choose a focused improvement tied to the observed bottleneck. Repeat the same test conditions, compare multiple runs, and check that accessibility and functionality still work. Faster is not better if a control stops responding or meaningful content disappears. Keep an honest record when a change produces no clear improvement.

Set budgets that match your project’s constraints: perhaps the amount of JavaScript on an article page or the size of its leading image. Budgets are guardrails, not promises about every visitor’s timing. Test them in the release workflow and revisit them when requirements change.

Finish with a short report: the symptom, the evidence, the intervention, and the remaining uncertainty. Performance work becomes more reliable when each decision is traceable, instead of turning into an endless contest for a perfect tool score.

Go to the source
web.dev: Web Vitals
Use the authoritative documentation for implementation details and evolving guidance.