CODEWITHSUNDEEP
htmlgoogle-chrometimegoogle-chrome-devtoolsresponse
Novice_Developer
Novice_Developer

Reputation: 1492

Website response time: Difference between `Load` and `Finish`

I needed to check a webpage's response time, so I visited the site on Chrome, opened Devtools and switched to the Network tab to check the response time:

enter image description here

As you can see, there are two times: The first one is Finish and the second one is Load.

I think Finish is the time taken to load the whole page with all the resources including delays, but what is Load? I thought if I add all these times together I would get the time for Load but this isn't the case.

What would be considered the response time of this website, Load or Finish?

Upvotes: 39

Views: 34118

Answers (3)

Vinod Ratnakar
Vinod Ratnakar

Reputation: 29

Technically speaking, the difference between the load time and the finish time is that load time loads the elements whatever needed to load the web content on the page, but the finish time is that it will try to access all the ajax calls needed(Dynamic content loading while being on the same page). Considering the finish time as response time is not good. To calculate the response time we need to consider the load time, Because i am currently working on the page loading issue itself.

Upvotes: 0

madballoonist
madballoonist

Reputation: 636

The Finish time in Chrome Devtools includes the asynchronously loading (non blocking) objects/elements on the page which may continue downloading way after the onLoad event for the page has fired.

The response time for a website generally means the Load time, because that is user perceivable, and at this point user can see that the browser has finished loading and page is ready on their screen.

The Finish time, although technically also a response time, doesn't have as much end-user implication.

In some cases, it seems that the Finish timer never stops but continues increasing, so it may not be the best assessment of web page response time.

Upvotes: 47

Praveen Kumar
Praveen Kumar

Reputation: 1

DevTools displays the timing of the DOMContentLoaded and load events in multiple places on the Network panel. The DOMContentLoaded event is colored blue, and the load event is red.

https://i.sstatic.net/unni3.png

Upvotes: -4

Related Questions