Tool to check resource load order

Question

Is there a tool I can show clients that will take a page's HTML and show:
a) the order in which external resources will load,
b) which resources are blocked on other resources being downloaded?

For example: JavaScript in the head blocks any images from loading further down the page and browsers can only load 6 resources at a time from a given domain/subdomain.

Answer 1

There's a bunch of tools that illustrate the waterfall (the cascading chain of HTTP requests from the browser to the server):

• gtMetrix (combines ySlow and PageSpeed)
• pingdom tools
• http://loadimpact.com/page-analyzer
• webpagetest (best in my opinion)

Also, note that your point:

...browsers can only load 6 resources at a time...

is not quite correct, while 6 is the average number of concurrent connections to a single server as at mid 2011 (see here), this number has increased since and doesn't account for domain sharding which can increase the total number of connections by around 10x.

Answer 2

The Network and Timeline tabs of Chrome's developer tools show when and how long it takes to load individual page components.

Answer 3

try yslow extention it might be useful

Answer 4

Try http://pingdom.com and http://gtmetrix.com/ are best according to me