Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

View Browser Repaints in Google Chrome and Mozilla Firefox

By David Walsh on March 28, 2012

One goal of super-optimized websites is to prevent browser repaints due to changes in a block's style or content. There are numerous ways we intentionally (or unintentionally) trigger block repaints, but the browser does it so quickly we have trouble seeing when and where it happens. Recognizing the importance of allowing developers to micro-optimize their pages, the Chrome and Firefox teams have added features to their browsers to allow us to see those repaints. Here's how to do it!

Google Chrome & Canary

The repaint feature needs to be enabled at startup for Chrome and Canary with the --show-paint-rects config:

open ./Google\ Chrome\ Canary.app --args --show-paint-rects

Be sure to include --args in your command or you'll run into problems opening the browser. Repaints will display on each site you visit.

Mozilla Firefox, Aurora, Nightly

To view repaints in Firefox and Aurora browsers, you need to enable an about:config option. The option name is nglayout.debug.paint_flashing. Turn this option to true and you'll quickly see repaints as the happen!

At the time of publish, only nightly exposed this config feature.

I recommend you take a few moments to scope out the repaint frequency on your websites and see what you can do to improve performance!

Recent Features

By David WalshJuly 15, 2013
9 Mind-Blowing WebGL Demos
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
By David WalshNovember 2, 2015
JavaScript Promise API
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...

Incredible Demos

By David WalshJune 18, 2015
Add Styles to Console Statements
I was recently checking out Google Plus because they implement some awesome effects. I opened the console and same the following message: WARNING! Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS. Do not enter or paste code that you...
By David WalshJuly 15, 2013
9 Mind-Blowing WebGL Demos
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...

Discussion

Joe Zim
It doesn’t look like the videos are working (in Rockmelt or Firefox)
x
Can’t see anything on Opera.
Clentdc
so what am i supposed to do with this ?
“open ./Google\ Chrome\ Canary.app –args –show-paint-rects”

paste it in the command line or what? im in chrome://flags, in Canary and now what?
iwin
Can’t see anything on Firefox, view repaints in Firefox and Aurora browsers
dumex
Can’t see anything Chrome.you need to enable an about