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!

Leave a Reply

Up ↑

Discover more from David Lozzi

Subscribe now to keep reading and get access to the full archive.

Continue reading