Subscribe via

Minify (CSS and Javascript Optimizer) Review

Thaya Kareeson

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

  1. Download Minify and upload it as a new folder under your web document root. For example:
    /home/user/public_html/min/
  2. Create a cache directory and make sure that it is writeable by apache. For example:
    /home/user/public_html/min/cache/
  3. Set the “$min_cachePath” variable in min/config.php to the absolute path of your cache directory
  4. 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.Minify URL Builder
  • 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.
    Minify Bookmarklet
  • HTTP request API for retrieving CSS & JS files as a group.
    Minify Standard Url
  • Ability to preset groups of CSS & JS files for simpler CSS & JS references
    Minify Group URL

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:

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.

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.
    OMNINOGGIN Before Minify GraphOMNINOGGIN Before Minify Stats
  • After Minify, my homepage takes an average of 5.6s to load 323.3 KB with 28 HTTP requests.
    OMNINOGGIN After Minify GraphOMNINOGGIN After Minify Stats

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.

Save and Share
StumbleUpon
Reddit

30 Responses to “Minify (CSS and Javascript Optimizer) Review”

[go to last comment]
  1. Dennison Uy

    I agree that for this blog Minify may not be worth the hassle. What program did you use to test your website speed — the one in the screenshots? I like it.

  2. Thaya Kareeson

    @Dennison Uy
    Thanks for visiting. I used the tool at tools.pingdom.com.

  3. gareth hunt

    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.

  4. Donace

    I have to agree with the above commenter and disagree with you! 1 sec is loads of time! and the reduction of http requests is also a great percentage.

    Then again I am from the class of thinking any speed boost is a good speed boost! Will have a look at the coding in here and give it a quick test on my site :p

  5. Thaya Kareeson

    @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.

  6. Thaya Kareeson

    @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 (

    @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.

  7. Boris

    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…

  8. Thaya Kareeson

    @Boris
    That is an awesome idea! I can't believe I didn't think of that. The only issue now is that a lot of plugin authors still do not use wp_enqueue_script or wp_queue_style :(.

  9. Thaya Kareeson

    @Boris
    That is an awesome idea! I can't believe I didn't think of that. The only issue now is that a lot of plugin authors still do not use wp_enqueue_script or wp_queue_style :(.

  10. Boris

    Thaya, 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.

  11. Thaya Kareeson

    @Boris you are full of good ideas. I haven't used those functions myself so I didn't know they existed. I will update this post. Thank you!

  12. Jack

    Thaya, This is great post. I'm implementing this for my blog. A quick question. If the plugin is using wp_enqueue_script( 'alias' );, then how do I undo it in functions.php?

    Thanks.

  13. Thaya Kareeson

    You can do something like this in functions.php:

    function deregister_js() {
    wp_deregister_script('alias');
    }
    add_action('wp_print_scripts', 'deregister_js');

    I suggest you stay tuned by subscribing to the RSS feed though. I am working on a plugin to do this for you :).

  14. Mack

    For people who download and overwrite, it will be a lot of hassle to upgrade plugins.

  15. sunnybear

    There is free plugin to compress and merge all CSS/JS files 'on fly' (also with CSS Sprites, data:URI, etc, etc) – Web Optimizer, http://code.google.com/p/web-optimizator/

  16. Thaya Kareeson

    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.

  17. Johar

    I use script compressor in my website, is this more good than script compressor ?

  18. Thaya Kareeson

    Never tried script compressor, but it sounds like script compressor only consolidates things in the header of the page, and not from the entire page (unlike WP Minify).

  19. Boosted my Landing Page load speed rating from 61/100 to 71/100 (using firebug and page speed with firefox)
    So far is compatible with all my other plugins incl. Shopp V 1.0.17 & using WP V 2.9
    My Google Adwords campaign had recently been penalised for slow loading landing page, lets hope this keeps the Google Monster off my back!
    By the way – Script Compressor did virtually nothing for my website.
    Many thanks!

  20. Will Robinson

    This seem like a great tool. I wonder can I use it with blogger.com? I really need it bad. My site really load slow as molasses.

  21. Thaya Kareeson

    Unfortunately, this will only work if you host your own site :(.

  22. Artesano

    So far is compatible with all my other plugins incl. Shopp V 1.0.17 & using WP V 2.9

  23. fxgeorges

    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.

  24. Morgan

    If you build your own site in ASP.NET, all the minification and combining can be done automatically with this: http://www.codeproject.com/KB/aspnet/CombineAndMi…

  25. Tomas Kapler

    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)

  26. Leo

    “I can then place the following into the tag in header.php:”

    The code is missing in this post. What am I supposed add in my header file?

  27. Ken

    Thanks for the great info,I have been using tools.pingdom.com a long time,Its quite cool.
    Thanks for your share!

  28. Henrik Wivel

    Hi

    Where can I find information on how to uninstall the plugin ad whatever hooks it registers?

  29. Henrik Wivel

    SOLVED: My new hosting provider has a caching system activated by default. When I deactivated this, everything worked like a charm.

[go to first comment]

Leave a Reply