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/
- Create a cache directory and make sure that it is writeable by apache. For example:
/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.
- HTTP request API for retrieving CSS & JS files as a group.
- Ability to preset groups of CSS & JS files for simpler CSS & JS references
Integration with WordPress
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:
return array( 'js' => array('//wp-content/plugins/fun-with-sidebar-tabs/js/script.js', '//wp-content/plugins/contact-form-7/contact-form-7.js', '//wp-content/themes/omninoggin/onload.js', '//wp-content/plugins/wp-greet-box/js/functions.js', '//wp-content/plugins/wp-greet-box/js/onload.js'), 'css' => array('//wp-content/themes/omninoggin/style.css', '//wp-content/plugins/contact-form-7/stylesheet.css', '//wp-content/plugins/friendfeed-activity-widget/widget.css', '//wp-content/plugins/wp-note/style.css', '//wp-content/plugins/wp-pagenavi/pagenavi-css.css', '//wp-content/plugins/wp-syntax/wp-syntax.css', '//wp-content/plugins/anti-adblock/css/style.css', '//wp-content/plugins/wp-greet-box/css/wp-greet-box.css') );
I can then place the following into the <head> tag in header.php:
and the following near the end of footer.php:
<script src="/min/g=js" type="text/javascript"><!--mce:0--></script>
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.
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.
This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.