Page Speed - Google Code
My favorites ▼ | English ▼ | Sign in

Using Page Speed for Firefox

  1. Running Page Speed
  2. Understanding Page Speed performance scores
  3. Using advanced options
  4. 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. 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.

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.