Performance / 1 min read
Measure frontend performance before you optimize
Build a repeatable measurement workflow for real pages and representative devices.
Choose a page and a task
Start with a route that matters to visitors. Record device, network profile, cache state, and the steps you perform. A landing page and a checkout flow can have different bottlenecks, so compare each against its own baseline.
Find the expensive step
Inspect the request waterfall and the main-thread trace. For a slow hero, check when the image is discovered and whether its bytes suit the viewport. For sluggish interactions, look for long tasks around the interaction and identify the script responsible.
Repeat the test and monitor the result
Change one thing at a time. Run the same scenario several times and compare representative results. After release, use field data where available to check whether visitors experienced the improvement.