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='//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 are 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.
Awesome article, I really love to play with CSS these days and I am also taking on some courses on YouTube and Udemy but your posts and articles here on Css-tricks is really helping me a lot to master my Css and HTML skills.
Thanks, keep writing and keep helping :)
Hi Chris. Excellent article.
What really bothers me about all these “you should speed up your site” articles, and even the official advice given by yslow, Google etc, is that they never take into account the huge install base of WordPress, and the fact that most of us simply can’t do what they tell us we MUST do.
We often can’t easily take all our plugins and refactor the code to reduce http requests; we often can’t even stop these plugins doing half the things they do unless we have a lot more knowledge than the average static page designer. Yet despite the huge global usage of WordPress, it’s only recently that the issue has started being addressed.
It really puzzles me that it’s taken this long- it has meant that there are huge numbers of sites running far slower than they should be, because NONE of the advice and guidance is easy to follow. It bothers me that so few people have taken the time to understand the needs of WordPress site owners.
So, thanks for helping to push this along and intruding these plug-ins. It’s really helpful.
+1 So true
On one hand, I’d love for PageSpeed Insights to take into consideration the type of site it’s analyzing, e.g., WordPress, to better one its suggestions. But on the other hand, it doesn’t matter what the platform is – each of PageSpeed’s suggestions are factors that slow the site down and should be fixed.
One of the speakers at the recent WordCamp SF suggested that WordPress needs to put a larger focus on frontend performance, and I agree. Out of the box, WordPress is slow, and there are dozens of steps a developer could implement to speed things up. But WordPress could take on some of this itself within core, for example, providing built in minification and concatenation options.
What I find humorous about PageSpeed Insights and Google is that their own products (Analytics, Adsense, Google+) do not follow PageSpeed’s recommendations!
Please ignore my autocorrect-generated typos ok? I meant “introducing” in my last line, and I’m too ashamed to look back any further. Plus, I’m sure I previewed the comment, but clearly I didn’t. Please don’t employ me for my coding services: -)
Nice article. I think this is really sensible advice, especially for folks managing a small number of sites that they are able to focus on and dedicate a lot of time for maintenance and tuning.
However, if you are managing a large number of sites, I would caution you against any situation in which you are using a third-party plugin to manage other third-party plugins. Upon updating core or plugins, you’re a little higher atop the house of cards than I’d prefer to be.
Chris, when you posted a tweet about this issues I worked on a OOP packege to solve it. Here explaination of what it does & why.
Instead of doing it in Php, you can also do it on Apache level by installing mod_pagespeed. This will combine all assets and does all kind of crazy stuff that a performance-concerned developer wants!
I’ve heard nothing but good things about mod_pagespeed. But I still think you want to create custom concatenated resources the best you can and let it do what it thinks is best on top of that.
For instance, you know that the homepage needs:
a.css, b.css, c.css
But the subpage needs:
a.css, b.css, c.css, d.css
The most efficient way to handle that is to concat a, b, and c, and load d only on that subpage.
Well, maybe anyway. If d is small enough it might want to just get into the main package. But if there are dozens of “d”s, perhaps not. It’s these things that it takes a brain to solve.
What I would like to attempt is use the
wp_print_scripts(and/orwp_footer) action, manually go through the$wp_scriptsglobal variable, get all of the assets (already ordered for dependencies to resolve correctly), separate scripts from styles of course, make a hash of all the files needed for this request (based on filenames), then concatenate them/minify if wanted, cache the result, and print thescript/linktag referencing that cached file. And remove the files from$wp_scriptsof course.So this could handle “one-off” or one page scripts as well, either by creating a whole new combined file with that one now included, or by just including a file separately if it wasn’t found in the first cached file.
Great article! Another solution I’ve seen is in Rocket Loader provided by CloudFlare’s CDN. It requires a Pro account, so it’s not free, but automatically concatenates js and css resources when caching your site on the CDN.
Hi Chris, good brain food and I agree a pragmatic approach to dealing with this now is a good idea. I wonder if there’s a path for the WordPress core team to think about though. Ideally we’d like all of the styles in one file AND for our styles to win out if we need to tweak a plugins look. So how about a method for enqueueing styles didn’t inject them into the head, but @imported them into style.css?? Then we’d get a single file plus the power of the cascade.
It wouldn’t fix the issue of loading all the styles all the time, but would certainly be better than the status quo.
Hmmm.
Gonna love your articles.
For sure concatenate helps, this improves YSLOW rating of the website which makes website load much quickly.
Another great article! Thanks for sharing that MinQueue plugin!
Don’t caching plugins like W3 total cache do this already? Don’t the concatenate and cache all js and css files? I think they do…
I’m using the wp-total cache tool as well. I’m fairly new to wordpress development, haven’t touched it since 2011.
I was concerned about using it as it is a huge resource, but it’s what the company wants and needs.
Anyone know other techniques to get WordPress to load faster
Just confirming that W3 Total Cache has a number of ways to minify and concatenate assets. You can manually enter in the URLs – that’s a terrible way to do it. However if you look hard enough there is a HELP button that leads to a wizard where you can just click on the files you want.
It seems to trawl thru all of your theme files looking for JS or CSS calls, as well as looking for anything that’s been enqueued. When it’s all working – it’s awesome.
Yeah, it’s been working great so far.
“Concatenate” is a very long word, considering its meaning. And what’s up with the superfluous “ue” on enqueue and dequeue?
Good article! I found W3 Total Cache easy to set up but concatenation was a bit un-intuitive. I did manage to concatenate all plugin CSS and JS files using it, but it took time to experiment with settings.
Great article. I believe I read that most browsers can only load in 6 http requests (on average) at one given time unless they’re coming from a different server. So I guess those numbers would be a good goal for max dependencies loading per page. Y/N?
Shout out to Better WordPress Minify.
https://wordpress.org/plugins/bwp-minify/
Not only does it minify css/js. You can specify where it minifies (header / footer) on a file per file basis.
You can also dequeue files (loaded from plugins). So I guess it kind of does all of the above mentioned in the article.
Definitely worth a look
I agree with Johnny. Better WordPress Minify is worth checking out and does a better job then W3 Cache IMO.
Especially since W3 Cache is sometimes buggy when it comes to the JS minify feature where it turns off for no reason and/or won’t even let you keep it turned on. I have a site I just finished recently where this is still an issue, and it had caused major problems.
Just the other day I was thinking about this while testing a WordPress site with Yslow, how to optimize it as much as possible because it was loading 22 external scripts and 12 stylesheets. I was getting a 66 score, not too bad for an image intensive site, but still… considered the CDN solution but I will take a look at the plugin aswell, thanks for the article.
That’s a problem I had for a long time and until now I did everything the manual way. Thanks for the Asset Queue Manager. Awesome!