Using Page Speed

1. Running Page Speed
2. Understanding Page Speed performance scores
3. Recording activity
4. Using advanced options
5. Uninstalling Page Speed

Running Page Speed

Page Speed generates its results based on the state of the page at the time you run the tool. To ensure the most accurate results, you should wait until the page finishes loading before running Page Speed. Otherwise, Page Speed may not be able to fully analyze resources that haven't finished downloading.

Alternatively, enable the Automatically run at onload option to have Page Speed automatically start the analysis after any page is properly loaded. See Advanced options below for details.

To profile a page with Page Speed:

1. Start Firefox.
2. Select Tools > Firebug > Open Firebug.
3. In the Firebug window, select the Page Speed tab.
4. Navigate to the web page you want to analyze. Wait until the Done message appears on the browser status bar and the progress bar disappears. For pages with streaming video, which don't show the Done message, wait until the video begins to play.
   

   

5. Click Analyze Performance. When the page is analyzed, Page Speed displays the list of web performance best practices and the page's score on each one, sorted by importance/priority for this page.
   

   
   

6. Optionally, do any of the following:
• Expand any of the rules to see specific suggestions for improvement.
• Click any of the rule names to see documentation about each rule.
• Click Resources to show a detailed list of resources referenced from this page.
• Select Export > Write JSON File to export the results in JSON format.
• Select Export > Send Scores to www.showslow.com to send results to Show Slow, an open source web-based tool for collecting performance metrics from Page Speed over time. For information on the data that is sent to Show Slow, see the beacon documentation on the Page Speed open source project page for the "minimal beacon".

Understanding Page Speed performance scores

For each rule, Page Speed gives specific suggestions for improvement, and gives the page a "score" according to a heuristic that weighs a number of factors. It also gives the page a total performance score. 

Understanding per-rule scores

For each rule, there are two kinds of scores: a numeric score, which is a "grade" out of 100; and a color-coded score (green, yellow, or red). The numeric score is a "raw" score that indicates how the page performed on that rule, using some quantitative measure, such as, for example, the total number of DOM elements, or the number of downloaded files. The color-code score factors in the numeric score and the rule's weight, which is a composite of the potential impact of the rule (based on our experience), and its difficulty of implementation.

This means that there is not a one-to-one mapping between a numeric score and a color code. For example, a score of 0/100 could be translated into a yellow color code if the weight of the rule is not very high. Therefore, you should always refer to the color-code score as the authoritative one.

Here's how to interpret the color-code scores:

• High priority. These suggestions represent the largest potential performance wins for relatively little development effort. You should address these items first.
  
• Medium priority. These suggestions may represent smaller wins or much more work to implement. You should address these items next.
  
• Working fine or low priority. If suggestions are displayed, as indicated with a + sign, they probably represent minor wins. You should only be concerned with these items after you've handled the higher-priority ones.
• Informational messages only. Either these items don't apply to this page or there was a problem in running the test.

  Tip: If your results show a large number of informational messages, this is likely because you tried to analyze the page before it was fully loaded. Click Refresh Analysis to rerun the analysis.

Understanding the total score

Page Speed also gives you a total numeric and color-code score. The numeric score is calculated as the total numeric score for the page, divided by the total weight of all rules (excluding rules for which you got a "blue"/informational-only result, which are non-scoring). The color-code score is calculated using a heuristic based on the number of green, yellow, and red results.

Recording activity

The Page Speed Activity panel shows a timeline of all browser activities, including network events and JavaScript processing. You can use the panel to further analyze your pages and correlate Page Speed's performance analysis results with actual timing data.

Note: The Page Speed Activity feature is incompatible with HTTPWatch. Before using it, make sure to disable HTTPWatch: in Firefox, go to Tools > Add-ons, and from the list of add-ons, click Disable for HTTPWatch.

Note that the Page Speed Activity panel shows browser events for all open browser sessions. Use the procedure below to record activity for a single page.

To record activity for one page:

1. (Re-)start Firefox and clear all tabs.
2. Clear the browser's cache.
3. To clear all browser activity that could be recorded, go to a blank page by entering about:blank in the address bar.
4. Select Tools > Firebug > Open Firebug.
5. In the Firebug window, select the Page Speed Activity tab.

   

