0

In the article "How we keep GitHub fast", 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.

How are they able to determine the KB of JavaScript and CSS loaded? Does JavaScript provide a way to access externally loaded resources?

My goal is to create a similar toolbar and display the size of all externally loaded resources.

I suppose you could search for <script>, <link>, <img>, etc. tags and access their relevant src, href, etc. attribute, issue an XmlHttpRequest using the HEAD method, then use the Content-Length header from the response.

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.

But I'm wondering if a more efficient or simpler method is available.

Geoff Catlin
  • 33
  • 1
  • 5

1 Answers1

0

I guess they've used a browser extension like speedtracer, which has access to the same metrics the network panel of your debugger shows you.

JavaScript has usually no access to external ressources, however it might be possible to load them via XHR to inspect them. Also, you might be able to get some of those information via the Navigation-Timing API (see html5rocks article).

And of course, they have a connection open to their servers to get those internal server metrics. It might as well be possible they get the information about served resources via that channel, and not from a javascript api.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375