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.
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.
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.
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:
- White space, and new lines
Next, optimize your code further by:
- Shorten ID, class, or variable names as much as possible.
- Combine variable declarations that are closely related.
- 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.
There’s also a UglifyJS2 demo available.
It also compresses your code without error as it’s designed to be 100% safe.
The Best CSS Minification Tools
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 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 is a unique minification tool since it’s sole purpose is to remove unused CSS from your stylesheets.
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 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.
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.
There are also settings you can enable for:
- Combining Google Fonts files
- Removing query strings from static resources
- Combining CSS files
- Optimizing CSS delivery
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.
Now you have several lovely options to help you compress your code, and speed up your site.