6. Click Record Activity.
7. Navigate to the page you want to profile. Events are displayed along the timeline.

   

8. At any time, to examine the results, stop the timeline from moving by clicking Stop.

   Tip: You can also use the following keyboard shortcuts to start and stop recording: Ctrl-R on Linux and Mac OS X, Alt-R on Windows. 
   

   Tip: To see the absolute URL of any resource, hover the mouse over the resource to display a tooltip.

9. See below for more information about the events displayed.

Understanding the Page Speed Activity events

The Activity panel shows browser events along a timeline, for each resource required for the page being recorded. Events are represented in time slices of 10 milliseconds. If the browser event doesn't take the entire 10 milliseconds, the event is shown in a lighter shade. Segments in the timeline in which no colored event is displayed indicate that the browser is occupied with other processing, such as DOM and CSS parsing, Flash ActionScript processing, painting, operating system activities and so on.

The following table describes the event types in more detail.

Collecting complete JavaScript function call information

By default, Page Speed Activity collects shallow call graphs that contain the entry and exit times for the function at the bottom of each call stack. This minimizes the observer effect, improving the accuracy of the timeline.

However, you may want to collect complete call graphs that record every function invocation. The Show Uncalled Functions option allows you to:

• Get a list of uncalled functions. These are functions that were instantiated (parsed) but not called at the time you stop the recording.
• Get a list of delayable functions. These are functions that were called by the time you stop the recording, showing the difference between each function's instantiation time and its first invocation time, ordered from the largest to the smallest difference. 
• On Linux and Mac OS X, save the entire function call tree, including parse and invocation times, to a file on disk, in protocol buffer format, so you can perform in-depth analysis on those call graphs. See Activity Panel Saved Profiles for more information on the format of the file and how to extract data from it. 

For example, the following screen shot was taken at 7800 ms, and shows a list of functions that had not been called at that point, as well as the time at which they were parsed:

The following screen shot was also taken at 7800 ms, and shows all the functions that had been called by that point, sorted from the most to least delayable; that is, from the largest to smallest difference between parsing time and first invocation:

To record activity and collect complete call graphs for one page:

1. (Re-)start Firefox and clear all tabs.
2. Clear the browser's cache.
3. To clear all browser activity that could be recorded, go to a blank page by entering about:blank in the address bar.
4. Select Tools > Firebug > Open Firebug.
5. In the Firebug window, select the Page Speed Activity tab, and click the down arrow to display an options pop-up menu*. 
6. From the pop-up menu, select Full Call Graphs.
7. Click Record Activity.
8. Navigate to the page you want to profile. Events are displayed along the timeline.
9. At any time, do any of the following (which will also stop the recording):
   • To view a window showing the list functions that have not yet been called, click Show Uncalled Functions.
   • To view a window showing the list of functions that have been called but which could be delayed, click Show Delayable Functions.

   Tip: To see the full definition of any function, hover the mouse over the function in the Source column to display a tooltip.

   • To save the entire function call tree to a file in protocol buffer format, click Save (not available on Windows). 

Viewing paint snapshots

Starting in Page Speed 1.3 with Firefox 3.5 and higher, the Activity Panel can also display snapshots of the browser's progressive rendering of a page. When paint snapshots are enabled, and you record activity, Page Speed highlights in yellow each element in a page as it is rendered by the browser. Elements shown in grey are parts of the page that are not viewable in the current browser window without scrolling. You can use these snapshots to help debug progressive rendering problems, and to optimize rendering of elements on the page; for tips, see the article Capturing and analyzing browser paint events using Page Speed Activity.

For example, the following screen shot shows the text and icon elements being painted, followed by the form input field, followed by the form buttons:

1. (Re-)start Firefox and clear all tabs.
2. Clear the browser's cache.
3. To clear all browser activity that could be recorded, go to a blank page by entering about:blank in the address bar.
4. Select Tools > Firebug > Open Firebug.
5. In the Firebug window, select the Page Speed Activity tab, and click the down arrow to display an options pop-up menu. 
6. From the pop-up menu, select Paint Snapshots.
7. Click Record Activity.
8. Navigate to the page you want to profile. Events are displayed along the timeline. The paint snapshots are displayed in a separate pane in the right side of the window.
9. At any time, to examine the results, stop the timeline from moving by clicking Stop.

