At the base of this solution, we find the Minit plugin by Kaspars Dambis. This one alone, takes care of the following:
Minit solves this very elegantly by reading in all your enqueued files, if necessary it rewrites all paths and stores the result in one single file that gets cached.
Load CSS before JS – and preferably load JS in page footer
Minit loads the combined in the footer only. CSS gets loaded in theas it’s supposed to. Problem solved. Easy as that.
Minit loads all external scripts asynchronously so your browser doesn’t get blocked waiting for (possibly slow) 3rd party sites.
Remove query strings from static resources
In WordPress, scripts and CSS usually gets loaded with the version number in the query string, like this:
Some proxies – like Squid – will refuse to cache these resources. This is why it’s better to have the version number in the filename. Like this:
Minit removes the problem as part of the file concatenation. The resulting file gets it’s own «version number» as part of the filename in form of an md5 hash.
The only big issue that Minit doesn’t handle directly is minifying the CSS and JS files. Minifying is the process of removing all unnecessary bytes like comments and white-spaces from the files. It’s not uncommon to save 10–15% in the resulting file size.
Luckily for us, when he made Minit, Kaspars saw forward and facilitated for developers who want to fix this themselves. All the content goes through filter hooks, so that we can manipulate the result right at the file combination process.
This means it is extremely easy to extend Minit, which I did in a small plugin using the well known YUI Compressor: Minit-YUI. Now you can have that issue checked off your list as well.
YUI Compressor is a JAR, which means you must have java available on your server. To make sure it is installed and in the $PATH, log in via SSH and type:
$ which java
If your terminal responds with something like:
… you’re in luck and doesn’t have to do anything special. If the response is none, you must install a JRE (Java Runtime Environment) first. Should you be on Ubuntu, it’s as easy as:
$ sudo apt-get -y install openjdk-6-jre
… and apt will handle everything for you.