Controlling CSS and JS combining/minifying

Hi there,

We're looking for a way to control the process of combining and minifying CSS and JS. We found this solution on Falafel: blog.falafel.com/.../minify-your-javascript-and-css, which suggests the use of AjaxMin.exe.

We've tested this and it works, but here are a few comments:

1. We'd prefer to have the CSS and JS files configuration in Sitefinity. i.e. We'd like a tool in Sitefinity where we can click to select which files should be included in the CSS batch and which should be included in the JS batch.
2. We want to be able to add a version number to a query string to force the browser to update the files. E.g. mysite.com/.../squashed.css.
3. We also need to be able to load the raw files in debug mode and the squashed files in release mode.

Falafel's approach works well, but the limitations are that it works during design time by building the project and not dynamically during runtime. We could in fact use this approach and skip step 1, but we'd then have to be able to get around points 2 and 3 without having to constantly change code.

I've also looked at your page: www.sitefinity.com/.../tips_to_optimize_your_website_performance, but I'm not clear on how this works with non-telerik files?

Have you guys come up with better ways to do this in Sitefinity?

Regards,
Jacques

Hey Jacques,

You mean the none template styles? Or those as well?
With v5.4 the responsive design already adds a ?v= versioning to the theme based .css files.

Some form of concatenation widget that manages stylesheet widgets has already been built in a v1 form by Peter Marinov (www.sitefinity.com/.../down-under-a-new-perspective-on-building-widgets-with-sitefinity)

But combining both the theme/global and other .css files would be a whole new level.

Or you mean like general css/js that's more or less boilerplate ?

Jochem

Hi Jochem,

This requirement has arisen from the issues we face with performance and looking at any Sitefinity site you can very quickly see one of the major problems which is too many connections. (Asp.net webforms pays a big part here), but we're looking for a more permanent solution in Sitefinity. 

So in terms of which files? As many as possible without affecting the rendering and functioning of the site.

I've noticed that Sitefinity does indeed use the version query string, but what we've also noticed is that for some unknown reason, when we deploy new stylesheets to our production server and send out a link for management review, many times they don't see the changes. The only reliable way to have the changes show up seems to be restarting IIS or the application pool, which in a production environment is not a good answer. We're unsure of exactly how and when the versioning number is updated. And, if output caching is in use, we're not sure if Sitefinity is caching the reference to the stylesheet as well, which would render the version query string somewhat useless, or rather, dependent on the output cache changing.

At the end of the day we're just looking to standardize our Sitefinity implementation in such a way that it becomes easy for our developers to leverage a pre-built tool or method that will allow us to produce sites that massively reduce the number of HTTP connections, however that must happen.

Regards,
Jacques

Ah... the whole system,

Well in that case, check the attachment...
 
It's 5.4 on webforms, with jQuery, Kendo UI, Twitter Bootstrap, the responsive bits and asynchronous module loading all rolled into one optimized & standardized system.

If it's interesting let me know. We're finalizing the latest comma's but if you send me an email jochem [at] falafel.com we can talk about it more in depth...

Jochem