Best CSS and JS Minification Tools

Page speed is a SEO ranking factor, and minifying your Javascript, and CSS files can help improve your site’s loading speed.

Minification involves reducing the redundancies of a file that aren’t crucial for the file to execute.

By reducing the bloat, your page loading times become much quicker.

You can minify your files manually, or you can automate the process with CSS and Javascript minification tools, for example.

Below are more details on minification, why you need it, how to manually minify your code as well as a shortlist of the best CSS, and JavaScript minification tools available for free.

What is Minification and Why You Need It

As previously mentioned, minifying, or compressing your code means removing any redundancies, and clutter that aren’t necessary for the code to run.

In practice, this looks like removing new lines, spaces, comments, and other similar characters in a file.

(To learn more about minification and concatenation, don’t miss our dedicated guide about files optimization.)

By reducing the bloat, your server has less to load when the file is called which results in quicker page loading times.

Since Google has long since announced that page speed is a major ranking factor for SEO for both desktop, and mobile devices, it’s more crucial than ever to ensure your site loads quickly.

Your server must respond within 600 ms.

In 2019, Google updated their documentation to include that your site should Ideally load at least 90% of its visual components within 100 ms.

Otherwise, your site isn’t going to reach the first page of Google results, and your site risks getting left behind in the dust.

How to Manually Minify Your Code

You can manually minify your code, but be sure to back up the file you want to compress before you edit it by downloading a copy from your server, then saving it to your computer.

Then, you can use a code editor such as Visual Studio Code, or Brackets to edit the file.

Refrain from using Google Docs, Microsoft Word, or other rich text editors as they add extra formatting to your text, which is the opposite of minifying your code.

It may be important to note that it’s not recommended that you edit a file directly on a production server.

Open the file, and remove the following from your code:

Next, optimize your code further by:

You can also go the extra mile to optimize JavaScript by:

Once you’re done, save the file. You can upload it back to your server, and take it for a spin.

Before minifying, your CSS code, for example, would look something like this:

After minifying, the CSS above turns into the example below, and your code should look similar:

It may be important to note that one comment was left intact, and that is because it provides due credit.

Also, if you use a CSS preprocessor such as LESS, SCSS, or SASS, then there’s already a method for compression built right in so you don’t have to worry about manually minifying your code.

Warning to the Wise

Sometimes, you may make optimizations that won’t work once you try to use your code. That’s why it can be helpful to work in batches, saving your progress along the way.

That way, you can minify bit-by-bit, and test your code after a set of lines has been completed.

If something breaks on your site, you’ll know that the last snippet of code you edited was to blame, and you won’t have to spend hours scouring through your code to figure out what happened.

Automate Compression with Minification Tools

Minifying your code manually can be rewarding, but it’s also painfully tedious. To automate the whole process, you can use minification tools.

It’s a reliable option, and you can find the top CSS and JavaScript minification tools below.

The Best JavaScript Minification Tools

These JavaScript minification tools are all free, and can be installed on your server through the command line. They’re also updated frequently for the most reliable results.

UglifyJS2

UglifyJS2: Best Minification Tools for WordPress

UglifyJS2 minifies, parses, and optimizes your JavaScript. It’s a popular JavaScript minification tool that also has debugging settings.

There’s also a “Uglify Fast Minify Mode” that minifies your code much quicker since “whitespace removal and symbol mangling accounts for 95% of the size reduction in minified code for most JavaScript – not elaborate code transforms.”

There’s also a UglifyJS2 demo available.

Closure Compiler

Closure Compiler: Best Minification Tools for WordPress

Closure Compiler is Google’s JavaScript minification tool that optimizes your code as well.

It’s a solid option to consider that parses, and analyzes JavaScript, rewrites code when needed, then minifies after that.

It also checks for syntax, variable references, and types as well as warns you of typical JavaScript errors.

YUI Compressor

YUI Compressor: Best Minification Tools for WordPress

YUI Compressor is unique as it’s both a CSS and JavaScript minification tool. It can save you an additional 20% off your page loading speed on average when compared to other popular CSS and JavaScript minification tools not listed here.

It also compresses your code without error as it’s designed to be 100% safe.

The Best CSS Minification Tools

Similar to the JavaScript minification tools listed above, these CSS minification tools are all free, and regularly updated.

CSSnano

CSSNano: Best Minification Tools for WordPress

CSSnano has a simplified minification mode as well as an aggressive one that not only removes aspects like whitespace, but also rewrites your code.

In either case, this minification tool removes white space as well as compresses colors, removes comments, discards overridden at-rules, normalizes unicode-range descriptors including gradient parameters, and more.

You can also access CSSnano through the online version if you don’t want to install it.

