Jank Busting With Daft Punk

Yesterday, I looked at the new Daft Punk web experience on Pitchfork. It was visually stunning, featuring rich-animations throughout. I noticed however that scrolling on the page felt quite janky in Chrome. It was sluggish and stuttered regularly. You could reproduce this by scrolling up and down through the page, something that I struggled with.

Paint profiling it with the DevTools, I noticed lots of issues with layout (peaking ~ 514ms), heavy paint (peak ~178ms) and images they could be pre-scaling by as much as 50-80% more (based on PageSpeed recommendations). One example is this image of the band which ships to users at 1150 x 1500 despite not needing to be larger than 650 x 841 to target the resolution of the average monitor.

Now these figures for time taken (e.g 514ms) are 10-50 times what they should be. Ideally they should be taking <= 10ms. Jank manifests itself when you blow your frame budget - the 16.7ms budget (really, 8-10ms factoring in mobile, browser processes) you have for JavaScript, layout, image decoding, painting and everything else Chrome needs to do to display your page on screen.

If you aren't able to complete within this time you'll miss the frame and your animations will appear janky, similar to how they do in Pitchfork's case. Often this comes down to matching the refresh rate of your device (e.g 60fps: 60hz, or at least a constant 30fps). 

Remember, if you're aiming for smooth animations and silky scrolling you don't want to see this kind of visual jank in your pages. In the screenshots above (and the animation below) you can see several instances where we're breaking frame budget. If you find yourself suffering from slow scrolling, it's a good idea to measure if you have a paint problem.

Now these issues (heavy paint, layout, not prescaling) are becoming something of a trend in parallax sites and pages trying to animate heavily as the user scrolls through (in this case there are plenty of slide in animations as you scroll). A good practice when it comes to animations is to rely on rAF (requestAnimationFrame) which guarantees Chrome calls your animation loop in sync with the display refresh of your device.

If you want to create animation-rich experiences like the Daft Punk (which are jank-free), it's important to measure your performance, perhaps using tools like Timeline and about:tracing. It can sometimes be tempting to just guess what the problems with your page's paint and layout issues might be, but as Paul Lewis says, "Don't guess it, test it".

For more on jank and how to measure whether paint is a bottleneck for you, check out some of the resources on http://jankfree.org. You might also be interested in the Google I/O "Jank Free: Chrome Rendering Performance" talk with Nat Duca and Tom Wiltzius.