Is that even a word? Be that as it may it is very important if your trying to optimise your website.

Essentially minification is the process of making your code as small as possible, to speed load times. Mostly when you talk about minification we are talking about CSS and Javascript, even more specifically seperate files downloaded by web pages.

If your not using js and css files to share common code between pages, then do so! Sorry! Not only does this allow one change to effect all pages at once , but you also get much more control over the loading as opposed to in-line (on page) code. Which i'll come to in a future article.

There are many minification routines out there some that just remove white space, some that actually take your code and process it to make it much more efficient but infinitely less readable (shared classes, multiple references etc). A word of warning though, the more savings made the more you have to be careful of the minified code not working the same as the original code. I tend to go for the safe option of the removal of unnecessary white space and try to work the efficiency myself. Even using the above I see dramatic savings in file sizes.

An advancement of this process is to make it so that each page only uses one CSS file and one JS file. This prevents excessive Httprequests being sent from the users browser.

I set up my directories as follows. I have a Scripts directory which contains a JS folder and a CSS folder. Each of these folders has the sub folders src, mini, build, and ref.(oh and yes that was an oxford comma.) In src we hold the original easily read files in the original devleopment phase this is all we need. In build we hold the collected files ( where we add src files to make one file). In reference I hold an xml file that holds details of which source files map to which build file.

As you can see the build file PlanForm_build is made from Forms_src, Plans_src, DynamicTabbedTable_src, and CreateTable_src. Its not really necessary but it does come in handy when you leave a project for some time to know what files link to which on your return. Which brings us to the mini which is where you put the minified versions of your build files.

My recommendations are JSMin, and CssMin which apparently is no longer avaliable(if anyone asks i'll post the file with instructions). YUI compressor comes highly recommended but I haven't personally used it.

For me one of the biggest improvements you can make is adding expires headers where necessary. Lets reiterate that point. Where necessary!!!

A quick explanation, modern browsers cache files so that they don't have to be downloaded every time. That isn't the end of the story without an expires header the browser will still check if a new version of the file exists. Say you have 5 javascript files, 5 css files, 40 png images. Thats 50 unnecessary http requests and, lets be honest, unless you have gone to town on your optimisation the above is quite a simple page.

Expires headers tell your browser that a file is valid until a certain date. So your browser does not check for new versions until that date is reached. If we set them correctly the page above will make no unnecessary httprequests and because of that be a lot faster at loading.

Superb, so lets go crazy with adding them than....no! The expires header strategy has some pretty major impacts on your development. Any changes that you make to the file before the header expires will not replace those already on users browsers. The obvious solution to this is to use versioning in your file names. Change the file name from test_1_0_1.js to test_1_0_2.js and the browser sees it as a new file a downloads it, you do have to remember to change any referencing code as well. Also what about images that are user/admin changeable you have to make sure that these files a versioned as well. As you can see for some projects this is a lot of hassle to make a speed saving, so its important to only use Expires Headers where necessary. Phew!

Ok onto the meat and bones of it how do we implement in Java Spring. Simple first off add the following class to your project.

So all files passed through the filter that don't have the structure words nocache (i.e test.nocache.js), will be stamped with a far future Expires header.

Now in your web.xml set up your filter. As in the example below.

As you can see all the files in the jquery, images and scirpts folders will be passed through the filter.

Well I hope this helps someone.

I am currently undertaking a process of speed optimising of Spree4.com. This is a process I have been through a few times. I thought I’d detail the steps I go through in the hope it might help someone else. Be warned some of these steps and most of the examples are specific to Hibernate and Java Spring.

1. Lazy loading.

If your using a persitance module (eg hibernate) and aren’t using lazy loading, this may explain any slow responses from your code. If you aren’t careful the code you trigger to retrieve one object may retrieve the entire database to memory. The ease of implementing lazy loading is very dependant on the language, module, framework etc you are using. In java struts using hibernate and xml config files, its easy. In Java spring , using hibernate and annotations not so easy.