Quality of Life Dashboard v3 Performance

This is the 3rd time I’ve refactored of the Quality of Life Dashboard. I find web stuff is good for about 18-24 months, after which a peculiar and unpleasant odor emerges. It smells like Do you really want me to tell people you made me?, and the answer is always no.

The first refactor of the dashboard occurred after I decided performance is a thing even government stooges should care about, and the result was staggering.

Dashboard v1

  • 1,300kb page load size
  • 3,000ms page finish time

Dashboard v2

  • 328kb page load size
  • 1200ms page finish time

Note those tests were taken with older browsers and older equipment, and probably a slower connection (even Time Warner gets faster given enough time), and I’ve made improvements to v2 along the way. We’ve also added data, so more is coming down the pipe. I’m having each site load the same metric for page weight/processing time fairness.

Dashboard v2

  • 306kb page load size
  • 1,380ms page finish time

Dashboard v3

  • 726kb page load size
  • 1,290ms page finish time

This is in line with what I expected. v3 is heavier. I swapped Leaflet for Mapbox GL JS (heavier), topojson for geojson (heavier), spaghetti for Vue.js (heavier), and D3 for Chartist (lost some weight there). The weight difference isn’t as bad as it appears - v2 doesn’t load any base map tiles by default, and loading base map tiles pushes it to 584kb. 726kb is still not bad considering the average web page weight in 2016 passed 2.3mb, which is bigger than Doom, and the capabilities of the things I added are worth the weight.

Also note the weight of v3 goes down significantly when you start screwing with the map due to vector tiles goodness. Zooming to a location/scale in v2 with Leaflet and raster tiles and our page weight goes up to 3.7mb vs 1.3mb in v3. So the initial weight is bigger, but the weight during site usage is smaller.

I’m also not surprised the page finish time is a little quicker in v3 even though it’s heavier. v2 came before I got into things like React and Vue.js with their virtual diffing and high performance rendering. v2 wasn’t just thrashing the DOM, it was committing DOM war crimes. So our weight is bigger, but the page finishes faster.

That’s the v3 performance picture. Tiny bit bigger on load, a lot smaller during usage, and bit faster to render. I’m calling it a win. You can see v3 here, or here later this month when it officially replaces v2. The code is on github.

On a side note, Vue.js saw it’s 2.0 release a few days ago, and the new Dashboard has been updated to use it. I like React, but Vue.js has won the tiny portion of my heart reserved for reactive Javascript component frameworks.