RadScriptManager ScriptCombining Real World Performance

[Kyle]

Recently I have been researching ways to speed up our web application loading time.  One of the things that I noticed was that we use the RadScriptManager in several different pages throughout the site.  What is the real performance gain when using the RadScriptManager with combining scripts enabled.  I realize that this reduces the number of http requests needed by the browser, but does that really translate into real world performance?  One of the major flaws I have discovered is that if each page does not contain the exact same controls, that particular page will have to load its own version of javascript in the form "/Telerik.Web.UI.WebResource.axd?"  Consider the following senario assuming all pages have the RadScriptManager attached with script combining enabled.  I load the initial page of the website which has some telerik controls.  The page loads its telerik web resource and caches the page.  I then open a child page, this page has an extra telerik control on it and therefore the page must also download its own telerik webresource.  This webresouce for the child page contains all the microsoft ajax javascript along with all the telerik javascript that was downloaded in the previous page plus a little extra for the new control.  In my eyes this is actually hurting my performance.  I have already downloaded the microsoft ajax libraries and most of the telerik code needed for the child page so why do I need to download the entire 300 to 500 KB of javascript information over again (in my experience)?  Assuming that this can go on for several pages without getting an actuall solid cache, what kind of performance gain does this control actually offer?

[SamVanity]

I believe it is better off to leave the script combining feature to false. There is no advantage if you have many pages and each page has slightly different Telerik controls.

The combining mechanism is really not that big a deal at all to me.

[Shinu]

Hi Kyle,

RadScriptManager is a control that replaces the ScriptManager available in the Microsoft Ajax Extensions suite.

When put on the page, RadScriptManager combines all the requests (to the "javascript assembly resource files" on the page) into a single one, thus reducing the page's load time and traffic consume.

The way RadScriptManager operates is outputting a <script> tag with a specific URL, making a request to an HttpHandler, which serves the combined scripts.

If the script combination is not needed for some reason it can be disabled by giving the EnableScriptCombine property the value of false.

Here is one blog "Optimization Tips:The Rad Managers for ASP.NET AJAX " which explains the importance of script combining .

-Shinu.

[Kyle]

I think that Sam understands the issue a bit better.  Why should I have one request of .5 Mb when I can have 2 requests of 20 kb?  I'm struggling to see how the one request would get me the data faster.

Thanks,
Kyle

[Greg]

It is interesting that there has not been an official response to this.  I agree with the first poster, namely that in most real world scenarios, the script combining features of the RadScriptManager and the RadStyleSheetManager actually hurt performance of the website.  This assumes that the site is leveraging browser cache properly with the "Expires" header and "ETags".

I think it is dangerous for Telerik to continue with their blanket advice that using the RadScriptManager and the RadStyleSheetManager will improve performance.  This statement is certainly true for a one page scenario, but really, how many websites only consist of one page?

Unless someone from Telerik can convince me otherwise, I think the advice should be to turn off ScriptCombine on the RadScriptManager and to avoid the StyleSheetManager, IF you are using browser cache effectively.

thoughts?

[Ivan Zhekov]

Hello Greg,

If I may correct your statement -- the RadScriptManager can combine scripts which reduces the total HTTP requests greatly on a page. That's true regardless if we are speaking for a single page site / application or a multi-page site / application.

Then comes the RadStyleSheetManager. Not only it combines stylesheets to reduce the HTTP request, but it does so in a manner that addresses certain IE 10- related bugs, such as the 31 sylesheet limit; 4096 rules count and so on.

Not to mention that each unique combination of style sheets / scripts is cached as such and it takes only one request to get it.

In addition, the control is not stale in development, but is being actively developed and new features being added to it. Like the CDN options, which allow to host scripts and styles elsewhere.

Regards,
Ivan Zhekov
the Telerik team

[Greg]

Thanks for the response Ivan.

Whilst I appreciate your comments, I still believe that my points hold true.

If you have a site with 3 pages, each page has a unique set of Telerik Controls on it.  You are going to get better performance from not having the RadScriptManager and the RadStyleSheetManager than having it.  Let me try and explain my understanding.

Page 1
Grid
ComboBox
Treeview

Page 2
Grid
RadMenu
Scheduler

Page 3
Grid
Calendar

The user navigates from page 1 to 2 to 3 (as is reasonable to expect).

With RadScriptManager & RadStyleSheetManager

Page1 - Total Requested: 261KB
JS Files (1 request - combined) - 220KB
- MicrosoftAjax.js
              - MicrosoftAjaxWebForms.js
              - Telerik.Web.UI.Common.Core.js
              - Telerik Web.UI.Grid.RadGridScripts.js
              - Telerik.Web.UI.Common.jQuery.js
              - Telerik.Web.UI.Common.jQueryPlugins.js
              - Telerik.Web.UI.Common.TouchScrollExtender.js
              - Telerik.Web.UI.Common.OData.OData.js
              - Telerik.Web.UI.Common.Navigation.NavigationScripts.js
              - Telerik.Web.UI.ComboBox.RadComboBoxScripts.js
              - Telerik.Web.UI.TreeView.RadTreeViewScripts.js
StyleSheets (1 Request- Combines) - 15KB
      - Telerik.Web.UI.Skins.Grid.css
              - Telerik.Web.UI.Skins.Default.Grid.Default.css
              - Telerik.Web.UI.Skins.ComboBox.css
              - Telerik.Web.UI.Skins.Default.ComboBox.Default.css
              - Telerik.Web.UI.Skins.TreeView.css
              - Telerik.Web.UI.Skins.Default.TreeView.Default.css

Page2 - Total Requested: 342KB
JS Files (1 request - combined) - 287KB
- MicrosoftAjax.js
              - MicrosoftAjaxWebForms.js 
              - Telerik.Web.UI.Common.Core.js
              - Telerik Web.UI.Grid.RadGridScripts.js
              - Telerik.Web.UI.Common.jQuery.js
              - Telerik.Web.UI.Common.jQueryPlugins.js
              - Telerik.Web.UI.Common.OData.OData.js
              - Telerik.Web.UI.Common.Scrolling.ScrollingScripts.js 
              - Telerik.Web.UI.Common.Navigation.NavigationScripts.js
              - Telerik.Web.UI.Menu.RadMenuScripts.js
              - Telerik.Web.UI.Common.Popup.PopupScripts.js 
              - Telerik.Web.UI.Common.TouchScrollExtender.js
              - Telerik.Web.UI.Scheduler.Helpers.DateTime.js
              - Telerik.Web.UI.Scheduler.RadSchedulerScripts.js
              - Telerik.Web.UI.Scheduler.Views.Week.Model.js
              - Telerik.Web.UI.Scheduler.ContextMenu.Plugin.js
              - Telerik.Web.UI.Calendar.RadCalendarCommonScript.js 
              - Telerik.Web.UI.Calendar.RadCalendarScript.js
              - Telerik.Web.UI.Menu.ContextMenu.RadContextMenuScripts.js

StyleSheets (1 Request- Combines) - 29KB
      - Telerik.Web.UI.Skins.Grid.css
              - Telerik.Web.UI.Skins.Default.Grid.Default.css
              - Telerik.Web.UI.Skins.Menu.css
              - Telerik.Web.UI.Skins.Default.Menu.Default.css
              - Telerik.Web.UI.Skins.Scheduler.css
              - Telerik.Web.UI.Skins.Default.Scheduler.Default.css
              - Telerik.Web.UI.Skins.Calendar.css
              - Telerik.Web.UI.Skins.Default.Calendar.Default.css

Page3 - Total Requested: 204KB
JS Files (1 request - combined) - 191KB
- MicrosoftAjax.js
              - MicrosoftAjaxWebForms.js 
              - Telerik.Web.UI.Common.Core.js
              - Telerik Web.UI.Grid.RadGridScripts.js
              - Telerik.Web.UI.Common.jQuery.js
              - Telerik.Web.UI.Calendar.RadCalendarCommonScript.js 
              - Telerik.Web.UI.Calendar.RadCalendarScript.js

StyleSheets (1 Request- Combines) - 9KB
      - Telerik.Web.UI.Skins.Grid.css
              - Telerik.Web.UI.Skins.Default.Grid.Default.css
              - Telerik.Web.UI.Skins.Calendar.css
              - Telerik.Web.UI.Skins.Default.Calendar.Default.css 

Without RadScriptManager & RadStyleSheetManager

Page 1 - Total Requested - 273KB
JS Files (Seperate Requests) - 225KB
      - MicrosoftAjax.js
              - MicrosoftAjaxWebForms.js
              - Telerik.Web.UI.Common.Core.js
              - Telerik Web.UI.Grid.RadGridScripts.js
              - Telerik.Web.UI.Common.jQuery.js
              - Telerik.Web.UI.Common.jQueryPlugins.js
              - Telerik.Web.UI.Common.TouchScrollExtender.js
              - Telerik.Web.UI.Common.OData.OData.js
              - Telerik.Web.UI.Common.Navigation.NavigationScripts.js
              - Telerik.Web.UI.ComboBox.RadComboBoxScripts.js
              - Telerik.Web.UI.TreeView.RadTreeViewScripts.js 
StyleSheets (Seperate requests) - 20KB
             - Telerik.Web.UI.Skins.Grid.css
              - Telerik.Web.UI.Skins.Default.Grid.Default.css
              - Telerik.Web.UI.Skins.Calendar.css
              - Telerik.Web.UI.Skins.Default.Calendar.Default.css  

Page2 - Total Requested: 179KB
JS Files (Seperate Requests) - 119KB
- MicrosoftAjax.js - Retrieved from cache
              - MicrosoftAjaxWebForms.js - Retrieved from cache 
              - Telerik.Web.UI.Common.Core.js - Retrieved from cache
              - Telerik Web.UI.Grid.RadGridScripts.js - Retrieved from cache
              - Telerik.Web.UI.Common.jQuery.js - Retrieved from cache
              - Telerik.Web.UI.Common.jQueryPlugins.js - Retrieved from cache
              - Telerik.Web.UI.Common.OData.OData.js - - Retrieved from cache
              - Telerik.Web.UI.Common.Scrolling.ScrollingScripts.js 
              - Telerik.Web.UI.Common.Navigation.NavigationScripts.js - Retrieved from cache
              - Telerik.Web.UI.Menu.RadMenuScripts.js
              - Telerik.Web.UI.Common.Popup.PopupScripts.js 
              - Telerik.Web.UI.Common.TouchScrollExtender.js - Retrieved from cache
              - Telerik.Web.UI.Scheduler.Helpers.DateTime.js
              - Telerik.Web.UI.Scheduler.RadSchedulerScripts.js
              - Telerik.Web.UI.Scheduler.Views.Week.Model.js
              - Telerik.Web.UI.Scheduler.ContextMenu.Plugin.js
              - Telerik.Web.UI.Calendar.RadCalendarCommonScript.js 
              - Telerik.Web.UI.Calendar.RadCalendarScript.js
              - Telerik.Web.UI.Menu.ContextMenu.RadContextMenuScripts.js

StyleSheets (Seperate Requests) - 30KB
      - Telerik.Web.UI.Skins.Grid.css - Retrieved from cache 
              - Telerik.Web.UI.Skins.Default.Grid.Default.css - Retrieved from cache 
              - Telerik.Web.UI.Skins.Menu.css
              - Telerik.Web.UI.Skins.Default.Menu.Default.css
              - Telerik.Web.UI.Skins.Scheduler.css
              - Telerik.Web.UI.Skins.Default.Scheduler.Default.css
              - Telerik.Web.UI.Skins.Calendar.css
              - Telerik.Web.UI.Skins.Default.Calendar.Default.css 

Page3 - Total Requested: 8KB
JS Files (Seperate requests) - 0KB
- MicrosoftAjax.js - Retrieved from cache 
              - MicrosoftAjaxWebForms.js  - Retrieved from cache 
              - Telerik.Web.UI.Common.Core.js - Retrieved from cache
              - Telerik Web.UI.Grid.RadGridScripts.js - Retrieved from cache
              - Telerik.Web.UI.Common.jQuery.js - Retrieved from cache
              - Telerik.Web.UI.Calendar.RadCalendarCommonScript.js  - Retrieved from cache
              - Telerik.Web.UI.Calendar.RadCalendarScript.js - Retrieved from cache  

StyleSheets (Seperate Requests) - 0KB
      - Telerik.Web.UI.Skins.Grid.css - Retrieved from cache
              - Telerik.Web.UI.Skins.Default.Grid.Default.css - Retrieved from cache
              - Telerik.Web.UI.Skins.Calendar.css - Retrieved from cache
              - Telerik.Web.UI.Skins.Default.Calendar.Default.css  - Retrieved from cache  

Load Times
With Without
Page 1 0.313 0.414
Page 2 1.110 1.342
Page 3 0.362 0.285

Data Transfer
With Without
Page 1 261KB 273KB
Page 2 342KB 178KB
Page 3 206KB 7KB
Total 810KB 460KB

Summary

Total Downloaded Data with Telerik Managers: 810KB
Total Downloaded Data without Telerik Managers: 460KB

The load times are a little misleading as the test I am doing are on my local machine and are not realistic in terms of network speed and latency.  I think that in the real world where clients access your site from all over the world, the browser cache will start to have a much larger impact on the load times of pages.  In 3 simple page loads, I have already saved 350KB.  

I have all the data files here including HTTPWatch files so you can verify the results.

thanks,

Greg

[Greg]

For the Javascript, I think a compromise would be to have 2 requests.

Request 1 would contain all the MS Ajax libraries, Telerik Core Libraries and jQuery.
Request 2 would contain the Control specific javascript.

This would allow you to leverage browser caching and not have to download the large core libraries everytime.

This, I feel, would be a suitable compromise.

regards,

Greg

[Ivan Zhekov]

Hi Greg,

You are right. On small sites, or sites that are using RadControls on few pages the Script and Stylesheet managers will yield little or no performance gains; or like you have proven by tests even decrease performance.

Then again you can always not use it.

You do make an interesting point with your second comment. A point worthy of considering and implementing.

Regards,
Ivan Zhekov
the Telerik team

[Greg]

Ivan,

Thanks for the response.  I don't think the size of the site is a factor of whether this is an issue or not.  It is the number of unique control combinations within the site which is the real issue, which arguably would be more with a larger site.

Anyway,  I have tried to implement my suggestion of the two request model by essentially mimicking the following:

<asp:ScriptManager ID="sm" runat="server">
               <CompositeScript Path="~/js/3.5.js">
                   <Scripts>
                        <asp:scriptreference name="MicrosoftAjax.js" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                        <asp:scriptreference name="MicrosoftAjaxWebForms.js" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                   </Scripts>
               </CompositeScript>
           </asp:ScriptManager>

The above works fine and is half way towards what I described.  However, when I switch it to a RadScriptManager with EnableScriptCombine set to true, it doesn't work.  The MSAjax libraries are placed on the page twice, once by the composite script above and once by the Telerik Combined Script.

I have fruitlessly looked into implementing a solution but don't think it is possible with the current RadScriptManager.  A simple solution would be for the RadScriptManager to check if the script already exists in both the Scripts collection and the CompositeScripts collection.

Thanks for taking the time to answer these posts.  I do feel that the two request model would be a worthy inclusion into future releases.

If you have any thoughts on how I could implement the above, please let me know.

thanks,

Greg

 

[Ivan Zhekov]

Hi Greg,

I talked with the devs who work on the Script manager and a grouping, like the one you you suggested, is actually a goal for this Q (2012 Q1).

I can't give you yet example syntax, but expect to be something similar looking, or even extension to the current syntax.

All the best,
Ivan Zhekov
the Telerik team

[Greg]

For completeness of this post, Telerik have implemented Script Grouping which will achieve what is described in this post.

http://www.telerik.com/help/aspnet-ajax/radscriptmanager-script-grouping.html 

thanks,

Greg