Home > Web Design | Web Development > Taking Control of the CSS/JS that WordPress Plugins Load

Taking Control of the CSS/JS that WordPress Plugins Load

The other day on ShopTalk a question we got led us down a short tangent on WordPress plugins, the resources they load, and what that would look like in a perfect world. I ended up writing up some thoughts on it and getting some feedback. I think it came to a somewhat satisfying conclusion so I figured I write it up.

How Some Plugins Work Now

Let’s take a real-world example. The WP-Polls plugin. I think it’s a nice plugin. Does a good job with polls. I use it here on CSS-Tricks.

To put those polls on your site, it needs some JavaScript to handle the functionality (i.e. voting and seeing results without a page refresh) and CSS to style the poll widget (the results bars and whatnot).

The way that it adds that CSS is by injecting a stylesheet via the wp_head() hook, putting this in the <head>:

<link rel='stylesheet' id='wp-polls-css' href='http://example.com/wp-content/plugins/wp-polls/polls-css.css?ver=2.67' type='text/css' media='all' />

The way it adds that JavaScript is by injecting a script via the wp_footer() hook, putting this near the bottom of the document:

<script type='text/javascript' src='http://example.com/wp-content/plugins/wp-polls/polls-js.js?ver=2.67'></script>

That makes sense. That’s what they need to do to make this plugin work. Plugin authors need to make sure their plugins are easy to use and work.

As a performance-concerned developer, I want to concatenate scripts and styles.

Now we have these two single-purpose resources being loaded on the page. When you look into web performance and how to make websites faster, some of the first advice you hear is to concatenate resources. Very good rule of thumb: the less resources a website needs to load, the faster it will be.

Concatenating resources isn’t some obscure thing only the most elite websites need to worry about. It’s an every website problem. People have tackled this problem in a million ways. CSS sprites were all about concatenating image resources. Icon fonts and SVG sprites are solving that same problem. CSS preprocessors help you concatenate your stylesheets. The Rails Asset Pipeline helps you concatenate resources. There a Grunt and Gulp plugins galore that are designed for this.

But we’re in WordPress land here, so we solutions for that.

Should plugins themselves help?

The first idea I thought of was that plugins should allow us to dequeue anything they enqueue from UI they add to the plugin itself. Even go so far as to provide the resources they would have loaded for you in a textarea for easy copy-and-pasting into your own system.

I now think that was a little misguided. It would take a major movement in the WordPress plugins world to get this going. Even if that happened, that’s a lot of duplicate effort, and this issue can be handled more efficiently.

Solution #1: Use a Plugin

The plugin MinQueue offers a solution I like. It doesn’t do anything automatically, it allows you to configure what resources you want concatenated and in what order.

With the plugin active, in the Admin Bar on the front end you’ll see a little helper link you can click.

In our demo, I know I want to concatenate our theme’s CSS and WP-Polls CSS together. So I take those names from the helper and put them into a new “queue” in the plugin settings.

Now neither of those CSS files loads individually anymore. MinQueue creates a combined (and cached) version and serves that:

<link rel='stylesheet' id='minqueue-117c22aa-ebc80003-css' href='http://example.com/wp-content/uploads/minqueue-cache/minqueue-117c22aa-ebc80003.css' type='text/css' media='all' />

You can create multiple “queues”, which gives you a good amount of control. For instance, perhaps a subsection of your site loads different resources, those could be combined separately if you wish, it’s not required you concatenate them with the main group.

Note that this means you’ll need to enqueue your theme’s stylesheet, but that’s pretty easy.

Also note the popular W3 Total Cache does concatenation too, but I find it a bit more confusing. You add stylesheets via URL’s and it seems a bit more basic and easy to break.

Solution #2: Manually dequeue assets and concatenate yourself

Plugins that add resources do it through wp_enqueue_script and wp_enqueue style. You can dig through their plugin code and find where they do that, so you can see what name they applied when they did it. Then, in your own theme’s functions.php file (or custom functionality plugin), you dequeue them.

Justin Tadlock has a post about this can you can read. Simple example of dequeuing one stylesheet:

add_action('wp_print_styles', 'my_deregister_styles', 100); function my_deregister_styles() { wp_deregister_style('name-of-style');
}

Now it’s on you to go find that resource and concatenate it into the CSS you are still loading on the page yourself. Perhaps you’re using a CSS preprocessor and you can @import it. Perhaps you’re using a task running like Grunt can can add it to the list to files to go get and concatenate. Or go fully manual and just copy and paste it’s contents into your own stylesheet (just be aware if you do this you don’t get updates when the plugin updates).

Solution #3: Use a plugin to dequeue assets and concatenate yourself

While I’m capable of digging through a plugin’s code to find instances of enqueuing resources, that doesn’t seem like a fantastic approach to me. I’d rather do it programmatically, making it easier and reducing human error.

During the earlier discussions happening around this, Nate Wright of Theme of the Crop cooked up a brand new plugin for this called Asset Queue Manager. It has a UI you use (from the front end) for you to easily dequeue assets.

From the front end of the site, you click a link in the Admin Bar to reveal a dropdown of all the enqueued assets on that page.

There is a button for dequeuing that asset. The plugin will keep that asset dequeued until you say otherwise. Now again it’s on you to go concatenate that into your stylesheets however you wish. There is another button there that links directly to the resource, making it super easy to find. Pretty cool!

Conclusion

There are plenty of ways to wrangle control of the CSS and JavaScript that WordPress plugins can load. You can and should do this, with the urgency increasing for each unconcatenated resource.

How many resources files of each type OK to load? One, Two or Three.


Taking Control of the CSS/JS that WordPress Plugins Load is a post from CSS-Tricks

TOP
Visit Us On TwitterVisit Us On FacebookVisit Us On Google PlusVisit Us On Linkedin