StyleSheetManager for ASP.NET AJAX

Overview

When loading a page with several controls on it, you often face the problem of reduced page load time and increased traffic. Well, RadStylesheetManager eliminates this problem. It’s a traffic killer control that combines all the requests (to the "stylesheet resource files" on the page) into a single one, reducing the page load time and traffic. Just add it your page and the stylesheet requests will be combined into a single file.

See Demos Download Trial

Features

• Minimizing Page Traffic
• Easy Configuration
• Support for Caching
• RadStyleSheetManager vs RadScriptManager
• Performance Tests

• Minimizing Page Traffic

  RadStyleSheetManager automatically combines all CSS for all RadControls on the page to a single request. Used in conjunction with the Telerik ASP.NET StylesheetManager, and a page with many RadControls will only generate one request for CSS, one request for JavaScript, and then a handful of requests for any required image files (since images obviously cannot be combined). With Telerik ASP.NET StylesheetManager you eliminate the manual work of disabling the automatic stylesheet serving of the controls on a page, combining them into a smaller set of files and registering the links to these files on the page.

  Top

• Easy Configuration

  You can add the Telerik ASP.NET AJAX StyleSheetManager to your page with a simple drag-and-drop to achieve the combination of resources to a single request. You can easily configure it through the SmartTags of the control. All you need to do is to declare an HttpHandler in the application configuration file to operate properly. That handler compresses the content with gzip (as ScriptResource.axd does) if the client browser supports that.

  Top

• Support for Caching

  Telerik ASP.NET AJAX StyleSheetManager supports caching, because the rendered URL is constant for the same set of controls.

  Top

• RadStyleSheetManager vs RadScriptManager

  Both RadStyleSheetManager and RadScriptManager are doing the same thing – reducing the page load time and traffic.The only difference is that RadStyleSheetManager merges the RadControls embedded skins, while RadScriptManager merges all registered script resources regardless of their origin.

  Top

• Performance Tests

  The following test is done 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.
  
  

  Top