CODEWITHSUNDEEP
performancegoogle-chrome-devtoolsperformance-testing
master_dodo
master_dodo

Reputation: 1339

Chrome dev tools confusion in network and performance tab

I am evaluating my boilerplate: However, there is some confusion related to time shown in Network tab and Performance tab.

Network tab:

enter image description here

It tells that blog(.html) was downloaded in 22ms after the request was resolved by the server, thus taking of total ~51ms

Performance tab:

enter image description here

It tells that blog(.html) blue color started downloading after ~132ms and finished at ~199ms and browser started parsing it afterwards.

Why is there 2 different things for the same page refresh(hard refresh infact, though it doesn't matter)?

Upvotes: 1

Views: 1177

Answers (1)

Garbee
Garbee

Reputation: 10981

The Network panel begins a whole new recording when refreshing unless "Preserve Log" is checked. You'll notice the Performance panel is analyzing from the time you hit record. Therefore, it is accounting for the existing analysis on the current page plus the new page request.

This is fine and normal behavior. You typically don't need to correlate network panel data with the performance data to that degree. The network request information is provided in Performance primarily as an easy aid to getting the correlation you need between network resources doing their job and the engine carrying forward with tasks because of that.

Upvotes: 1

Related Questions