D3 Treemap From Resource Timing Performance Entries

Published on by Morgan Ney

The various resources embedded in an HTML document can be grouped into a hierarchy of media types, and their corresponding load times can provide interesting data values for a D3 Treemap. Fortunately, a few browsers have already implemented the W3C Resource Timing API which exposes useful networking milestones, one of which is the total duration or load time for a resource. I'll use this data to create a hierarchy for a D3 treemap representing the relative load times of each performance entry resource embedded in this very page.

First I'll include some extra images for demo purposes, keeping the file sizes of each in mind. This is to make sure the treemap has a few more nodes since I bundle my CSS and JS for production environments. You can click here to enjoy some pictures of my newborn daughter and our dogs.

Hannah Lynn NeyMole chihuahuaPocket chihuahuaAbby italian greyhound

Second I need to create a JSON hierarchy out of the performance entries for each resource embedded in the page. Here is an example of what a performance entry looks like. This particular example is for a CSS resource, and can be determined by examining both the initiatorType and name properties:

Basically creating the hierarchy requires grouping the performance entries by media type in a nested JSON object. You could create a function along these lines:

Now I can run the return value from getJSONResourceHierarchy() through a D3 treemap layout. Doing so results in an array of nodes, one for each resource in the hierarchy, modified with additional properties suitable for drawing the treemap with HTML and CSS. These actions are encasuplated by the following function:

Finally, here's an example of a D3 treemap for performance entry resources embedded in this page, grouped and color-coded by media type and positioned with a relative size correspoding to its total load time in milliseconds (the "Duration" value from the table). Each page load should result in a slightly different treemap depending on network conditions at request time. Clicking on a cell populates the table with statistics for the resource.

Name
App Cache
DNS
TCP
Request
Response
Duration
TTFB

Your browser doesn't support the Resource Timing API.
Try using the latest version of Google Chrome or Internet Explorer.

As you can see, at a glance, the treemap provides insights into how resources might be better managed at the application (bundling, compression, etc.) or networking (latency, caching) layer to improve page performance.

Relevant to  Resource Timing API, D3 Treemap, JavaScript
Get in Touch

BizzyBtyes is owned by Morgan Ney, a father, husband, and web developer originally from the San Francisco Bay Area and now living in Coarsegold, Ca. just south of Yosemite.