Dependency Minification for WordPress: Automatically Concatenate and Minify Scripts and Stylesheets

photo credit: PetitPlat - Stephanie Kilgast - cc
photo credit: PetitPlat – Stephanie Kilgastcc

If you’re obsessed with improving your site’s loading time then you’ve probably already looked into caching and server optimizations. Frontend optimization is often further down on the list but can have a tremendous effect on performance. One of the most common frontend optimization techniques is to concatenate and minify your resources, which reduces the number of requests as well as the file size of the resources requested.

The process of “minifying” eliminates wasted space in the scripts and stylesheets, which makes them much smaller and able to load faster. Combining (“concatenating”) multiple scripts reduces the number of requests, allowing you to download more assets in parallel to speed things up.

Dependency Minification is a plugin that will automatically concatenate and minify scripts and stylesheets for you. It’s a reincarnation and rewrite of the X-Team’s popular Optimize Scripts plugin, which is now officially retired.

Dependency Minification grabs scripts and stylesheets that have been added via wp_enqueue_script and wp_enqueue_style and automatically concatenates and minifies them into logical groups using WP-Cron. When you first install it and visit the settings page, you’ll see a notice:

There are no minified dependencies yet. Try browsing the site.

After you browse the frontend (which activates WP-Cron) and then visit the settings page, you’ll see that the process of minifying and concatenating resources has begun:

dependency-minification-settings

How do you know it’s working? In addition to the information on the plugin’s settings page, you can view the source of your site. Minified and concatenated dependencies will appear in your code with /_minify/ in the path similar to this:

<script type='text/javascript' src='/_minify/wp_favico_js,wp_favicon_js,previewloader,pinterestRSSjs,yumprint-recipe-post,flexslider.df2e3e1be0c951f4cf3ea0932200f96c.314e77c0b7be97ba8913570dcc5ada67.js'></script>

Mouseover any group of dependencies on the settings page and you’ll see three options:

script-options

  • Expire – Expire this item to gracefully regenerate
  • Purge – Purge item from cache (deletes immediately, not often recommended)
  • View Minified – View minified dependencies in a new window

The minified sources are stored in the wp_options table, which means that no special filesystem access is required. The plugin also includes a filter to exclude dependencies that you don’t want to be minified. A few other important things to know about the plugin’s features and how they can be customized:

  • Endpoint for minified requests is at /_minified, which can be configured.
  • Dependencies hosted on other domains are excluded by default, but this behavior can be changed by filtering the default_exclude_remote_dependencies option via the dependency_minification_options filter, or on a case-by-case basis via the filter previously mentioned.
  • Stale minified scripts and stylesheets remain until replaced by refreshed ones; this ensures that full-page caches which reference stale minified sources won’t result in any 404s.
  • Transforms relatives paths in stylesheets (e.g. background-images) to absolute ones, so that they don’t 404.

WordPress super admins will be glad to know that Dependency Minification is also multisite-compatible. If you want to use it on a multisite network, the plugin’s instructions advise you to install and activate scribu‘s Proper Network Activation plugin before activating it network-wide.

The Dependency Minification plugin is supported by a large group of experienced developers who continue to improve it. They have built a decent amount of flexibility into the plugin with several filters that allow you to control and tweak its default behavior. If you don’t need to modify how it works, the plugin is pretty much plug-and-play. It provides a quick and simple way to concatenate and minify resources on your site, without a ton of options to configure.

