More Optimization of a D3 Viz: Fitting Initial Display Content in the "Initial Congestion Window"

I have been continuing to work on improving the performance of a D3 visualization. The things I have been doing lately are independent of the fact that it is D3, and apply to web sites in general.

On Google's PageSpeed Insights page, they refer to something called the "initial congestion window":

If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.

With this in mind, I spent some time trying to get the minified and combined html/css files used to show the initial content to have a gzipped length of less than 14.6kb. There are several large files that still need to be downloaded and processed after that, but my goal is to communicate to the user as quickly as possible that something is happening, show the basic page, and not leave them staring at a blank screen.

I believe I have done got things down below the 14.6kb threshold: the initial html/css is downloaded in a single file that is 12.3kb compressed. Theoretically, this should mean that (usually) all of the materials needed for initial display can be obtained with the first trip to the server after SSL negotiation. I haven't checked the raw packets yet to see if this is actually the case.

Here are the (simple) steps, on top of the optimizations that had been done previously:

• Put the contents of the main css file directly into the main document (done via the grunt task grunt-inline).
• For html that appears in an "About" popup (if a user clicks on a link on the page), move the text out of the main html document and insert it into the DOM after the page loads.
• Use a smaller inline image animated gif progress spinner - the one I'm using now is about 3kb, compared to about 18kb that had been being used previously.

Here is a comparison between the latest version of the visualization and https://www.google.com. This comparison video was built easily via the very awesome(!) http://www.webpagetest.org.

Comparison of Page Load Between Latest Optimization of Site and google.com
You can also view this directly on webpagetest.org
(both tests done from Miami-FL with Chrome using http://www.webpagetest.org)

And here is a comparison of the pre-optimized site against this latest optimized version:

Comparison of Page Load Between Pre-Optimized and Latest Optimization of Site
You can also view this directly on webpagetest.org
(both tests done from Miami-FL with Chrome using http://www.webpagetest.org)