Flame Charting Our Way Out of Jank
Earlier last year we redesigned and rebuilt upperquad.com. While we were happy with the visual results, we knew some progress could be made on the performance front. In the initial build we prioritized the visual experience, implementing the ideal solution for what the team had envisioned. After bringing those concepts to the browser, we realized the need to make some compromises for the sake of performance.
We revisited each piece of functionality, hitting the main bottlenecks for performance. We tweaked some animations and rewrote some JS. Eventually we got to a place we were happy with and shipped it.
Roughly six months later, recently improved tools for testing and newly implemented browser APIs made for the perfect opportunity to revisit performance.
The primary tool of the performance trade is the timeline in Chrome’s DevTools. Its flame chart gives a visual representation of the JS running on a page. In short, it helps determine bottlenecks in the code. And bottlenecks distract the browser from rendering the page at a speed pleasing to the human eye, thus we get “jank” or stuttering, non-smooth movement.