Menu
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?
498
Open Developer tools ( Ctrl + Shift + I or Settings Icon at the top-right of your browser window => Tools => Developer tools ) on the needed page, switch to the Network tab and reload page. In the Size column you'll see the size of everything loaded (Documents, Stylesheets, Images, Scripts, ...).
There are online tools to check a web page's size. For example, you can do it using https://tools.pingdom.com. Type or paste in the URL of the page you want to check and there you go. You will get a lot of data, among which the size of the page.
Using the Chrome browser, right click / control click anywhere inside your content area and select Inspect Element. In Chrome, right-click (or control + click) in the content area and choose "Inspect Element" to open the element inspector.
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:
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.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
