Here's the bookmarklet: Jank Meter Drag it to your bookmarks bar or just add as a bookmark.
What is jank?
Our eyes can't perceive visual changes at around 60 frames per second (FPS). As such, for smooth visual experiences most modern screens have a refresh rate of 60FPS. In order for our webpages to appear smooth to a user while interacting, all frames must render within 16ms (1000ms / 60 FPS).
What causes jank?
Here's an example of the jank meter on a web design agency's homepage. They use a jQuery plugin to create a parallax effect on large (but barely visible) background images.
Conversely, here's jankfree.org with a near-perfect scrolling experience:
How do you detect jank?
You can detect jank using the Timeline tab in Chrome Developer Tools. Simply hit the record button and scroll, then stop the recording and look for slow frames:
You can also enable the framerate overlay in Chrome to show the live render performance:
This can all be a bit time consuming though, recently I've found myself spending a lot of time in the timeline view just to detect jank. The framerate meter also makes it difficult to identify exactly where in the page the jank is coming from.
The bookmarklet produces a small overlay on the top-right of the screen showing the framerates achieved while scrolling the page. It also adds a bar to the left of the page showing what framerate was achieved for that scroll movement.
Jank meter limitations
- Style is inherited, so it may look funny
- It depends on being able to scroll, so the page has to be longer than 2 x viewport height
- It relies on performance.now() and requestAnimationFrame() so it won't work in all browsers (latest Firefox and Chrome are fine)
- The chart image may not load on secure sites
There are probably a few more limitations, give it a go and let me know if you have any issues. The code is in a gist so feel free to fork.
How to fix jank?
Paul Lewis has a great live demo on youtube of debugging and fixing jank in realtime.
There are a number of resources available, jankfree.org is a great place to start.