Using Chrome DevTools to debug slow framerates

Published 01/02/2014

The Timeline tab in Chrome DevTools offers a peak into the stages of displaying a web page, offering insight into what is happening under the hood. If you are not sure what Paint, Recalculate Style and Composite Layers means, head on to this excellent talk by Paul Lewis.

I've stumbled recently upon Unify - a webpage dedicated to tracking browser support for unicode characters. It's great, but if you go into a view with a lot characters, the framerate plummets. So let's have a look under the hood if we can find out what's happening.

Let's enable two options first. The framerate count and Paint rectangles. The latter shows us sections which are rerendered by the browser. Open the DevTools and click the widget in the bottom-right corner.

Now start scrolling. The framerate drops radically and the whole screen will go red indicating that the whole document is being re-rendered. Framerate depends on your machine, but on my Macbook Air it drops to ~5fps.

Let's open the Timeline tab and have a closer look. Hit record and start scrolling for a few seconds. Long green bars representing paint times stand out - and they take way longer then anything else.

If you have a closer look, there seems to be nothing changes when we scroll. Disable javascript (same options screen we used a moment ago) and you'll see the problem stays. Now, one of the recommended ways to debug these kind of problems is to hide DOM nodes and see if performance improves. We can do this by going to the Elements tab, highlighting a node and pressing h. This will set display: none on it.

Unfortunately, our page is very simple and duh, if we hide the table it gets fast - this does not help us at all then.

You might notice something about the background though. It's a subtle pattern, so it might not be immediately that clear but it's fixed. So when we scroll our massive table, the simple, repeating background and table need to be redrawn. If you look at the body tag in the Elements tab it has a style of background-attachment: fixed;. When removed, voila our framerate stays within 30-60fps (unless you are on IE8).

Investigating rendering issues is not always easy, but with better tooling and insight into what is happening in the browser, it's at least very much possible.