A Non-Developer’s Intro to the Developer Toolbar: Performance

Sorry for the delay in getting this last post in, it completely skipped my mind. This is part three of my mini-series, part one covered element inspection and part two covers scripting.

In this post, we will look into some of the performance tools available to the developer toolbar in Internet Explorer. This will allow you to assess your SharePoint site, and see where some of the slow points are.

Let’s get the developer toolbar open, press F12.

Profiler

Profiler assess the scripts and functions running on the page. Out of the box, there’s a ton running, and there’s little we can do about it, it’s all SharePoint. If you have some custom pieces in your site, especially those using client side development, then this tool may be of use.

Click the Profiler tab, then click Start profiling button. This may hang for a little, just give it a little time. When it’s ready, the button will change to Stop profiling. Reload the page now. Once the page has fully reloaded, click Stop profiling. You’ll then see your results.

Developer Toolbar Profiler

The results will show you which functions in the client code are taking the longest. Sadly, a lot of them are SharePoint’s, and we can’t do much about it. You’ll see a lot of functions that may be confusing in name, like ‘Anonymous function’.

  • If you sort by the Function column, you can find your functions a little easier.
  • Sort by Inclusive Time to find the functions that took the most time, including child functions. Exclusive Time is the time it took for that one function.
  • Doubleclick a function and it should send you to the Script tab, if it can find the function for you.

Network

This is the real fun one, and gives us more direction on what’s going on. Click the Network tab, then click Start capturing. Reload the page and you’ll see results immediately.

Developer Toolbar Network

This tells us what took so long to download, from scripts to CSS files to images. You can sort by the Taken (time it took to download) or Received (amount of data) columns to see which items on the page took the most time. Normally, the page itself, in my case home.aspx, took the longest. This is because this page contains all of the HTML markup you see. Rarely is there something that can be done about this size, other than if there are custom web parts spilling out extraneous markup.

This tool will tell you if there is a large image or script/CSS file that’s taking long to download. You can take this data back to your developers and complain about the long times. They may have a shocked look on their face when you report this to them. Have fun with that ;). Large assets like images and script files can be optimized and minified to improve download speeds.

My next post will be on some of the other neat tools and advantages in the Developer Toolbar.

Til then, Happy SharePointing!

Advertisements

2 thoughts on “A Non-Developer’s Intro to the Developer Toolbar: Performance

  1. Pingback: A Non-Developer’s Intro to the Developer Toolbar: Other Cool Stuff | David Lozzi's Blog

  2. Pingback: Boston SharePoint Bloggers Digest for September | Beantown SharePoint

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