CODEWITHSUNDEEP
google-chromewebgoogle-chrome-devtoolsperformance-testing
Oskar Szura
Oskar Szura

Reputation: 2569

Measure full page size in Chrome DevTools

I've been googling for some time but haven't found any clear solution for this.

I want to measure full webpage weight / size (all document + scripts + fonts + styles etc.). I know the network tab in the devtools has size/content - but I want to have it summed (and not sum it every time).

I've been looking for chrome.devtools.* API but haven't found anything straight-forward.

Do you have some ideas how to achieve that?

Upvotes: 42

Views: 25800

Answers (1)

Gideon Pyzer
Gideon Pyzer

Reputation: 24068

In the Network tab, make sure 'Disable cache' is checked and then when you load a page, look at the bottom panel for the total transfer size. See screenshot below:

Network Transfer

The individual sizes are rounded, but the total at the bottom uses the byte size, which you can see in the HAR. The total then is rounded for display. If you find a slight mismatch between summing the individuals and the total shown by DevTools, that is the reason.

Upvotes: 71

Related Questions