CSSO

CSSO: Best Minification Tools for WordPress

CSSO minifies your CSS by removing redundancies such as white space, completes replacements for shorter forms, and restructures your CSS by merging declarations, rulesets, and more.

Debugging options are also being developed for a future release.

You can also access the online version of CSSO as well if you’re not keen on installing it.

UNCSS

UNCSS is a unique minification tool since it’s sole purpose is to remove unused CSS from your stylesheets.

That means you could potentially use UNCSS, then run your code through other CSS and JavaScript minification tools for best results. Just be sure to test the tools you want to use for compatibility beforehand so you can avoid errors.

Automate Your Minification All the More with WP Rocket

If you run a WordPress site, you can automatically minify your code in a few clicks by using WP Rocket.

It’s a plugin that installs like most others, and you can not only minify your CSS, and Javascript files, but also your HTML files.

It’s cleanly coded and offers other options as well such as powerful page caching, and cache preloading.

It’s updated regularly for reliability, security, and stability, and it’s also a wildly popular option with over 660,000 active installs.

Once WP Rocket is downloaded and installed on your site, go to Settings > WP Rocket, and click on the File Optimization tab.

Then, click the Minify HTML, Minify CSS files, and Minify JavaScript files check boxes.

How to enable minification with WP Rocket

With WP Rocket you can minify CSS and JavaScript files in a few clicks

Confirm that you would like to minify each type of file by clicking the Activate Minify buttons, then click Save Changes at the bottom of the page.

Be aware that sometimes these options could break your site: in that case, disable minification and clear the cache, and your site will be back to normal. You can also test the options on a test site before enabling them on a production server.

WP Rocket Best Minification Tools for WordPress

Be sure to back up and test your site before saving your changes.

For details, check out Reducing the Number of Minified Files, and Resolving Issues with File Optimization for details.

There are also settings you can enable for:

There are also a ton of other options such as image optimization, lazy loading images, iframes, and videos, and a lot more.

The best part is you can install and activate WP Rocket and your WordPress site will be automatically optimized. Adjusting other options is entirely, well, optional.

In Conclusion

Minifying your code manually, or with CSS, or JavaScript minification tools is a smart way to reduce the bloat of your files, and reduce the loading time for your site.

Now you have several lovely options to help you compress your code, and speed up your site.

Which CSS, and JavaScript minification tools do you use? Do you use one that’s not on the list, but worth checking out? Feel free to share it in the comments below.



Author's avatar

A copywriter, copy editor, web developer, consultant, course instructor and founder of WP Pros(e), Jenni McKinnon has spent the past 15 years developing websites and almost as long for WordPress. A self-described WordPress nerd, she enjoys watching The Simpsons and names her test sites after references from the show.

9 comments

I personally use WP Rocket a lot on almost all of my sites. Besides, I use Autoptimize and Fastest Cache plugin to minify JS codes. But in top of all, I love WP rocket.

Hope, you guys will write an article about Free Image Compression tools soon.

Thanks,
Shamim

    Hi Nasir, thanks! To read about image compression tools and techniques, you can start from here: https://wp-rocket.me/how-to-optimize-images-wordpress/compress-images-reduce-file-size/

Thanks for sharing such a wonderful Guide, It helps me to optimize javascript code of my new site.

I’ve never heard about these CSSnano and CSSO – I have tested it and found it very useful!

Thanks for the great recommendation, Alice.

Great article. May I add, that according to the WordPress plugin guidelines you should keep your code "(mostly) human readable" when publishing as Open Source? (https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/#4-code-must-be-mostly-human-readable)
Only providing minified code will make it impossible for others to read, learn from and possibly improve your code.

Regarding best web site performance, you of course want to deliver compressed code with your website, only. Lovely, you only need to activate the options for compression in WP Rocket.

    Hi Bego, thanks a lot for your comment and for reminding the guidelines: you're right! :)
    That's why our GitHub repository is open and available to anyone interested in our code: https://github.com/wp-media/wp-rocket

    Thanks for your support!

Thanks for sharing such an awesome guide on CSS and javascript minification tools it helped me alot.

We are having a wordpress blog and it makes it easy for us to minify our CSS and Javascript. We use WP Rocket for the minification. Earlier when i checked our website in the Pingdom and Google Speed, it was showing some error and suggesting to minify CSS and Javascript and after trying many plugins finally WPRocket did the task as per the satisfaction.

Would this conflict with Cloudflare's Speed > File Size Optimization > "Auto Minify" ?

http://prntscr.com/ojsgdt

Oops, just saw this : https://docs.wp-rocket.me/article/1184-cloudflare-recommended-settings

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}