Table of Contents
Last update on
Page speed is an SEO ranking factor, and minifying your Javascript, and CSS files can help improve your site’s loading speed and your Core Web Vitals performance.
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 isn’t necessary for the code to run. And that’s important to optimize the Largest Contentful Paint (CSS and JS files) and the First Input Delay grades (JS files).
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:
- Comments
- White space, and new lines
- Indentations
Next, optimize your code further by:
- Shorten ID, class, or variable names as much as possible.
- Combine variable declarations that are closely related.
You can also go the extra mile to optimize JavaScript by:
- Turning arrays into objects whenever possible
- Optimizing your conditional statements, and
- Finding answers to basic constant expressions
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 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 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 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 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 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 its 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.
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.
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:
- Combining Google Fonts files
- Removing query strings from static resources
- Combining CSS files
- Optimizing CSS delivery
- Combining JavaScript files, and
- Deferring JavaScript files
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.
