WordPress minify JS and CSS files

One of the best things we learned whilst researching for our article on how to make Joomla website load fast (1.29 seconds to be exact), we discovered a great gem of a tool. 

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.

As you might know, when making your WordPress site faster, there's a bunch of optimizations you need to do. One of them is knowing how to leverage browser caching in WordPress correctly, something which CollectiveRay has got a great article about here
 
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.

Read More: How to hire (GREAT) Javascript developers - Top 5 sites, click here - https://www.collectiveray.com/hire-javascript-developer

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:
 
minified code
 
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.

1. WP Rocket

This is our favourite plugin by far.

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)

wp rocket basic options

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.

WP Rocket testimonial

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

Click here for the lowest price on WP Rocket

2. JCH Optimize

 

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.

If you are looking for a fast hosting service, do have a look at our host, we've reviewed them fully here: collectiveray.com/web-design/web-hosting/inmotion-vps-hosting-review.html

JCH optimize

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 :)

Click here to download JCH Optimize

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.

Page cache settings in W3 Total Cache

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.

 

Fast velocity minify

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.

Need help getting stuff done? Try these top-rated affordable gigs on Fiverr!

fiverr logo

 

Click here to find experts on WordPress speed optimization.

Click here to create a full WordPress website.

Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now
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!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

 

 

Get Started Now With Shutterstock

 

 

 

Best Rated Caching Plugin

Make your website faster 

Monstrous B-Day Party

CLICK HERE for discounts!

Monstrous bday party

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second 

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Work with 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.

David attard

Follow us on Social

Follow us on Facebook   Subscribe to our RSS Feed   Follow us on Twitter

 

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to StackPath CDN!

Web Hosting stackpath