1. Install PageSpeed Insights
2. Running PageSpeed Insights
3. Understanding PageSpeed Insights performance scores
4. Using advanced options
5. Uninstalling PageSpeed Insights

Installing PageSpeed Insights

Running PageSpeed

PageSpeed 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, PageSpeed may not be able to fully analyze resources that haven't finished downloading.

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

To profile a page with PageSpeed:

1. Start Firefox.
2. Select Tools > Firebug > Open Firebug.
3. In the Firebug window, select the PageSpeed 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, PageSpeed 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 PageSpeed over time. For information on the data that is sent to Show Slow, see the beacon documentation on the PageSpeed open source project page for the "minimal beacon".

Understanding PageSpeed performance scores

For each rule, PageSpeed 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

PageSpeed 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 PageSpeed 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 PageSpeed to automatically analyze a page as soon the page loads. As long as the option is enabled, PageSpeed will run automatically for all subsequent pages you visit.

To automatically run PageSpeed when a page is loaded:

1. Open Firebug, select the PageSpeed 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, PageSpeed 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 PageSpeed 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

PageSpeed 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 PageSpeed should save the files. To do so:

1. Open Firebug, select the PageSpeed 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

PageSpeed 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 PageSpeed 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 PageSpeed's recommendations are still valid.  

To select a different user agent:

1. Open Firebug, select the PageSpeed 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 PageSpeed

To uninstall PageSpeed, on all platforms:

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