Monday, April 28, 2008

Optimization Tips:The Rad Managers for ASP.NET AJAX

Today I am kicking-off a new series of blog posts that will focus on showing you specific ways you can optimize the performance of your applications built with Telerik's RadControls for ASP.NET AJAX. Whenever we use UI components to accelerate our web development, it is easy to forget that we still need to be "smart" developers when it comes to optimizing our web applications. Telerik tries to do as much as is possible at a component level to help with optimization, but as with any good thing like rich UI controls, too much is a bad thing. In this post and those that follow, I will delve in to optimization tips and tricks and show you the effects of each on a sample application. Hopefully it will help you become a better developer and enable you to maximize the performance of your apps, especially those with Telerik's RadControls.

Today's focus is on the new RadScriptManager and RadStyleSheetManager controls. These "manager" controls enable you to easily combine in to a single link all of the JavaScript and CSS links required by the RadControls. Why combine? One of the biggest bottlenecks for browsers these days is created by the concurrent requests limit. By default, both IE and Firefox limit concurrent requests per server to 4, as is recommend by the HTTP RFC guidelines. This limit can be changed, but expect few of your users to actually have done so as the process requires advanced computer skills.

With a limit of 4 concurrent requests (2 persistent connections), you can see how easy it is to clog the pipe with all of the request for images, JavaScript, and CSS on your page. Combining many links for CSS and JavaScript in to a single request can significantly improve your page load time by reducing the number of round-trip requests your page makes when it loads. And by doing the combining dynamically at runtime you don't have to send any unnecessary JavaScript to the client (for controls not in use) or manually maintain combined JavaScript files. It's one of the easiest and most effective optimization tips available.

Let's see the effect of these managers on a simple demo app that uses RadGrid, RadMenu, RadTreeview, RadAjax, and RadSplitter. We'll use FireBug (in Firefox 2) and Fiddler for our tests, and we'll run our site from IIS to ensure we get accurate performance numbers.

Requests and Bytes
The first thing you should notice when using the Managers is that the number of requests your page generates is reduced significantly. Let's take a look at the difference:

  • Requests without Managers
      • Unprimed cache: 32 @ 21.4 KB
      • Primed cache: 3 @ 2.6 KB
  • Requests with Managers
      • Unprimed cache: 16 @ 11.2 KB
      • Primed cache: 1 @ 1.8 KB
Clearly, the managers have a significant impact on your requests. In this demo app, they cut in half the number of requests and the number of bytes sent to the server on page load. That's a pretty significant gain and bandwidth savings for your user. Even on the download side, the Managers reduced the payload sent from the server about 11% on average, for both primed and unprimed page loads.

Page Load Times
While reducing the number of requests and bytes is good academically, it's ultimately page load time that matters to users. To see the effect the Managers have on page load time, I ran the demo through the online stopwatch in IE7, IE8 beta 1, FF2, and FF3 beta 5. I ran the stop watch 6 times for each browser, 3 unprimed cache tests, 3 primed cache tests. I then compiled the results in to the following chart.


This chart reveals a few interesting facts about the Mangers' effect on page load time:
  • Usually, for both primed and unprimed caches, the Managers reduce page load time
      • Unprimed improvement: 30%
      • Primed Improvement: less than 1%
      • Primed Improvement without FF2: 3%
  • As has been observed in other performance tests, FF2 is a poor performing browser
      • It renders pages slowly and renders cached pages slower than first request pages
      • FF3 is a lot faster than FF2 (yay!)
  • Almost all browsers tested render the test page in less than 1 sec with Managers
      • True for primed and unprimed cache
      • Key exception is FF2, but see note above. FF3 solves the problem.
Whether or not you'll see a 30% improvement on initial page load time in your app will require your own testing, but this analysis definitely makes it clear that the Managers can have a very real impact on improving your page's load time.

Optimization Tip Summary
To cut significantly reduce the requests and bandwidth required by your page on the initial visit, and to significantly trim your initial page load time, you should add the RadScriptManager and RadStyleSheetManager to your ASP.NET AJAX applications. For more details on how to add these controls to your page, see this page for the ScriptManager and this page for the StyleSheetManager in the Telerik documentation.

Next up, we'll look at the impact debug=true and the Visual Studio development server have on your page's performance.

5 comments:

Unknown said...

As a caveat to the performance notes: AJAX pages often have a lot of javascript and it has seemed to me the javascript performance in IE6 + IE7 is so much worse than FF2 that my benchmarks have tended to run the other way, so FF2 seems faster. This may be the particular pages I'm testing on, but they are FULL of Telerik AJAX controls, so its probably a fair statement. I'd be interested to see more involved benchmarks from you.

strazz said...

Can I just drop these manager controls on the MasterPage and then everything will be faster? The MasterPage is used throughout the site but different RadControls are present on different pages. How would dropping this on the Masterpage affect non Prometheus controls? (Right now the entire site is Non-Prometheus but I will be bringing new sections on with Prometheus and possibly re-working a few old sections.

Todd Anglin said...

@jarrett- In my observation, FF2 is -always- slower rendering sites and pages (especially those with lots of JavaScript) than IE7/Safari/Opera/et al. FF3, on the other hand, is much more competitive and speedy.

@strazz- Yes, you can easily add the Managers to your MasterPage and they will automagically help your page load performance if you're the RadControls for ASP.NET AJAX. Non-Prometheus controls will not be affected by the managers (good or bad).

-Todd

Mostafa said...

Dear Todd,
I think you must check overall performance of a site and not a page.
When we use RadScriptManager in a site with different controls on pages we will have some large size unique script urls that maked by RadScriptManger and we will transfer more data to clients and have more slower site.
Better idea is combining scripts by controls or even combine them with polularity on pages for example if we have some pages with RadGrid and RadMenu it's good if we combine scripts of these two controls to one. and make another scripts for other controls.

Excuse me English isn't my native language.

Best regards

Todd Anglin said...

@Mostafa- You are right to a point. The process of optimizing performance for a site is definitely more involved than "blindly" using the RadManagers, and I would always caution any optimization technique with "your millage may vary." In general, the combining done by the RadManagers does help improve site performance (since a site is really just a composition of many pages). It tries to reduce what is a major bottle neck on modern websites: number of requests on page load.

If you're having trouble getting good results from the Managers, I encourage you to visit the Telerik Forums. I bet we can help you improve your performance there.

Hope that helps clarify.
-Todd