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
- Page Speed - Open source Firefox/Firebug Add-on that evaluates the performance of web pages and can capture paint snapshots.
- Web Performance Best Practices: Put CSS in the document head - Google's web performance best practices discusses the importance of putting CSS in the document head.
- Response Times: The Three Important Limits - Jakob Nielsen identifies some rules of thumb for response times, and emphasizes the importance of giving the user continuous feedback during the page load process.
- How Design Affects Performance: Progressive Rendering - Has a nice side-by-side visual comparison that shows the benefits of progressive rendering. Discusses the impact of HTML tables on progressive rendering.
- High Performance Web Sites: Put Stylesheets at the Top - Steve Souders' first book on web performance explains how loading stylesheets late can inhibit progressive rendering.
- Charles Web Debugging Proxy - Charles allows web developers to throttle their Internet connections, to see what the page load experience is like for users on slow connections.
