A few days ago I read a post on Webmaster Source about Minify, ‘a PHP5 app that can combine multiple CSS or Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching.’

Being the enthusiast that I am, I decided to implement it on my blog. This post will report my experiences integrating Minify with my WordPress blog.

Installing Minify

Download Minify and upload it as a new folder under your web document root. For example:

/home/user/public_html/min/

/home/user/public_html/min/

Create a cache directory and make sure that it is writeable by apache. For example:

/home/user/public_html/min/cache/

/home/user/public_html/min/cache/

Set the “$min_cachePath” variable in min/config.php to the absolute path of your cache directory

Point your browser to this location (e.g. http://example.com/min/)

That’s it! The application is ready for use.

Features

URI Builder used for adding files CSS and JS files manually.

Bookmarklet for automatically fetching CSS and JS entries from any page (very cool!). I can just visit any one of my pages, click on the bookmarklet, and then I am brought to a page with the URI Builder all filled-in.

Integration with WordPress

Update 3/31/2009:
I wrote a plugin called WP Minify that will automatically integrate this for you. Check it out!

The best way to integrate is to setup a couple of preset groups (one for your CSS files and one for your JS files). To do so, modify min/groupsConfig.php to include all the CSS & JS files that you want to consolidate and compress. Mine looks like the following:

Next you will need to remove all references to the CSS & JS files that you have consolidated and compressed. This is probably the most painful step that you have to do as you will probably have to go through your plugins’ code and comment out lines that print CSS or JS references.

Update 3/16/09:
As Boris said in the comment thread, you can also make use of the functions wp_deregister_script() and wp_deregister_style() in your functions.php to unregister plugin JS & CSS references. If the plugin author is not using these hooks to reference JS & CSS files, they are probably using an action hook to print out the references. If that’s the case, Boris also suggested that we can use something like: “remove_action(‘wp_head’, ‘add_style_to_head_function’);” to remove any hooked functions for printing JS & CSS references. And as he said, “the only real problem is that sometimes plugin authors pack a few additional things into there as well, which you might have to add again through your own custom function.”

Test Results

Before Minify, my homepage takes an average of 6.6s to load 348.5 KB with 36 HTTP requests.

After Minify, my homepage takes an average of 5.6s to load 323.3 KB with 28 HTTP requests.

Bottom Line (or Will Minify Benefit My Site?)

It depends on the site. In my case, I was only able to save 8 HTTP requests. Minify is a great program, but I don’t think having to maintain a modified set of plugins is worth the 1 second speed boost.

Also the current WordPress framework (version 2.7) supports the functions wp_enqueue_script and wp_enqueue_style which allow plugin/theme authors to queue CSS and JS reference. It is very possible that a future WordPress version will implement a Minify-like feature which will automatically consolidate/compress CSS and JS files that queued via these wp_enqueue methods.

Of course that is just my personal speculation. If your site uses many CSS and JS files then you should definitely try out Minify to see if you are any luckier with your speed boost.

A saving of 1 second is pretty significant. Yahoo’s performance research demonstrates just how much of a difference increased page load time can make. However, even having to wait 5.6 seconds for your homepage to load is excessive. You could reduce the amount of javascript and imagery that are being loaded because > 200kb is pretty heavy.

@gareth hunt
Thanks for visiting. I will have to look into Yahoo's performance research more then.

I don't think 5.6 seconds is too long to endure. If you haven't noticed, most of my images are already displayed through image sprites (<a href="http://omninoggin.com/www/wp-content/themes/omnin…” target=”_blank”>http://omninoggin.com/www/wp-content/themes/omnin… That along with minify, I think my site is performing quite well for not having any WordPress caching plugin.

I will have to experiment with skimming my site down. Right now, advertisements are the slowest things on my site.

@gareth hunt
Thanks for visiting. I will have to look into Yahoo's performance research more then.

I don't think 5.6 seconds is too long to endure. If you haven't noticed, most of my images are already displayed through image sprites (http://omninoggin.com/www/wp-content/themes/omnin…). That along with minify, I think my site is performing quite well for not having any WordPress caching plugin.

I will have to experiment with skimming my site down. Right now, advertisements are the slowest things on my site.

@Donace
1 second is a good reduction from 6.6 seconds (15% faster), but I'm not sure if it's worth the hassle of maintaining local plugin code and having to merge it each release. For me… this doesn't take that much effort because I SVN checkout all of my plugins (makes merging upgrades easier). For other people who do straight downloading and overwriting, it will be a lot of hassle to upgrade plugins.

you could always remove the references to js and css files in plugins by removing the action of the function through your themes functions.php. that way you'd only have to do it once (unless of course the plugin author changes the function name, which shouldn't really happen) and future updates of plugins won't be affected…

Ty, you don't necessarily have to use wp_deregister_script() and wp_deregister_style(). You can do something like this as well: remove_action('wp_head', 'add_style_to_head_function');
The only real problem is that sometimes plugin authors pack a few additional things into there as well, which you might have to add again through your own custom function.

Thanks for letting us know about Web Optimizer. I checked it out and tried to install it on my new (yet to be released) blog, but I wasn't able too. Although Web Optimizer claims to do a lot more than WP Minify, integration is a bit more difficult than the plugin. I will definitely keep an eye on it to retry after few versions later.

I don't believe on any type of software because such type of software's are not accurate & all most guys are having knowledge about java script is harmful for SEO purpose, so why we are focusing to optimize java script, just remove it fromwebsite & focus on promoting website.

line 69
if (!is_admin() && !is_feed() && !defined('XMLRPC_REQUEST')) {
is wrong
is_feed was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false. (This message was added in version 3.1. but is false even before)