Combine, minify and compress JavaScript files

This is a forum to suggest new features for mojoPortal. 

This thread is closed to new posts. You must sign in to post in the forums.
8/26/2010 11:36:15 AM
Gravatar
Total Posts 156

Combine, minify and compress JavaScript files faster page load.

Joe,

I've noticed that mojoPortal pages load quite a few JavaScript files.  With more files added by my custom modules, it quickly adds up.  Have you ever considered combining, minifying and compressing javascript files in order to achieve better performance?

Here's a couple of articles on the topic:

http://atashbahar.com/post/Combine-minify-compress-JavaScript-files-to-load-ASPNET-pages-faster.aspx
http://www.codeproject.com/KB/aspnet/HttpCombine.aspx

8/26/2010 1:43:24 PM
Gravatar
Total Posts 18439

Re: Combine, minify and compress JavaScript files

Keep in mind that javascript files and other static content are cached by the browser on the first request and then not requested again. So we're really talking nano optimization for first requests by new visitors here. By default we load the jquery scripts from the google CDN which means it can be cached already if a new visitor visited another site that uses the google cdn for jquery.

About a year ago I spent a week trying to accomplish this and I looked at a lot of articles and solutions but each one introduced problems more than it solved. It all sounds easy in theory but in a complex web app where different pages need different variations of script and users can also plugin their own from custom code, and various ajaxcontrols add their own if they are used on a page it becomes a much more challenging problem. 

So we're talking about a very difficult solution to implement a very minor improvement with a high risk of side effects. There are a lot more fruitful things to work on.

Best,

Joe

11/10/2010 4:32:43 AM
Gravatar
Total Posts 1

Re: Combine, minify and compress JavaScript files

I too noticed that mojoPortal loads a _lot_ of JavaScript files.

I agree with Joe that the browser loads the JavaScript files in its cache. However, studies by the team at Yahoo have shown that when someone returns to a site, those files will have been evicted from cache during visits to other sites. So when someone hits your home page, the files need to be reloaded. All the individual requests do make a difference in how snappy the site feels.

I appreciate that managing all the combinations of JavaScript files to be combined and minified, etc. is a challenge. However, a package such a CombineAndMinify handles all this on the fly. It looks at the head section of a web page after it has been generated by ASP.NET, so it will deal with plugins, etc. as well. And it is very easy to add to the site (add a dll and modify the web.config). It is at:

http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx

 

 

11/10/2010 7:34:10 AM
Gravatar
Total Posts 18439

Re: Combine, minify and compress JavaScript files

Hi,

As I said before, I spent at least  a week trying to implement combining and minifying of scripts and I read a lot of articles and they all sound easy but in fact when you have a cms with composable pages where each page may need different scripts it is very problematic. 

Anyone who feels they can really solve this problem I say go for it and give it a try, if you succeed I will salute you. But before you declare success be sure you test every feature (in every major browser) and also consider the impact on custom features that others may have developed for their own needs. I worked very hard to try and do this but I found it to not be feasible. It is quite easy if you know exactly what scripts will be needed in a page but in a cms with composable pages including content of unknown features you don't. Also many of the script references come from the asp.net runtime and have urls like ScriptResource.axd?... because the script comes from embedded resources in an assembly instead of static script files.

So even if you figure out a way to combine all the scripts needed for a given cms page, you end up needing to do it different for each page since there may be variations in the needed scripts so you lose the benefit of caching in the browser because you would need a different combined script for each page. You might think you could figure out all the possible scripts needed in the whole site and combine that into one script, but that will not solve it if additional scripts are needed in custom features (nor will it solve the embedded resource scripts) and it would result in one large script file that includes many  things not needed on many pages. Then there is always the consideration of how expensive is the processing to do the combining and minifying and does that create a performance hit that offsets and benefit. So one needs to do both measuring of page load speeds before and after applying any such techniques as well as load testing to make sure it does not degrade the number of requests per second that the server can handle by adding this extra processing.

The specific article you pointed to only handles scripts that are loaded in the <head section which is basically none of the scripts in mojoPortal. So there is nothing helpful or new in that article.

So it is a huge challenge (translate as very expensive) that can result in some micro optimizations for page loading if you succeed (little bang lots of bucks). It may be possible for Yahoo and Google to do this kind of thing because they have a lot of expensive developers at their disposal and in their cases it is justified to spend that kind of money micro optimizing page speed due to the sheer amount of traffic they receive and the money they make.

Best,

Joe

11/20/2010 8:30:13 AM
Gravatar
Total Posts 18439

Re: Combine, minify and compress JavaScript files

fyi, though we cannot combine and minify all the javascript for reasons previously stated, I was able to combine at least a few more of them and improve my YSlow score to 87 for our home page. Note that the score should  really be higher but YSlow does not recognize the google ajax cdn by default so it doesn't give us a good score for using a cdn. You can configure it to recognize the cdn and it will give a little better score.

I also combined the jqueryUI css using style.config instead of loading it separately from the cdn and I combined a few of my images like the social icons in the footer into a css sprite using this free online tool:

http://spritegen.website-performance.org/

Best,

Joe

11/22/2010 1:41:17 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Combine, minify and compress JavaScript files

That's great news, Joe. I really appreciate all of your efforts to make mojoPortal as sleek as possible, while still providing the great flexibility!

Jamie

12/1/2011 9:11:11 PM
Gravatar
Total Posts 3

Re: Combine, minify and compress JavaScript files

I found Chirpy a while back and it works great for combining, minifying, compressing and obfuscating both JS and CSS files.

I also use it to pre-compile/parse my LESS files (for CSS).  I find this works better than relying on runtime parsing when using IIS.

It's a VS plugin, but also has a standalone console application.

http://chirpy.codeplex.com/

You must sign in to post in the forums. This thread is closed to new posts.