As many people do when striving to make a website load faster, they refer to the Google PageSpeed recommendations site, and rightly so, because if Google makes a statement, usually it's worth listening to. However, sometimes it is quite messy to do all the optimizations, and you might not have the skills to actually do these changes.

But that is not nearly enough if the CSS and JS files are quite large. That's what minification is all about.

What is minification? (and how it can benefit your site)

Minification is the function of taking a piece of coding and removing any characters from it (such as spaces, line breaks, tabs and otherwise) that do not convey any meaning, except for the purpose of making the text more readable. Minified WordPress files perform in the same manner as the original code, with the only difference being that they take up a little less space because they cut out extra information. For this reason, the file becomes smaller to download, resulting in a faster website overall.

Minification is particularly important and useful for scripts (such as Javascript files), CSS stylesheets, and other similar website components.

The primary reason for doing this and the benefits to your site are:

Reducing loading times and making your website faster overall. Given that most websites use several scripts and stylesheet files, which results in a LOT of extra space. While you may think that removing spaces will not result in a lot of changes, the complete minification process of all of the files of a WordPress installation can add up to a significant benefit.

Obscuring the code from casual readers. While the actually resulting minification doesn’t actually hide your site’s code (i.e. this is different from code obfuscation), but it does make it quite a bit harder for casual users to understand, if that’s something which concerns you.

While minifying your code is unlikely to make a huge difference to your site’s load times, seen as part of a complete optimization strategy, it would be one of the many things you should do. It can cut your page load times by a couple of percentage points, which makes it a good tactic to implement nonetheless.

What happens during the minify process?

Essentially, the minify process, goes through such text files and removes anything which is only intended for human consumption, because afterall, the machine parsing the file does not the file to be human-readable.

The WordPress minify process, removes any stuff such as extra white space (spaces, newlines, tabs), comments, or any other text which increases the size of the file without increasing the "semantics" of the file for the browser.

The end result would be that the HTML output, together with the CSS files and JS files used by your website and it's plugins would look something like this:

While this may look like a bunch of garbage, in fact, all of the meaning is still there - it's has just been "minified" to remove any unnecessary stuff which is bloating its size.

There are plenty of plugins which can help you achieve this process, which will mention below.

5 Best WordPress Minify Plugins

We'll be discussing both generic products which are used in general to make your website faster through minification, and specific plugins whose only feature is the minify process.

The reason is simple, this is by far the best product which is able to undertake several tasks, in a really simple way, but with an excellent end result of making your website faster, including performing a minify of CSS and JS files.

Really and truly, it's just one of the things which this plugin does, but once you install it, you'll find that you don't need to do anything else. As you can see below, this minification is one of the basic options for optimization. With that, you'll see that there is concatentation, this is a secondary process of optimization, which creates one file out of all the CSS and JS files (because this also makes it faster to download the files)

The plugin is not free, but the price is really cheap at just $39. Given the time it saves you and the end result of making your website load faster, literally in minutes, we would highly recommend opting for this.

We actually install this plugin on every WP website we set up, simply because it saves us so much optimization time.

Here is a little trick to help you out a real lot - use JCH Optimize. The great thing about JCH Optimize is that it implements a huge number of Google PageSpeed and other recommendations to make your website load as fast as possible.

And you don't have to mess around with any code, all of this is done by the plugin - it preserves all your original coding, so you won't break anything by messing around. Also, usually it actually does those optimizations which are usually the hardest to perform. To mention a few, these are the ones which are done really well

Combines CSS files from all your template, modules and plugins into a single file, thus reducing the number of requests sent to your website

Combines Javascript files, which are usually really hard to combine without breaking the site

Zips the CSS and Javascript so that they become smaller and the transfer time is reduced

Minifies the Javascript and CSS, to make it more compact and reduce its size even further (reduces any extra whitespace, comments etc.)

Adds a DEFER tag, such that your page loads first, and executes the Javascript after the page has loaded, making the site snappier to load

Creates IMAGE Sprites - this also reduces the number of requests sent to your website by a very large amount and is one of the hardest optimizations to achieve manually

It also allows you to tweak some advanced options such as excluding certain files to ensure that if any extension does not work after running it through JCH Optimize, this will work anyway.

The PRO version, which is available at a measly $29 will give you access to a number of other optimization options such as including inline CSS and Javascript in the optimizations, and loading the Javascript asynchronously to not block the loading of the site.

Take my word for it, install the plugin, enable it and check out your before and after results. If you don't get an improvement by a good amount, come back here and complain, but I'm pretty sure you won't be coming back :)

3. W3 Total Cache

This is another plugin which you will see is a generic piece of software which does a bunch of stuff which is related to making WordPress fast, including minify of CSS, JS and HTML files.

While you'll find that this is mentioned very often when it comes to such plugins, it should be noted that this product is absolutely not a good idea for people who are not technical.

It has been known to create significant problems, with some bugs remaining even after the software is uninstalled and deleted from the website.

Ourselves at CollectiveRay have tried using this plugin several times, but at this point and in the current state, we are no longer recommending that this is used for minification purposes or to make websites faster, unless you know exactly what you are doing.

4. WP Super Minify

This plugin uses the Minify PHP Framework and using it combines, minifies, and caches inline JavaScript and CSS files on demand to speed up page loads.

By activating this plugin, the source of your HTML, inline JavaScript and CSS are now stripped from extra stuff, resulting in their size being smaller.

What is different from other plugins mentioned here is that this plugin ONLY performs the minification process, and no other optimizations, which is a great choice for those who only want to perform this function and nothing else for any reason.

5. Fast Velocity Minify

While there are many other WordPress minify plugins which we can recommend, this will be the final one which we mention here.

The Fast Velocity plugin combines all the CSS and JavaScript files, so that the web server has to deal with less requests. At the same time, it also minifies the files and creates cached copies for faster loading times.

This plugin automatically enables the options to minify your HTML, JavaScript, and CSS, but, you can disable one or more of them manually by going into the Settings → Fast Velocity Minify tab.

You can choose to exclude specific files from being minified if one of your plugins breaks after you've enabled this.

Wrapping Up

Whilst the minification process is not ground-breaking function, it should be implemented as one of several tasks to make your WordPress faster and we highly recommend that you implement one of the products mentioned above.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-) Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

The Outstanding HungryJPEG Bundles

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.