Wicked Opinionated WordPress Plugin: Concatenate Assets

Build processes and automation are a hot topic and have been for some time. I’m fascinated by alternative approaches and love reading about how other people do things. One area that I’ve continually ignored however, is the optimization of assets outside my control specifically when working with WordPress. WordPress plugins in particular often carry a payload of stylesheets, JavaScript, or a combination of the two that are often neglected when it comes to optimizing the front end. I usually took my stance of minding my own business and letting a piece of software do what it was designed to do, but it was always unsettling to me. As it goes for many of us with a disposition to build things, I wanted to custom tailor as much of a build process for these outlying assets as I could. So I did.

Tailored to my workflow

When I sought out to build this plugin, I wasn’t ignorant to the fact that there were already a ton of existing solutions out there. Picky is as picky does none of them really suited what I was looking to do:

I wanted as simple of a concatenation script as could be. I wanted it to piggyback only those files that were properly registered, enqueued, and versioned. I didn’t want it optimizing anything too much. While that sounds a bit counterproductive given a goal of optimization, I didn’t want anything too invasive that was going to somehow ruin expected functionality in any way. While it’s not a major concern for stylesheets, depending on the combination of pre-obfuscated JavaScript and broken output for any number of use cases, I didn’t want to mess with code that wasn’t mine (too much).

Further, I didn’t want to mess with offsite assets just for security reasons. I don’t like the idea of pulling in offsite assets and mixing them up. I also didn’t want to screw around with legacy IE assets. I wanted concatenation to take @import into account as well. Those are a lot of rules, and based on my current plugin toolset nothing fit the bill (caching plugins included). All in all, the criteria is as follows:

• Only properly registered and enqueued assets are considered for concatenation
• Cache updates are triggered only by proper version bumps in calls to wp_enqueue_script/wp_enqueue_style
• Only local assets are processed, the plugin will not retrieve offsite assets
• Conditionally-included assets (IE conditional comments) are ignored
• No 3rd party libraries to offload the concatenation process
• CSS minification is whitespace/comment removal only
• No JavaScript Uglification/minification/obfuscation
• Separate concatenated cache files are built for the header/footer based on wp_head and wp_footer
• Cached files are unique to the WordPress-defined queue of assets used so as to reduce overhead
• The plugin will physically concatenate stylesheets that were @imported
• The plugin takes into account assets within stylesheets and properly replaces the URI based on the location of the concatenated file

The big idea here is to simply reduce the total number of HTTP calls without jerking around too much. One of the primary goals is to ensure this plugin is not responsible for styles not rendering correctly or JavaScript not executing properly after it was activated. While it’s not going to be comprehensive in concatenating everything, based on the rules outlined above you can likely make implementation changes to get the results you’re looking for.

This is a Members plugin

Since there are so many preexisting solutions, and this reinvention of the wheel is so picky and opinionated, this plugin is going to be for Members only. As with all Member plugins, an active membership gains you access and support with no additional cost. If you’re not a member, consider checking it out if you’d like a copy of Concatenate Assets.