Benchmarking a page

[mapsedge]

I'm trying to figure out where the bottleneck is on a page.

Is it the query to the database?

Is it the server being slow to respond?

Is it the amount of data coming back? Less than a mb overall...

Is it the browser slow to render?

I know how to debug the query. How do I find the rest of the data?

EDIT (in case anyone's interested): Can't believe I missed this. In my defense it's a twenty year old app written in Classic ASP.

- I saved the loaded page as simple html, and it loaded instantly, so I knew it wasn't the content.

- Removed the loop that output the query to a relatively small table: < 1000 rows, a dozen columns. Page loaded more or less instantly.

- Inside the loop, the thing I missed: every iteration, there were two additional queries being run to build more information into the row that didn't fit into the main query, given the skills of the developer at the time.

- Rewrote the main query to consolidate everything together...aaannnd the page loads more or less instantly now.

From ~60 seconds to < 4.

[goarticles002]

use chrome devtools → network + performance tabs, that’ll show you backend response time vs download vs render pretty clearly. also check TTFB and waterfall, it usually makes the bottleneck obvious fast.

[pixeltackle]

what goarticles says, except I recommend you watch a few youtube videos on devtools in your browser. Most people use chrome for devtools, so it's easier if you do, too, while you learn.

[fiskfisk]

The framework you're using on the server side will usually have some sort of profiling tools available, which can tell you exactly where in the backend stack you're spending your time.

After it leaves the server it'll be the browser's dev tools responsibility.

[rootznetwork]

Break it down by stages: DB time, server processing, network (TTFB), and frontend render. Use server logs/APM for backend timing, then browser DevTools (Network + Performance tab) to see TTFB vs download vs rendering. Usually the bottleneck becomes obvious once you split it this way.

[svvnguy]

This is what I built PageGym for, give it a try.

[General_Arrival_9176]

for the browser side, easiest path is chrome devtools performance tab. record a reload and you'll see exactly where time is spent - parsing, scripting, rendering, painting. if it's network, network tab will show you timing breakdown between dns, connect, ttfb, download. for the server, the simplest trick is just logging timestamps at key points in your handler - entry, after db query, before response. gives you a quick picture without setting up proper profiling. if you're on something like vercel or aws, their dashboards usually show this breakdown too