Menu
It will open up the console tab in DevTools by default. Clicking "cmd + opt + j" opens up console panel in DevTools. Once the console tab is open, simply click on the network tab to make it visible. Clicking on the "network" tab will show you all network requests being made for a certain page.
Resource loading typically involves processing the received data. you could find what the app actually does for 'resource loading' phase by opening the 'Main' section (Frames, Interactions, Main -..), it would list function calls and the total time / self-time details.
The size of the resources (images, JavaScript files, CSS files, etc.) web applications deliver to end-users directly impacts performance. It's important to be clear on two key ways to measure size: Transfer Size and Resource Size.
Transferred is the compressed size of all resources. You can think of it as the amount of upload and download data that a mobile user will use in order to load this page. Resources is the uncompressed size of all resources.
Question: Can you all think of better words to describe these two values? We get this question somewhat often.
In addition to the other answers, if you have filtered the results you will see two numbers in one column, first one indicating the size for the filtered requests and the latter for the total size of requests.
For example if you have filtered the results to only display XHR requests and you see 1 MB / 2 MB transferred at the bottom, that indicates 2 MB has been transferred in total, of which 1 MB are XHR requests.
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