1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / Nitpicking Javascript: CDN, double loading, combining and defer [4.4.2117]

Nitpicking Javascript: CDN, double loading, combining and defer [4.4.2117]

4 posts, 0 answered
  1. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    29 Jan 2012
    Link to this post
    I'm way overdue on my quarterly Javascript rant, so here's the 4th installment and feel free to move on to more important issues :) 

    CDN Update
    Under Admin >> Settings >> Advanced >> Pages >> Scriptmanager >> Script references currently the most commonly used libraries are listed. However, the CDN's for jQueryUI and jQuery Validate are always omitted:
    http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js
    http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.8/jquery-ui.min.js

    For the microsoft scripts, they're still pointing to ajax.microsoft.com which has been replaced with ajax.aspnetcdn.com for over a year ago. Also I was wonder if if there is a timeframe when the Microsft Ajax beta 0910 will be replaced with the up to date release ones?

    Script combining
    When I'm loading the backend page overview, there are over 71 JS requests with a total of 552 Kb. 4 of them are bigger than 15Kb, leaving an average filesize of 4.4Kb for the remaing request with the smallest being 249 bytes.

    With a modern browser being capable of 6 simultaneous downloads and older legacy browser maxing 2, I'd say we could get a huge performance boost if some of these scripts got combined...

    Double loading
    When setting the "combine script resources" is set to "true" in the settings, some JS gets double loaded or added on the backend. This varies from 20Kb up till 80Kb on the backend.

    Script grouping
    As an extention on the previous issue, if you log in with an empty cache, you arrive at the dashboard. 
    Click 'Pages' and 609 Kb of JS gets loaded (87.2 Kb cached) with one chunk 311.7 Kb.
    Click on 'Content>News' and 591 Kb gets loaded (103 Kb cached) with one chunk 335.3 Kb.
    Click on 'Content>Blog' and 470 Kb gets loaded (162 Kb cached) with one chunk 307.3 Kb.
    Click on 'Content>Content blocks' and the one big chunk is now 309 Kb.

    Over these 4 pages I've downloaded more of 1Mb consisting of mostly the same js files. And that double loading group of JS files isn't just with content but also with Ecommerce, Design and Administration. And not only is some standard js files like jQuery, Ajax, Webforms etc but also about 40 Telerik/Sitefinity scripts.

    ---
    Another example with cold cache starting at the page overview:
    With script combining on, we're download over 1097Kb (for Page Overview + Content>News).
    With script combining off I'm downloading 610.7 Kb for those two pages (609Kb cold on the first and 1.7Kb cold on the second).
    ---

    Surely some form of 'grouping' like the example below could be enforced?

    <telerik:RadScriptManager ID="ScriptManager1" runat="server">
     <Groups>
      <telerik:ScriptReferenceGroup>
       <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
       </Scripts>
      </telerik:ScriptReferenceGroup>
     </Groups>
    </telerik:RadScriptManager>

    Even if we can't get grouping/combining working a seperate checkbox to split 'combine script resources' between front and backend would be appreciated.

    Defer loading of JavaScript
    Even if we can't get grouping/combining working can't we 'preload' some javascript for the backend? We (sorry I mean you) know exactly what Javascript gets loaded for the backend.

    To get a smoother backend usage, why not 'preload' some Javascript on the Backend login page? This is a small page, but generally one where we stay on for more than several seconds because it takes time to realize it popped up, type in the user/password and click login.

    With a simple javascript 'defer' statement, we could preload the heavy js. The longer the user stays on the page, the more js gets cached - the smoother the rest of theSitefinity experience will be. 

    Jochem.
  2. TMatt
    TMatt avatar
    104 posts
    Registered:
    06 Feb 2011
    29 Jan 2012
    Link to this post
    Nice analysis


    But with the huge usage of x JS frameworks to get something fine in HTML this is normal.

    Thanks
  3. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    29 Jan 2012
    Link to this post
    @TMatt,

    I respectfully disagree...

    73 requests with an average of 4.4 Kb file size with smallest being 249 bytes (not kilobytes) is not building an optimized set of JavaScript libraries.

    1079Kb over 2 pages instead of 610Kb over the same two pages is just not optimizing your code/files.

    The CDN issues is just me being lazy and seeing normal Ajax/AjaxWebform and the beta Ajax/AjaxWebforms loaded (I know Telerik has a dependency on the beta but still).

    It's silly for me to spend 10% of my projects time and budget at optimizing and minimizing code, images and css to give the user the fastest experience and then seeing hundreds of Kb's negate all that work - especially since most of it is unnecessary.

    J.
  4. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    30 Jan 2012
    Link to this post
    Dear Jochem
    Reminds me a lot of this thread http://www.sitefinity.com/devnet/forums/sitefinity-4-x/bugs-issues/script-combining-a-bad-idea.aspx 

    I am sure with you on this one. I started to build my own rad menu css files instead of using stylebuilder because you can save there a lot as well.

    Any idea to make SF faster is welcome an appreciated. Thank's for taking the time for this testing.
    Markus
4 posts, 0 answered