If you ever explored the best ways to optimize your website, you have probably come across the terms minify or minification. The term minify refers to methods used to reduce the size of the files on your website. This is accomplished by removing white spaces, lines, and unnecessary characters from the source code.
In this article, we will explain what minification encompasses, what its benefits are, and some of the most popular minification solutions. From there you will be able to decide the best way to tackle performance and speed improvements for your website.
When we check the code in a website’s files we all expect that it’s written in an understandable way to make it easier to interpret. However, the computers that execute that code don’t care if the files contain comments, formatting, white space, or new lines. When they come across any unnecessary characters in the website files, they just ignore them—only the code that needs to be executed matters.
This is when minification enters the scene. Minification is a computing term that basically means removing superfluous characters, those that aren’t needed to execute the written code. Minification works by analyzing and rewriting the code. This reduces the overall size of the files and, by extension, the size of the website itself, so it can load faster in the user’s browser.
For example, if you have a stylesheet file intended to style your website with CSS code that looks a bit like this:
Its minified version would look like this:
As you can see the difference is significant—the minified version is in one line and takes up far less space than the original version of the code.
Before you start minifying your website files, we recommend that you first back up the entire website or just make a backup of individual files. Also, if you have a staging site or a local test environment, it would be good to first minify your website files there. That way you can check if everything is working properly before you make changes to the live site.
Moreover, you should check the page speed of your website before and after minifying the files. Then compare the results and see if the minification has helped with improvement. You can do this using GTmetrix; it’s a very useful testing tool that generates results and gives recommendations for website optimization improvements.
To minify files, you can use a plugin or do it manually with an online tool. We’re going to explain both those methods in more detail in the sections below.
Minifying Files Using Plugins
Autoptimize is one of the more popular plugins for minification that you can find. It is very easy to use and offers a lot of possibilities, and on top of that, it’s free. This plugin can combine scripts, minify, and cache your code.
You will also notice additional options below for optimizing these files. You can activate them and additionally customize file minification. In the end, all you have to do is click the Save Changes and Clear Cache button.
Fast Velocity Minify
When you install and activate this plugin, your website files will automatically be minified and optimized.
WP Super Minify
To make sure this plugin is working properly, simply examine your website’s source code. The easiest way to do this is by opening your site in a browser and pressing Ctrl + U (for Windows) or Option + Command + U (for Mac). If everything is alright, you should see the following message at the end of the source code:
Ultimately, whichever plugin you choose to use, all you need to do is select the files you want to minify and the plugin will do all the work for you in the background. Every minification plugin on the market offers different functions in addition to minification, so you should try several plugins and choose the one that suits you best.
Minifying Files Manually
Firstly, manually minifying files does not mean that you manually go through every file on your website and remove white or empty spaces. Manual minification actually involves using one of the popular online tools for this purpose. One of them is Minify Code, which we’re going to use to show the steps you’d need to take to minify your code. This tool has a pretty simple and user-friendly interface. And many online tools of this type have a similar, or same, procedure for minification. Here are a few you can try out:
After a few moments, you will see the minified version of the code you entered. You can simply copy it and transfer it to your original file. Just a reminder—be sure to back up your files before overwriting the original code with the minified one.
Manual minification is primarily useful if you want to minify only certain files or some code you’ve written. For example, if you are using a child theme to customize your website, then the CSS file with your custom code would be a good candidate for minification. In that case, you can make a backup of the original file, then use the online tool to minify its code and replace it directly in the file.
If you decide to change something later, you can always do it in the backup file you saved. Minify it again with the changes made and replace the code in the file on the server. That way you’ll always have a ready backup file that you can edit and the minified file will be on the server doing its bit to optimize your site as much as possible.