Make the Web Faster

Capturing and analyzing browser paint events using Page Speed Activity

Author: Bryan McQuade, Software Engineer

Recommended experience: Some experience creating web pages. Basic understanding of HTML and CSS.

Setup

This article explains how to capture and analyze browser paint events using the Page Speed Activity Panel's paint snapshot feature. Page Speed is a Firebug/Firefox add-on; to use it, you will need to install Firefox, Firebug, and Page Speed. Links to install all three tools are available on the Page Speed download page.

Background: progressive rendering

Fast web pages render progressively. That is, they display their content incrementally, as it is loaded by the browser. A web page that renders progressively gives the user visual feedback that the page is loading, and gives the user the information they requested as soon as it is available. Google and Yahoo both suggest best practices to make web pages render progressively, such as putting stylesheets in the document head.

There are several additional best practices that you can apply to optimize progressive rendering for most pages. First, a fast page should render the content that is visible to the user first, and render the off-screen content (that is, the content outside of the current scroll region) later. Second, a fast page might also load and render the lightweight resources such as text before loading and rendering heavyweight resources like images and video.

On the other hand, some techniques are known to inhibit progressive rendering. The use of large tables, even for layout, disables progressive rendering in some browsers. Applying stylesheets late in the document, even if those stylesheets aren't needed for the initial page load, can also prevent progressive rendering.

Using Page Speed Activity to capture browser paint events

It can be difficult to determine whether a page is optimized for progressive rendering. Most pages render too quickly for the human eye to notice the individual paint events (especially when the page is loaded on a fast network connection), and it is not possible to see whether a page is rendering content in the off-screen regions.

Fortunately, as of version 3.5, Firefox supports capturing browser paint events within the browser. The Page Speed Activity Panel uses this feature to produce a "film strip" of page rendering activity. Each cell in the strip shows which regions of the screen were repainted (in yellow), as well as which regions were off screen (in gray) and thus not visible to the user.

Because capturing paint snapshots adds some overhead and can slow down the browser, Page Speed Activity screen snapshots are disabled by default. To enable paint snapshots, make sure Paint Snapshots (slow) is checked in the Activity Panel's drop-down options menu.

Use the Page Speed Activity Panel options menu to enable paint snapshots.

Once paint snapshots are enabled, and you begin recording events in the Activity Panel, the film strip of paint snapshots appears on the right side of the Activity Panel. Paint snapshots are drawn in the order they were captured, with the earliest snapshot at the top. You can use the scrollbar on the right of the paint pane to view all of the snapshots.

The Activity Panel, with the paint pane enabled.

Example snapshot playback

In this example, we look at the progressive rendering of a Google search results page, by playing back the paint snapshots in slow motion. These snapshots were captured using a modem connection.

To play back the example paint snapshots captured using Page Speed Activity, click the Play Paint Events button.

In the snapshots, we see the portion of the page visible to the user in white, and the portion of the page that is not visible to the user (outside of the current browser scroll region) shaded in gray. Each snapshot shows the region of the screen that was repainted, shaded in yellow.

Notice that the visible portion of the text content of the page renders first, followed by the off-screen portion of the text content. By rendering the visible portion of the screen first, the user is provided with as much useful information as possible, as soon as possible.

After the text content on the page has finished rendering, the image content renders next. Deferring rendering of the image content until after the text content has loaded and rendered allows the browser display the text content as quickly as possible, which again gives the user as much of the useful information as possible, as quickly as possible.

Because width and height attributes are specified for all of the images on the page in the document markup, the browser does not have to reflow the page as the images are loaded. Though not strictly related to progressive rendering, specifying a width and height for images leads to a better user experience since the content of the page doesn't shift around as the page is loading.

Finally, notice that each image itself renders progressively, so that the the user begins to see the image content before the entire image has finished loading. Modern browsers render images in HTML <img> tags progressively. By contrast, many browsers do not render images specified using CSS background-image attributes progressively. To enable progressive rendering of images, use an HTML <img> tag instead of a CSS background-image attribute.


Summary

Using Page Speed Activity Panel's paint snapshot capability, we can clearly observe the progressive rendering behavior of web pages. This allows web page developers to make sure that their pages are optimized for progressive rendering, an important characteristic of fast web pages.

Additional resources

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.