Javascript optimization

I know this is the 3rd Javascript installment I’m bugging about, but kudos to you guys for an amazing job on SF v4.2 speed and improvements! I love it, it’s fast, it’s solid and can’t totally be compared to the older versions no more.

I’m just being a perfectionist looking for some trouble so…

Double loading of scripts
When using RadControls (standard navigation menu sf widget) it still loads the Telerik WebUI version of jQuery, but the same jQuery library is also loaded as part of a scriptResource.axd. As previously (http://www.sitefinity.com/devnet/forums/sitefinity-4-x/bugs-issues/javascript-issues-4-0-1210-0.aspx) stated by Radoslav, it is necessary to make sure the RadControls have the right version present.

Can’t SF just check the version ( $().jquery; or jQuery.fn.jquery; ) and if versions are the same or Sitefinity version is less than Web.UI version not load jQuery twice?

Also, if I’m not completely mistaking, Microsoft.Ajax.js and Microsoft.Ajax.Webforms.js is double loaded when using RadControls no? I see ‘orginal’ versions coming from Telerik.Web.UI.Webresource.axd and others from a ScriptResource.axd

If we minimize the non minified scriptresource.axd left, we’d save ourself easily 100Kb. I know 100Kb is nothing but with a couple of thousand unique pageviews we’re talking about hundreds of Mb bandwith …

Combined script marshaling.
 When using combined scripts to get the most optimized result, a lot of scripts don’t get cached because of a different combination of packing them together.

Couldn't we create some marshaling option in the BackEnd or have some smarter combining?

Imagine page A having a menu, a search box and some text. Imagine page B have the same menu but a news overview. Just because page A has a search box and B doesn’t the following list of scripts don’t get cached:

Telerik.Sitefinity.Resources.Scripts.jquery.validate.min.js
Telerik.Sitefinity.Resources.Scripts.jquery.cookie.js
Telerik.Sitefinity.Web.SitefinityJS.Telerik.Sitefinity.js
Telerik.Sitefinity.Web.SitefinityJS.Utility.Querystring.js
Telerik.Web.UI.Common.Core.js
Telerik.Web.UI.Common.jQuery.js
Telerik.Web.UI.Common.jQueryPlugins.js

I think it’s fair to say that all these scripts will be used around a website build with Sitefinity… These are the basic Sitefinity scripts and RadControl script. One combined scriptresource.axd with all the general scripts easily saves 100Kb on every subsequent  browsed pages.

This feature could be done by either an Administration > Advanced > Pages> ScriptManager option where Administrators can manually set the ‘core’ scriptresource.axd or it could be automatically done by Sitefinity out of the box.

Intelligent scriptloading based on Masterpages.

By combining stuff that is used in templates you can further increase caching and minimize downloads. For instance if RadMenu and Search boxes are used in Masterpages, you can group:

Telerik.Web.UI.Common.Scrolling.ScrollingScripts.js
Telerik.Web.UI.Common.Navigation.NavigationScripts.js
Telerik.Web.UI.Menu.RadMenuScripts.js
Telerik.Sitefinity.Web.Scripts.Url.js
Telerik.Sitefinity.Services.Search.Web.UI.Scripts.SearchBox.js
Telerik.Sitefinity.Services.Search.Web.UI.Scripts.SearchBox.js

Now with only 2 scriptresources we have 80% of the scripts cached throughout the website and available for longterm caching.  

Splitting them up into 2 ‘base’ javascript request and subsequent page independent requests might seem in contradiction to ‘combining scripts’ but the fact that we’re downloading 100-200Kb of scripts for each page while we already downloaded them totally negates the benefits of combining scripts and totally makes caching useless.

Jochem

You got my vote on this 100%. Did not test it now in 4.2 but before it was simply a bad idea to combine scripts.

http://www.sitefinity.com/devnet/forums/sitefinity-4-x/bugs-issues/script-combining-a-bad-idea.aspx

Markus

I think the problem with the two jQuery versions is that everything in the radcontrols uses

$telerik as a prefix, where the rest of sitefinity uses the standard jQuery or $....

So since they can't strip out the $telerik version, I'm not sure what the workaround would be...maybe convert $telerik back to $ for us?

...but yeah, a bit wasteful

*** AND THE RADCONTROLS SHOULD MINIFY CSS *** (hijack)

@Markus,

Didn't see that post in June sorry, would have replied to it considering my 2 previous ramblings about it. 
Seeing the same though, combined the scripts are larger, but the amount of requests is to high for me, so I combine them.

CDN would be great option, but just for Ajax & jQuery and since we already double loading them, haven't dabbled with them, I do now however that with regular Microsoft CDN and Ajax framework aren't fully localized so not sure how that will affect Sitefinity. (http://stackoverflow.com/questions/5885974/localized-microsoft-ajax-cdn-reference-not-working-in-asp-net-webforms)

---
@Steve,

Well the ideal situation would be for the Sitefinity team to have a pow wow with the RadControls team.  With Microsoft making jQuery and intricate part of the .NET framework and forcing NuGet packaged jQuery and updates on us, it's time the RadControls team revise their strategy.

As stated on the RadControls forum: "We have not modified the implementation of jQuery in any way. We have just appended a few more lines of JavaScript at the end of the file in order to avoid any version conflict and to include a few useful jQuery plugins." 

Two years ago, embedding jQuery made sense, these days both inside Sitefinity development aswell as outside (just RadControls) its a nusance.

And it's not that they would have to totally redo the entire suite... leave the easing and throttle plugins there and build a translator the other way around. Put a huge disclaimer on top of the next Q Release that jQuery no longer is embedded and everyone's happy.

Both RadControl developers aswell as Sitefinity developers don't double load no more, are more flexible with regards to jQuery versions coded against and even Martin could be proud of the gained speed and loadingtimes :)

Yeah I wonder if there could be a web.config entry to disable the loading of the embedded jQuery...I'd like to kill it in a BUNCH (every) of projects.  I'd rather it serve from a CDN which everyone uses rather than an axd everytime.

@Steve

So what happens if you add the following to your web.config ?

    
<!-- Disables the embedded scripts and skins for all RadControls --

Haha,

Well here I thought I'd found I found the perfect fix for you, no combining and no double loading and by manually adding the DIY-minified RadControls scripts you'd live happily ever after :)

Hello Jochem,

Steve is correct in his observation about the scripts. If you disable them and not add them manually as described in the article he linked to you risk breaking your whole website's UI.

Regards,
Radoslav Georgiev
the Telerik team

Hey Radoslav,

Sorry those last comments were more meant sarcastically for Steve, since he wanted to ban all combined scripts and wanted to further minify the RadControls scripts/CSS...

J.