Karine Bosch’s Blog

On SharePoint

Part 1: How to track and analyse Web Page Performance


In this blog post I’m going to explain how you can analyze the performance of your page using different tools. Most of them our free downloadable browser tools, but there are also a number of payable performance tools like New Relic.

You can also use Visual Studio load tests to test performance of your SharePoint pages. I’m currently using Visual Studio 2010 load tests but you can do the same and even more with Visual Studio 2012 load tests.

You can also use the SharePoint Developer dashboard to troubleshoot problems with page components. If your Developer Dashboard doesn’t offer you enough information, you can make use of SPMonitoredScope in your code.

Browsers

There is a large scala of internet browsers out there but in this post I will talk about Internet Explorer (version 9), FireFox (version 18.0.2) and Chrome (version 24.0).  Each of these browsers comes with their own tools and add-ins to analyze a web page. Besides support for HTML, JavaScript and CSS, you can also find information about the performance of your web pages.

Internet Explorer (version 9)

Internet Explorer comes with a range of development tools. You can press F12 to enable them at the bottom of the browser. These tools offer you a wide range of support for analyzing the HTML, the CSS, debug JavaScript, etc.

If you want to start analyzing the performance of your web page, you can select the Network button and click the button to start recording the loading of the page. When the page is loaded, you will see something like the following graph:

IE 1

Each bar is one HTTP request. The first bar, labeled html, is the initial request for the HTML document. The browser parses the HTML and starts downloading the components in the page. If the browser cache is empty, all the components need to be downloaded. The HTML document is only 5% of the total response time. The visitor spends most of the other 95% waiting for the components to download, scripts and stylesheets to be parsed.

If you want to analyze one of the resources in more detail, you can select the resource and click the Details button.

IE 2

You will be able to analyze details about the request headers, the response headers and cookies. You can browse through the requests using the Previous and Next buttons.

FireFox (version 18.0.2)

Firefox itself does not offer support for improving web performance, but with Firefox a whole scala of add-ins can be downloaded for free. The add-in I use the most is Firebug.

Firebug is an impressive web development tool that can be used to:

  • Analyze performance
  • Inspect HTML, JavaScript and CSS
  • Modify style and layout on the fly
  • Debug JavaScript

You can enable firebug by clicking the image of the bug at the right top of the Firefox browser. Firebug will be opened at the bottom of the browser.

If you’re interested in the performance of your page, you can enable firebug: click the .NET tab and press Ctrl+F5 to refresh your page. If you only press F5 you refresh your page using the resources cached by your browser. If you press Ctrl+F5 you ensure that your page is requested on the server.

The list you see in firebug is the list of resources requested to render the requested page entirely. They are listed in the order they are requested. You can also see how much time the server needed to serve the requested resource. The first request is the HTML of the page, the subsequent requests represent the images, JavaScript files and CSS files needed to render the page. For each requested resource you see the status (see further for more details on this), the domain from which the resource is served, the size of the resource, and the time it takes to server the resource to the browser.

At the bottom of the graph you can see how much time it took to render the page from beginning to end.

firebug 1

You can hover over a resource to see more detailed information about the time it took to load the resource:

firebug 4

If you want to see more details on one of the resources, you can expand the resource. You are able to analyze details about the request headers, the response headers, the cache and the cookies.

firebug 2

From this graph you can learn a lot of things concerning the performance of your page. More details on Firebug will be explained in this series of articles because this is the tool I use to gather information about the performance of my web pages.

YSlow

And then there is YSlow. This tool has been developed by the team of Steve Souders at Yahoo. YSlow exists as add-in for both FireFox as Chrome. When you install the add-in for Firefox, you will get the tool as an additional tab in FireBug.

When your page loads, YSlow analyzes your page and gives you advise on how to improve your page, based on the rules Steve Souders explains in his book. One of the major remarks for this page is that you should try to limit the number of HTTP requests and this can for example be remediated by combining the CSS in one file and combining the JavaScript in one file.

YSlow

Chrome

Chrome has also its own developer tools. These tools are accessible from the settings button in the upper right corner of the browser. Like all other browsers, these tools provide support for CSS, HTML, JavaScript and performance analysis.

Chrome 1

As with the other browsers, Chrome provides a graph with a list of resources that have been requested. Each resource is represented by a colored line where you can read its name, the size of the resource and the time it took to download the resource. Hovering over the colored line provides you more detailed information about:

  • how long the resource was blocked
  • how long it took to send the request
  • how long the browser had to wait for the request being executed by the server
  • how long it took to receive the resource from the server

Chrome 2

At the end of the graph you can see the total time it took to download the page and the size of the page.

You can reorder the graph by clicking the headers of the graph; at the bottom of the graph you have also a number of buttons to filter the resources. You could for example click the stylesheets button to only see the list of css files that have been loaded.

Chrome 3

Visual Studio Load Tests

It is important that you analyze the requests on your web page but when that work is finished you need to know how your web site behaves under heavy load. A tool like Visual Studio Load Tests can help with that. You can write and run web performance tests and load tests for this purpose. These tests can be developed within a special Test project template.

