We all know that javascript and CSS can cause some quite heavy bandwidth usage on your website. Fortunately, there are many ways you can decrease this load in web design.
Today I will be discussing the use of Minify; a very easy to use tool that will combine, compress and cache your javascript files or CSS files.
Requirements
This method requires your hosting to use PHP5 and it also requires you to have FTP access.
Download Minify
Firstly you will need to download the latest version of Minify; at the time of writing this the latest version is 2.1.3.
You can download it from here.
What to do With your Download
Now that you have downloaded a zip of minify, you will need to extract it to a folder. Inside you will find a bunch folders, the most useful of these folders being the ‘min’ folder.
You will need to upload this folder to your website (I uploaded it to the root: http://www.example.com/min, but you can upload it anywhere really).
Now you are ready to start minifying!
How to use Minify
Now that minify is uploaded to your domain, all you need to do is browse to the folder, e.g. http://www.example.com/min.
Here you will be greeted with a ‘Minify URI Builder‘. This is where you will input your existing, locally hosted, javascript or CSS files.
At first you receive this message at the top ‘Note: Please set $min_cachePath in /min/config.php to improve performance.’
This is a step that you will have to do in order for Minify to perform properly. Open the file /min/config.php and go to line 43. You will notice that it exists but it has been commented out. Un-comment this line and set the path to your cache; the default is ‘/tmp’. This directs it to a folder called tmp in the root of your website. You will need to manually create this folder and give it file permissions of 777.
Once you have done this, when you refresh the ‘Minify URI Builder‘ page, the message should have disappeared.
You are now completely ready to start minifying your javascript and CSS files.
Say for example I had the following javascript files in my <head> tags:
<script src=”js/jquery-1.4.2.js” type=”text/javascript”></script>
<script src=”js/jquery.scrollTo-1.4.2.js” type=”text/javascript”></script>
<script src=”js/jquery.localscroll.js” type=”text/javascript”></script>
<script src=”js/jquery.serialScroll.js” type=”text/javascript”></script>
All I would need to do is enter the path to these files on the Minify URI Builder‘ page. So, under where it says ‘Create a list of Javascript or CSS files (or 1 is fine) you’d like to combine and click [Update].’ enter the path to your first file and click ‘Add file +’ to add more. Each one should get a tick next to them if the path is correct.
Once you have entered all your javascript files (note: You can only combine files of the same type, so you will need to do javascript files first and then CSS files separately.), you will need to click ‘Update’. You will then be presented with a Minify URI. Copy and paste the HTML Code that is generated, and replace every script src in your <head> tag with this new HTML, so the <script> in your head will look like this:
<script type=”text/javascript” src=”/min/b=js&f=jquery-1.4.2.js,jquery.scrollTo-1.4.2.js,jquery.localscroll.js,jquery.serialScroll.js”></script>
That’s pretty much all there is to it. Now when you load your page it will combine, compress and cache all your javascript files serverside, and considerably speed up your load times. The same can be done for your CSS files.
Bear in mind that you don’t have to do this with multiple files, you can compress and cache single files too!
File Size Comparison
To show that this technique is useful, here is my document information for the example before and after:
This Image Shows the Document File Size Before and After using Minify.
This Image Shows the Document File Size Before and After using Minify.
Conclusion
As you can see, using Minify has Considerably Decreased the file size of the website, as well as increasing the page load speed.
This is a great little tool and I hope you get some good use out of it, as I have done. If you know of any other page speed tips, then please share them below.
With Google now looking at load speed as a factor for SEO purposes anything to speed up the loading of sites is a good thing
Very true, and there are some very good methods to speed up your site. Yahoo lists a variety of good methods here – http://developer.yahoo.com/performance/rules.html