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:

[html light=”true”]<script type=’text/javascript’ src=’/_minify/wp_favico_js,wp_favicon_js,previewloader,pinterestRSSjs,yumprint-recipe-post,flexslider.df2e3e1be0c951f4cf3ea0932200f96c.314e77c0b7be97ba8913570dcc5ada67.js’></script>[/html]

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

33 responses to “Dependency Minification for WordPress: Automatically Concatenate and Minify Scripts and Stylesheets”

  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.

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

        • 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 ;)

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

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

  3. 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??

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

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

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

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

  5. 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!

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: