Optimize your JS and CSS loading in WordPress

When you get into page loading optimization, you will quickly find these «must-dos»: Combine your CSS and JavaScript files (respectively), minimize your CSS and JavaScript, load CSS before JS, load JS in body footer and then even some. Without much effort, we can make WordPress do all of this automatically.

At the base of this solution, we find the Minit plugin by Kaspars Dambis. This one alone, takes care of the following:

Combining JavaScript and CSS files

There is a limit on how many requests your browser can handle simultaneously (usually 4 per hostname), all JavaScript requests are blocking (meaning your browser doesn’t do anything else while handling it) and every request have overhead.

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.

But please take note that this might break sloppy coded plugins or themes. Sometimes inexperienced coders throw JavaScript inline at arbitrary places without deferring the execution. If their code expects e.g. jQuery to be loaded before it really does, your browser might barf. There is nothing wrong with Minit for doing it this way, it’s the bad plugins that should be fixed.

Defer parsing of JavaScript

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:

jquery.js?ver=1.10.2

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:

jquery-1.10.2.min.js

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.

Minification

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.

Installing Minit-YUI

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:

/usr/bin/java

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

Now download Minit and Minit YUI, activate the plugins – and you’re done.

16 Comments

  1. Thanks Bjorn. I found this idea brilliant. But why minit is not available while i search it within wordpress add new plugin?

    1. It is not published in the wordpress.org repository. As I am not the author, I can’t speak out why, but many authors (myself included) choose often not to. Reasons may vary, e.g. the support burden.

      Be advised that with HTTP/2, concatenating resourses is considered an antipattern, as it may be better for performance to not do it.

  2. Hello,
    an alert popped up as soon as i activated the plugin “Warning: shell_exec() has been disabled for security reasons in /var/www/vhosts/tursusozluk.com/httpdocs/wp-content/plugins/minit-yui-master/minit-yui.php on line 19”

    What should i do sir?

  3. alert disappeared when deactivating minit yui. on the other hand, minit master also spoilt the page desing by removing slider and elementor css

    your information

Comments are closed.