Popular:
 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  on  

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

  • By
    MooTools Equal Heights Plugin: Equalizer

    Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS -- you need a little help from your JavaScript friends. Well...now you're...

  • By
    Create a Sexy Persistent Header with Opacity Using MooTools or jQuery

    I've been working with the Magento eCommerce solution a lot lately and I've taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the...

Discussion

  1. Joe Zim

    It doesn’t look like the videos are working (in Rockmelt or Firefox)

  2. x

    Can’t see anything on Opera.

  3. 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?

  4. iwin

    Can’t see anything on Firefox, view repaints in Firefox and Aurora browsers

  5. dumex

    Can’t see anything Chrome.you need to enable an about

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!