Using advanced options

To view additional Page Speed options, select the Page Speed tab, and click the down arrow to display an options pop-up menu:

Each is described below.

Automatically run at onload

This option causes Page Speed to automatically analyze a page as soon the page loads. As long as the option is enabled, Page Speed will run automatically for all subsequent pages you visit.

To automatically run Page Speed when a page is loaded:

1. Open Firebug, select the Page Speed tab, and click the down arrow to display the options pop-up menu.
2. From the pop-up menu, select Automatically Run at Onload.
3. Navigate to the web page you want to analyze. When the page is finished loading, Page Speed automatically runs the analysis. 

Profile deferrable JavaScript

This option runs the test for deferred loading of JavaScript and is disabled by default. This test gathers JavaScript coverage data from the Firefox JavaScript Debugger Service to determine which functions a page has called (or not) by the time the onload event is triggered. The Debugger Service tracks the state of the entire Firefox session in a single global space in memory; that is, the state is not per page load, and it is not cleared after a page reload. This means that if you run the profiler the first time you visit the page in a Firefox session, the score will be accurate for that visit. But if you continue to use the page, and additional JS is loaded and executed, profiling the page at that point will not report accurate results. Furthermore, if more than one page references the same external JS file, the profiler only reports results for the first page visited.

To guarantee that your performance score on this test is accurate, be sure to run it when you first start Firefox:

1. (Re-)start Firefox.
2. Select Tools > Firebug > Open Firebug.
3. In the Firebug window, select the Page Speed tab, and click the down arrow to display the options pop-up menu
4. From the pop-up menu, select Profile Deferrable JavaScript.
5. Navigate to the web page you want to analyze. 
6. When the page has finished loading, click Analyze Performance.
   
7. To run the profiler against another page, close Firefox and restart the procedure.

Note: This option significantly slows down browsing and can cause Firefox to hang, especially if you open multiple browser tabs. We recommend that you keep the option disabled until you are ready to use it, and disable it when you finish using it.

Save optimized files

Page Speed automatically optimizes JavaScript, CSS, and image files referenced from a page when you run the analysis. By default, the optimized files are saved to the following directories:

• Linux:/tmp/page-speed-[css | javascript | images]/
• Windows: C:\Documents and Settings\username\Local Settings\Temp\page-speed-[css | javascript | images]\
• Mac OS X: /Users/username/Library/Caches/page-speed-[css | javascript | images]/

However, you can change the directory to which Page Speed should save the files. To do so:

1. Open Firebug, select the Page Speed tab, and click the down arrow to display the options pop-up menu.
2. From the pop-up menu, select Save Optimized Files To, and select a directory from the predefined options, or select Choose a Custom Path to specify a custom directory.

Set user agent

Page Speed generates scores based on the page loaded by Firefox. However, to work around differences in browser behavior, some websites serve different content based on the user's browser. Web servers determine which browser is making the current request based on a user agent string that the browser sends with each request.  If your site serves different content based on the user agent string, and you want Page Speed to grade the content served to a specific browser, you can use the Set User Agent option.

Note that a page that works in another browser may not work in Firefox, so it is possible that a page you profile with a different user agent is not exactly the same as what a user of that browser would see. However, often the differences are only cosmetic, and Page Speed's recommendations are still valid.  

To select a different user agent:

1. Open Firebug, select the Page Speed tab, and click the down arrow to display the options pop-up menu.
2. Optionally, to display additional user agent options, select Show All User Agents.
3. From the pop-up menu, select and select the user agent you want to test against.
4. Navigate to the web page you want to analyze.
5. When the page has finished loading, click Analyze Performance.
   
6. To rerun the test with another user agent, repeat steps 2 to 4.

Note: The user agent options can cause Firefox to hang for some web pages. We recommend that you keep the Default Value setting for basic usage.

Uninstalling Page Speed

To uninstall Page Speed, on all platforms:

1. In Firefox, select Tools > Add-ons.
2. In the window that appears, select Page Speed and click Uninstall.
3. Restart Firefox.