title: Display file size of externally loaded resources for an HTML page
body: <p>In the article <a href="https://github.com/blog/1252-how-we-keep-github-fast" rel="nofollow">"How we keep GitHub fast"</a>, they describe a toolbar that GitHub staff members can use to see various performance metrics of each page load. Two of the items displayed are the KB of JavaScript and CSS loaded.</p>
  
  <p><strong>How are they able to determine the KB of JavaScript and CSS loaded? Does JavaScript provide a way to access externally loaded resources?</strong></p>
  
  <p>My goal is to create a similar toolbar and display the size of all externally loaded resources.</p>
  
  <p>I suppose you could search for <code>&lt;script&gt;</code>, <code>&lt;link&gt;</code>, <code>&lt;img&gt;</code>, etc. tags and access their relevant <code>src</code>, <code>href</code>, etc. attribute, issue an XmlHttpRequest using the HEAD method, then use the Content-Length header from the response.</p>
  
  <p>Another approach would be to parse the generated HTML before returning a response, determine the externally loaded resources, get their sizes directly, then append the toolbar code to the response pre-populated w/ external resource sizes.</p>
  
  <p>But I'm wondering if a more efficient or simpler method is available.</p>