[script combining ]Serving a single response for Css and JavaScript Files

Jun 24, 2011 at 3:35 AM
Edited Oct 24, 2011 at 6:28 PM

I am noticing that BlogEngine by default is serving lots of JavaScript and CSS files

Website Test: http://www.webpagetest.org/result/110624_VB_X7TZ/

Is there a way to just have it serve one file of each CSS and JS?

This is slowing down PageLoad time alot.

 

Issue: http://blogengine.codeplex.com/workitem/12141

 

Have anybody got this to work in BE 2.0 below?

 

From: http://madskristensen.net/post/Performance-tuning-tricks-for-ASPNET-and-IIS-7-e28093-part-2.aspx

The folder convention supported in the FileBundleHandler lets you reference a folder instead of just a file. Both the HTTP handler and the BundleHelper.InsertFile understand when a folder is referenced and automatically bundles all the .js or .css files to a single response. So in order to bundle all the files in a given folder, simply reference the folder name and add the extension of the types of files you want bundled. Having the folder structure above, you can add a bundle like so:

<script type="text/javascript" src="<%=BundleHelper.InsertFile("/scripts/common.js") %>"></script>

Notice that the file /scripts/common.js doesn’t exist, but the folder /scripts/common does. By adding .js at the end, we tell the HTTP handler to look for all files with the same file extension – in this case .js files.

It bundles all the files in alphabetical order and serve the as a single response.

For security reasons, the HTTP handler will only serve .css and .js extensions.

 

 

I have tried using this code in the post above in BE 2.0  could not get it to work.

The .css and .js handlers are embedded in multi-able locations within BE 2.0.

 

Have anybody got this or something similar to work?

 

Thanks,

 

Brian Davis

Java Blog

Coordinator
Jun 24, 2011 at 6:23 AM

I agree that bundling them would be ideal.

One thing that needs to be watched out for (by testing) is making sure that pre-minified files still work when they are bundled together.  I've seen problems where if you try to either minify a pre-minified file, it can lead to errors, and sometimes when you combine scripts you need to preface each script with a semi-colon in case the previous script did not end with a semi-colon.  Little things like this that just need to be tested.

I haven't tried using the one from Mads or another one with the BE scripts/stylesheets, but I agree we should do that.  For the JavaScripts, a large number of them are coming from the SyntaxHighlighter.

One thing that needs to be addresses for the script combining to work well is that we currently have a single process in the BE Core that outputs/injects the scripts in the Scripts folder.  But then extensions like the SyntaxHighlighter and MediaElementsExtension (maybe others) are injecting their scripts by themselves into the page without using the existing process in the BE core.  So in order to really get this working well, I think these extensions need to call this existing function in the BE core to have their scripts injected, and probably allow all extensions and code to "register" their scripts with the BE core function ... and then at the end (maybe PreRender), the BE core can take all those scripts, combine them and inject them as a single <script> tag.

Jun 24, 2011 at 7:24 AM

So is the  BlogEngine.Net development team going to work on this issue in the future?

 

We currently have a single process in the BE Core that outputs/injects the scripts in the Scripts folder.

Where at in the core does this takes place? 

 

Also what about using some CDN's to load the .js files?

Microsoft  [and/or] Google

 

http://www.asp.net/ajaxLibrary/cdn.ashx

http://code.google.com/apis/libraries/devguide.html

 

This way these files being "mini" BE won't have to deal with them and risk problems like you stated before.

 

"Loading commonly used jQuery files from CDN is always appreciated. Loading these files from a CDN improves the page loading speeds in a variety of ways."

From post: http://www.uncommentedcode.com/category/JavaScript.aspx

 

Coordinator
Jun 24, 2011 at 9:01 AM

There's a couple of related functions in the BE core for this.  The main one I think is AddFolderJavaScripts() in Utils.cs.

CDNs are good -- without question.  However, combining without using a CDN might be more efficient.  For example, let's say we have (a) jQuery, (b) jQuery Validate, (c) Syntax Highlighter that are scripts used by BE, and lets say there is a CDN URL for each of these 3 items.  If we used the CDN, that would be 3 <script> tags -- one <script> tag for each CDN script.  However, if we combined all these scripts within the blog, we could reduce this down to one <script> tag.  One of the things we're trying to accomplish here is reduce the number of <script> tags by combining.  The CDNs don't really help with that.  They help with helping to ensure that when someone gets to your site, they might already have the script cached in their browser since they've been to another site that is also using the same CDN.

In our case, as I mentioned before, one of the main culprits is the Syntax Highlighter which looks like it has 8 separate <script> tags and 3 <style> tags.  Plus we have a few other <script> tags where there is probably not a CDN available -- for example, jquery.cookie.js, json2.js, jquery-templates.js.

An ideal solution might be a combination of CDN and combining.  CDN could be used for jQuery and other scripts where a CDN is available, and BE could combine the other scripts to produce a single <script> tag.

Jun 24, 2011 at 9:35 AM

 

An ideal solution might be a combination of CDN and combining.  CDN could be used for jQuery and other scripts where a CDN is available, and BE could combine the other scripts to produce a single <script> tag.

 

Sounds good :)

 

Any tips on how to combine the .js and .css files for BE 2.0 ?

 

I have a site that I am trying to speed up and not planning on upgrading to BE 2.5 anytime soon.

What ways or tips can you give me to combine in BE 2.0 ?

What all files are involved with .css and .js?

Thanks,

 

Brian Davis

Coordinator
Jun 24, 2011 at 7:37 PM
Edited Jun 24, 2011 at 7:41 PM

I'm planning to look into using squisher library after 2.5 released, preferably for all compression needs. Should simplify things a little bit. If I remember correctly, we used to compress js but ran into lots of issues and eventually dropped it.

You can try using it with 2.0 too: http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

And SyntaxHighlighter can be autoloaded which if I understand it correctly suppose to load only brushes needed for any given page. Also on to-do list :)

http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html

Sep 8, 2011 at 2:09 PM

some more thoughts on improving client side performance..

combining is a great idea, but is it also possible to tell blog engine not to reference those jquery, jquery.cookie, jquery.validate, jquery.template and json2.js. I have been working on a minimalist theme and it doesnt use any of those javascripts. Having an idea to turn it off would definitely be a good idea. But it should reference it in admin pages.

i'm not sure why jquery is needed for blog engine, but i guess it is for editing widgets and so on. so it might be best if BE would reference jquery and other js only if we are logged in as admin/editor. For anonymous users it wouldn't make any sense to download unnecessary javascript files.

and also an option to disable adding global.css. Coz i override everything using site.css from my theme.

+1 for SquishIt. The only problem is it doesn't support gzip/deflate out of the box.

Sep 23, 2011 at 3:21 PM

Here is another bundling library from Microsoft. http://nuget.org/List/Packages/Microsoft.Web.Optimization