What does DOM loadtime in the page load timings represent?

Prashant Singh picture Prashant Singh · Jan 2, 2014 · Viewed 10.4k times · Source

This is how the typical loadtime of one of my page splits into :-

Domain Lookup     0            0 %
Connect           134          .3%
Request         19658          40%
Response          134          .3%
DOM             28808          58%
Interactive         1           -
Content Loaded   1427           -
Load Event        645           1%

These values are as per shown by chrome extension Page Rank Status. Now clearly the request and DOM part are the largest time consuming parts. Can anyone explain me what do Request, Response, DOM, Interactive, Load Event exactly corresponds to ? THis would help me in optimizing my website and reduce the overall page load time.

Thanks !

Answer

Andy Davies picture Andy Davies · Jan 2, 2014

You probably want to take a good read of the W3C Navigation Timing API, especially the PerformanceTiming interface -http://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface.

Request = elapsed time from the start of request being sent until the first byte of response is received - unless the network your on has high latency most of this will be server processing time.

Response = elapsed time from first byte of response to last byte of response - this will be function of network throughput and response size.

My guess is that DOM is the difference between the start of the page and DOMContentLoadedEnd event, so includes the 19s from Request.

If you want to get a better look at the performance of the page, I recommend running it through webpagetest.org