What is page jank? According to the Jank Free website:

Jank is any stuttering, juddering or just plain halting that users see when a site or app isn’t keeping up with the refresh rate.

So, essentially, if your users ever notice any awkward movements on your site, that’s page jank.

Identifying Page Jank

The Chrome DevTools can help you identify places where they think jank is occurring. If you run a Timeline recording with Paint selected, you can see little red squares on any frame they think is suffering from page jank.

page jank chrome devtools

You can also learn how to better identify jank with this fun game by Jake Archibald!

Jank Invaders

page jank invaders

 

What Causes Page Jank?

According to the Jank Free quote, page jank is caused when a site or app isn’t keeping up with the refresh rate – but what does that really mean?

To understand refresh rate, we need to learn a bit more about browsers and rendering performance. This summary by Google Developers is the best I’ve seen.

Most devices today refresh their screens 60 times a second. If there’s an animation or transition running, or the user is scrolling the pages, the browser needs to match the device’s refresh rate and put up 1 new picture, or frame, for each of those screen refreshes.

Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10ms. When you fail to meet this budget the frame rate drops, and the content judders on screen. This is often referred to as jank, and it negatively impacts the user’s experience.

The two most common causes of page jank, or not having your work done inside 10ms are animations and general layout thrashing. These both boil down to the same thing: Doing DOM reads and writes are expensive, and if we’re not smart about them we can ask the browser to do too much. Take a look at this example from Wilson Page’s post on Preventing Layout Thrashing.

In an ideal world, we’d do all of our reads and writes together to prevent unnecessary layout invalidation. Since that’s not really a possibility, there are great libraries out there like fastdom to help us do just that!

Fixing Page Jank

The basic idea with fastdom is by making use of Window.requestAnimationFrame. This method tells the browser you want to do an animation and asks the browser to call your function anytime before the next repaint. Fastdom uses this method to batch all of your reads and writes (referred to as measures and mutates) to ensure we don’t invalidate the layout more than we need to! Here’s an example of the fastdom code in action:

Resources: