RadScriptManager ScriptCombining Real World Performance

12 posts, 0 answers
  1. Kyle
    Kyle avatar
    27 posts
    Member since:
    Sep 2008

    Posted 30 Jan 2009 Link to this post

    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?
  2. SamVanity
    SamVanity avatar
    154 posts
    Member since:
    Apr 2006

    Posted 03 Feb 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Feb 2009 Link to this post

    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.

  5. Kyle
    Kyle avatar
    27 posts
    Member since:
    Sep 2008

    Posted 04 Feb 2009 Link to this post

    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
  6. Greg
    Greg avatar
    56 posts
    Member since:
    Mar 2009

    Posted 24 Nov 2011 Link to this post

    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?
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 24 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  8. Greg
    Greg avatar
    56 posts
    Member since:
    Mar 2009

    Posted 24 Nov 2011 Link to this post

    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
  9. Greg
    Greg avatar
    56 posts
    Member since:
    Mar 2009

    Posted 24 Nov 2011 Link to this post

    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
  10. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 25 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  11. Greg
    Greg avatar
    56 posts
    Member since:
    Mar 2009

    Posted 25 Nov 2011 Link to this post

    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

     

  12. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 28 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  13. Greg
    Greg avatar
    56 posts
    Member since:
    Mar 2009

    Posted 27 Jan 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017