Combine css and js files using Minify

→ Are you a new visitor? Please visit the page guidance for new visitors ←

What is Minify?

Minify is a PHP5 script application that helps you follow several of Yahoo!’s Rules for High Performance Web Sites, it speeds up your website by combining the static resources into one and allowing your browser to download in one go, all your website css files and js files. However you need to be careful of your javascript files, I tested before, and well still am, combining javascript files can lead to them not working anymore. In most cases this is linked to missing semicolon at the end of the js file content. I found that some scripts will need for you to check that semicolon at the end of the script before combining them into one single script. In this article I’m going to show you how to can combine css and js files using Minify.

Minify has been developed for some time now by Google and have release it for all users to use it here:

https://code.google.com/p/minify/

How to use Minify?

To use Minify is actually really simple, I found myself that I can use it in real time and combine them each time on user request or use the script and combine them once and save the result in a new css-style-combine.css or js-script-combine.js file. The later one I usually recommend as you just link it to one file and that’s all.

You can download minify from here:

https://code.google.com/p/minify/downloads/list

And then once you have it, you just need to unzip it and upload it to your server. As I said before, if you wish to minify all resources each time, you can include the minify application directly inside your projects, however if not, you can upload it in a separate folder that you can browse it.

Place the /min/ directory as a child of your DOCUMENT_ROOT directory: i.e. you will have: /home/example/www/min

You can verify that it is working by visiting these two URLs:

The domain example.org is just an example domain for showing you how it works. You basically browse the /min/?f= file and concatenate all your javascript files and css files (separately of course, you can’t combine css and js together).

Ok, but you also have a simple and nice view to enlist all your files for minifying, you can visit the page:

http://example.org/min/

and a similar page to bellow should be present called Minify URI Builder:

Minify URI Builder

Minify URI Builder

In this location you just add the links to the css files of your site and to your javascript files and click “Update”. You can also change the order of the files before doing the combine, this is useful for js files where some files may be dependent on the other.

Then you can easily save the result or use the generated url inside your website. It also generates you an array to use it with Minify group config file, its useful but I usually only save the result given to a static file and include it in my website. So unless you make a lot of css changes, you don’t really need that.

Minify in Use

This was from Google code website, result is really the same, no lies in that and your website will be really happy with its optimization.

Before before minify
After After Minify

Instead of downloading a lot of files each time, you download just two files in a compressed state and minified.

Are you a wordpress user?

These WP plugins integrate Minify into WordPress’s style and script hooks to get you set up faster. It speeds up your wordpress by combining the static resources and compress them.

http://wordpress.org/extend/plugins/bwp-minify/
http://wordpress.org/extend/plugins/w3-total-cache/

I believe wp-minify is also one that can be used and relies on Minify

http://wordpress.org/plugins/wp-minify/

The first two I’ve seen great results, I recommend them to all.

That’s it for today, don’t forget to subscribe and comment below if you have questions.

Request an article ←