If you are working with Visual Studio 2010, you have to install a separate Load Test Feature Pack to have the Load test and Web Performance project items available. But in that case you need Visual Studio 2010 Ultimate edition to be able to create this type of projects. If you are working with Visual Studio 2012, these project templates are standard available.

If you want to get started with web performance tests and load tests, you can read the MSDN articles and the article in Visual Studio Magazine. You can find more advanced stuff dispersed over the net.

Web Performance tests and Load tests also exist in Visual Studio 2012.

SharePoint Tools

SharePoint 2010 does not have a lot of tools to measure the performance but it comes with the Developer Dashboard.

SharePoint Developer Dashboard

The SharePoint Developer Dashboard is a new feature in SharePoint 2010 that is designed to provide additional performance and tracing information that can be used to debug and troubleshoot issues with page rendering time.

The Developer Dashboard is disabled by default but can be enabled via:

  • the object model
  • stsadm
  • PowerShell

The PowerShell commands look as follows:

$devdashboard = Microsoft.SharePoint.Administration.SPWebService]::ContentService.DeveloperDashboardSettings;
$devdashboard.DisplayLevel = “On”;
$devdashboard.TraceEnabled = $true;
$devdashboard.Update()

There are 3 display levels: on, off and on demand. If you turn the Developer Dashboard on, you will get the details at the bottom of each page. If you specify on demand, the dasboard will not show on page load but you’ll see a link button next to your name to display the Developer Dashboard.

When the dashboard is turned on, you will find information about the page, the controls on the page, the queries that were executed to render the page and their execution time. This information appears at the bottom of the page.

Developer Dashboard

The border around the dashboard can have different colors:

  • Green: performance is good
  • Yellow: performance is acceptable
  • Red: performance is bad

On the left side you can find information on:

  • The different events that are fired during the processing of the page
  • How long individual actions take to load

On the right side you can see information about

  • Overall execution time of the page
  • The amount of memory used in the processing of the page request
  • The correlation ID, which can be used to retrieve entries in the ULS log
  • Database queries section contains a list of database calls. The database calls are hyperlinks. Clicking on it shows the call stack from what triggered the database call and the SQL query that was executed.

The database calls are rendered as hyperlinks. Clicking on it shows the call stack from what triggered that particular database call, the SQL that was executed and the IO stats:

Developer Dashboard - sql callstack

If you set the TraceEnabled property to True, you’ll get an hyperlink at the lower left corner of the page to show or hide the tracing information.

You can even change the permissions that are required to see the dashboard output. The DeveloperDashboardSettings has a property called RequiredPermissions. You can assign a collection of base permissions (like EditLists, CreateGroups, ManageAlerts) to it. Only users having these permissions will be able to see the dashboard.

By default, the developer dashboard is not rendered when accessing the site anonymously. You can configure the dashboard for anonymous access as follows:

$devdashboard = Microsoft.SharePoint.Administration.SPWebService]::ContentService.DeveloperDashboardSettings;
$devdashboard.DisplayLevel = "OnDemand";
$devdashboard.TraceEnabled = $true;
$devdashboard.RequiredPermissions = "EmptyMask";
$devdashboard.Update();

SharePoint 2013 adds a number of enhancements to the Developer Dashboard. You can read more about it here.

SPMonitored scope

The SPMonitoredScope is automatically added for web parts but if you are developing custom controls, and you want additional information displayed on the Developer Dashboard, you can enclose your code within your own monitored scope.

The SPMonitoredScope class is added to the server object model in SharePoint 2010.

In order to get your code included in the developer dashboard output, you need  to wrap it up in a new monitored scope:

using (SPMonitoredScope GetListsButtonScope = new SPMonitoredScope("CustomNavigation control"))
{
   //your code goes here
}

<picture>

Remark: if your code runs in a sandboxed component, using SPMonitoredScope will not influence the developer dashboard because sandboxed components run in a different process.

6 Comments »

  1. This is very helpful..and well documented.Thank You.

    Comment by Nimisha Chokkath | April 14, 2014 | Reply

  2. Karin, each of your blog-posts helped me to learn new things, and serve as a point of reference on multiple projects. Thank you for the great work!

    Comment by Adarsha (@mvadu) | September 15, 2014 | Reply

    • Hi Adarsha,
      Thank you for your kind words!
      Karine

      Comment by Karine Bosch | September 15, 2014 | Reply

  3. As Nimisha and Adarsha already said: very helpful sites which support to understand new things. Thx🙂

    Comment by Kalle | September 25, 2014 | Reply

  4. good post

    Comment by Amay kulkarni | April 17, 2015 | Reply

  5. It is beneficial to analyze web performance of your website, It helps you to know where you should made changes in your website. Goingseo.com.au is another free website analyzer tool to analyze your website.

    Comment by Vrushank Shah | April 11, 2016 | Reply


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

%d bloggers like this: