Web Page Performance - Profiling paint times

I recently attended the Facebook Mobile Developers Conference in London. Throughout the day, there were a load of great talks, but the one that really stuck out for me was a performance talk entitled "Making m.facebook.com fast". It was all about how Facebook constantly strive to improve the performance of their web pages and the lessons that they've learnt along the way.

The Facebook development team use Chrome Canary to profile the CSS of their web pages. Google Chrome Canary has the latest Chrome features and allows you to try out some of the newest features of Chrome before it becomes available in the normal version. Think of Chrome Canary as the "pre-release" version. It's really designed for developers and early adopters, and it can sometimes be a bit buggy due to overnight changes by the Chrome developer team. However, it has some great developer tools that will help you profile the performance of your web pages.

Chrome Canary

In this article, I am going to show you how to use the Chrome Canary developer tools to identify areas in your CSS that could be causing your page to scroll slowly and might be affecting your page paint times. When a web browser is loading and rendering a web page, it needs to traverse all the visual elements in order to "paint" and display content on the screen. Depending on the layout and complexity of your CSS, you might find that your paint times are quite high. This can make your web page seem jerky and slow to respond. This slow scrolling is also referred to as jank. This is especially obvious on mobile devices as they might struggle to paint complex CSS as you scroll through a web page.

Even if your page load times are quite good, it can still be a worthwhile exercise to explore your web pages' paint times. Different devices respond differently to CSS properties, and anything you can do to improve performance is always a good thing! In order to get started, head over to the Google Chrome website and download Chrome Canary. Once installed, open it up and navigate to a webpage that you wish to profile. The HTML5 Rocks website which has a great demo website we are going to use to demonstrate how expensive CSS operations can increase the paint time of a web page.

HTML5 Rocks

Once you have navigated to the webpage, hit F12 and it will open up the Chrome developer tools. We need to enable a setting that will allow you to profile the rendering of the page. Click the settings icon in the bottom right hand of the developer tools.

Chrome developer tools

This will bring up a panel that allows you to change the settings.

Chrome developer tools - continuous paint

We are going to profile the rendering of the page, so check "Enable continuous page repainting" and "Show FPS meter". If you close the settings panel and view your web page, you should see something to the following graph in the top right hand corner.

Chrome developer tools - FPS meter

This meter shows the paint times in milliseconds for the current page. On the right hand side of the graph it shows the minimum and maximum of the current graph. It also shows a bar chart with the history of the last 80 frames. The great thing about this graph is that it constantly tries to repaint the page as if it were loading for the first time. This allows you to pinpoint areas in your CSS that might be affecting paint times without having to reload your browser every time. The bar chart will instantly reveal whether or not your change has had any impact.

If we take a closer look at the HTML and CSS of this page, you can see that one of the divs has a few CSS effects added to it.

Remove CSS border drop shadow

The div has a border radius and a drop shadow added to it. Let's remove the box shadow and observe the FPS meter for any changes in the paint time.

FPS remove drop shadow

Woah! As you can see from the graph, there is a noticeable difference in the page paint time. By simply removing the border-radius property, you have demonstrated how this change can reduce the paint time on your pages significantly. The graph drops off instantly as you update and change the CSS properties of the page. Using both box-shadow and border-radius on an element leads to very expensive painting operations because browsers can't optimize for this. If you have an element that will get repainted frequently, you should keep this in mind when building your web pages.

There is a great video on the Google IO website that dives a little deeper into paint times and shows you a few tips to reduce the "jank" from your web pages.

For some further reading on paint time optimization, check out these links.

Happy profiling!