Page Speed Tool

Dear All,

 

From last few days I was working to find out the issue of one of Web server utilizing 100% CPU by w3wp.exe , I have used following tool to collect some of the issue .

 

Using Page Speed

  1. Running Page Speed
  2. Understanding Page Speed performance scores
  3. Recording activity

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.

To profile a page with Page Speed:

  • Start Firefox.
  • Select Tools > Firebug > Open Firebug.
  • In the Firebug window, select the Page Speed tab.
  • 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.


  • 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.


  • 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.

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.

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. 

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:

  • (Re-)start Firefox and clear all tabs.
  • Clear the browser’s cache.
  • To clear all browser activity that could be recorded, go to a blank page by entering about:blank in the address bar.
  • Select Tools > Firebug > Open Firebug.
  • In the Firebug window, select the Page Speed Activity tab, and click the down arrow to display an options pop-up menu*. 
  • From the pop-up menu, select Full Call Graphs.
  • Click Record Activity.
  • Navigate to the page you want to profile. Events are displayed along the timeline.
  • 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.

To record activity and view paint events:

  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 Page Speed

  1. Running Page Speed
  2. Understanding Page Speed performance scores
  3. Recording activity

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.

To profile a page with Page Speed:

  • Start Firefox.
  • Select Tools > Firebug > Open Firebug.
  • In the Firebug window, select the Page Speed tab.
  • 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.


  • 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.


  • 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.

      .

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.

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. 

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:

  • (Re-)start Firefox and clear all tabs.
  • Clear the browser’s cache.
  • To clear all browser activity that could be recorded, go to a blank page by entering about:blank in the address bar.
  • Select Tools > Firebug > Open Firebug.
  • In the Firebug window, select the Page Speed Activity tab, and click the down arrow to display an options pop-up menu*. 
  • From the pop-up menu, select Full Call Graphs.
  • Click Record Activity.
  • Navigate to the page you want to profile. Events are displayed along the timeline.
  • 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:

 

To record activity and view paint events:

  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

Thanks

 

Prashant Deshpande

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s