33 Comments


  1. I often wonder whether or not it makes sense when themes minify their scripts and stylesheets by default. Generally, it seems good practice (as long as an unminified version is provided alongside), but once you have any other plugin enqueuing a script or stylesheet and it’s not minified, there goes your page speed metric — not to mention minification obviously doesn’t save you any HTTP requests. In short, thanks for the post, I might try this.

    Report


  2. Looks pretty nifty. The fact that its tackling quite a bit of delicate work and it hasn’t been updated in close to a year makes me a little nervous though.

    Guess I’ll have to try it out.

    Report


  3. The only thing I am curious about is the decision to store the concatenated / minified source in the wp_options table.

    I wonder what the speed is on that vs. actually writing to files where a CDN can actually see them and cache them. Anyone have any insight there?

    Report


    1. You can use a CDN to cache a dynamically generated file too, so that issue is somewhat moot.

      Report


      1. Perhaps I didn’t word my question clearly… Let me try again.

        Yes, I do know and agree that CDNs can cache both static and dynamically generated files equally.

        What I am questioning (not calling out, just pondering) is Dependency Minification’s decision to store the minified and concatenated output in the get_options table where a CDN cannot cache it.

        I am simply wondering how much of a performance hit constantly retrieving the option from the database will be vs. having the plugin kick out a dynamically generated file and letting a CDN do it’s job and take that hit.

        Report


      2. That would be a tiny difference, assuming that the cache doesn’t need refreshed very often.

        Report


  4. Has anyone seen the plug-in only to be compatible with WP up to 3.8.3? Or is that an unimportant detail?

    Report


    1. I tested it on three different sites running 3.9.2 and had no issues whatsoever. Worked as expected.

      Report


  5. I haven’t found any concatenation plugins which didn’t bug out in many different situations or which used nasty hacks to make them work. Hopefully this one works better.

    I do prefer the Minit plugin’s approach to cache refreshing though. It does a modified date check on the files, then MD5’s it and uses that for the file name. That way whenever an enqueued file is updated, the cache is refreshed automatically. It would be much more convenient than having to wait for a Cron job to fire (or firing it manually).

    http://kaspars.net/blog/wordpress/new-plugin-minit

    Report


    1. That just uses buffering to scan the page rather than relying on the internal wp_enqueue API to build the code up.

      Report


      1. Help! What does that mean? I guess that fact I’m asking the question means I shouldn’t go near this? I use Autoptimize for minification and W3TC to do what I can in other areas.

        Report


      2. It just means they’re loading the entire page, then stripping out the existing CSS, combining it into a new minimised and concatenated file and serving that. It’s okay if you are using heavy static caching, but if you want dynamic content, then you are probably better off just serving the files as is, as the extra load from processing all that data on each page load could cause more problems than just serving the extra static files.

        Actually, that’s just a guess on my part. I’ve never sat down and measured the difference. At any rate, it’s a hacky way to do it, the plugin mentioned in this post uses a more sane approach.

        The downside to using a more sane approach, is that if a plugin or theme doesn’t use wp_enqueue to load the CSS or JS file, then it won’t get concatenated. But such plugins/themes are crappy and you shouldn’t use them anyway ;)

        Report


      3. Thank you Ryan, maybe I’ll disable Autoptimize, clear my caches and see how it measures up on Gtmetrix just with the other W3TC and my CDN running. As has been said before it’s an area that just breaks things but for amateur bloggers who rely on plugins with a bit of self coding occasionally it’s a scary and complicated topic – especially when writing to databases gets mentioned. I find it really interesting though. Thanks again.

        Report


      4. GTMetrix will likely show a better result for a well concatenated/minified page since it doesn’t measure server load. This sort of thing is very difficult to measure accurately.

        Report


      5. Sometimes just keeping things simple is best. I’ve seen quite a few instances where I’m fairly sure a user has made their site slower by attempting to add extra layers of caching.

        A simple static cache in front of WordPress does 99% of the work for most people.

        Report


  6. What a coincidence! I was just going to look into minifying resources on my site today and this article pops-up on my dashboard!

    I’ve installed the plugin on my development site and started browsing and clicking around, but Google page speed insights is still telling me I haven’t minified any of the resources which the plugin tells me I have…any ideas??

    Report


  7. In my experience of using things that minify stuff, they’ve usually broken my site. I understand the purpose of minifying, but I’d rather have a working site than a bunch of stuff broken. If I remember correctly, W3 Total Cache has an option to minify scripts which caused a lot of things to break.

    Report


    1. This is almost always because one or more of your CSS sheets is being pulled in via @import, and those get skipped, effectively removing them from your site.

      That’ll make things look ugly. I recommend changing those sheets to be included properly via enqueue.

      Report


      1. Can we do one better and just have all themes and plugins do things the right way, so I don’t have to worry about it? :)

        Report


      2. Plugins and themes could certainly minimize, and that would help some things, but something else needs to concatinate them. They aren’t aware of each other at all. Ideally Core would do this, but it’s very very hard to get right.

        Concatination is at LEAST as important as minimizing.

        Report


      3. IMO, concatenation is almost always significantly more important than minimising.

        Report


      4. Good luck with that ;) I’ve been trying to convince theme developers to stop doing that crap for years. The only ones that seem to have learned were the framework developers.

        Report


      5. I’ve had all sorts of other problems too. I’m hoping this plugin might be able to fix that.

        The only ones I found that work for me have been ones which use nasty hacks involving buffering the entire page and rewriting stuff. I’d rather serve an excessive number of files than do that sort of thing.

        Report


    2. Yep, minification is not something you can actually take lightly. There is a number of things that can -and will- break if you minify and concatenate files indiscriminately. That is why W3TC plugin has a lot of options, cause usually you will wreak havoc on any website by minifying and concatenating things. Unless you use twentyfourteen theme with almost no plugins, your site will be screwed.
      The best minification option I found to work is just minify HTML files, carefully. At least, if you have a very huge website, your cached files will be 15-20 MB smaller :) Not a great deal.

      Report


    3. I always had problem minifying and concatenating JS/CSS files. Websites were broken many times. I tried a lot of minify plugins but none worked for me. I’ll give this plugin a try, looks like it does the job in a native WP way, hope it works well.

      Report


  8. It is a good plugin but It doesn’t work nice with background-image when it is relative to stylesheet URL, cause the resulting minified file is located in a new directory. Thanks!

    Report


    1. You can use a filter to exclude the slideshows that you don’t want the plugin to minify. Or you can uninstall by going to disabling the plugin and then deleting it.

      Report


  9. For some reason the plugin is generating a path that is missing the / at the start of the path for the concatenated files… and so the path I get is: http://testwp.localhost_minify/……. instead of http://testwp.localhost/_minify/…..

    You can hack the plugin and add a slash on line 36: const DEFAULT_ENDPOINT = ‘_minify’; but that’s never a good idea.

    I tried for now to at least use a filter to change this option but it seems to have no effect…

    function my_minify_option( $options ){
    $options = array_merge( $options, array( ‘endpoint’ => ‘/_testing/’ ) );
    return $options;
    }
    add_filter( ‘dependency_minification_options’, ‘my_minify_option’ );

    It’s a bummer because otherwise this looks to be a great simple clean way to minify and concatenate.

    Any one else having this slash issue? Am I missing something obvious with my filter? I duplicated a filter example right from the plugin author so I thought it should work.

    Thanks!

    Report

Comments are closed.