What is minification?
Simply put, the term ‘minification’ refers to the process of cleaning up code and markup, removing unnecessary and redundant data without compromising the functionality of the website or app.
If you want a more in-depth understanding of this topic, check out the FAQ section below:
Question #1: What elements get removed during minification?
The most common elements that get removed during minification are typically those that serve to make a piece of code easier to read for humans but add nothing to the functionality of the website or app. Examples include:
- Block delimiters
- Comments
- Delimiters
- White space
Question #2: What are the benefits of it?
The biggest benefits of minification include
- Faster load times – Because the minified code or markup has a smaller file size, it loads more quickly than its non-minified version.
- Reduced resource consumption – Because the code or markup is cleaner and more lightweight, the app or website requires significantly fewer resources. This is especially beneficial to mobile users whose devices have limited RAM and battery.
- Improved overall user experience – When your app or website loads quickly and does not cause the user’s device to slow down, hang, or run out of juice prematurely, then it becomes much more enjoyable to use.
Of course, when your website or app works great, you get more users (and retain more of them), which, in turn, gives you a much larger customer base to sell to.
Question #3: What are the downsides to it?
The biggest downside to minification is that it makes it significantly more challenging for people to read and make sense of your code or markup. As we have seen earlier, the process is designed to remove as many of the elements that make code or markup more human-readable.
But there is no need to worry. If you or your team ever need to go over your code or markup again and make some changes, there are ‘prettifying’ tools called pretty-printers you can use to make the process so much easier.
Question #4: How do I perform minification?
You can perform minification in two ways: manually or by using minification tools.
Keep in mind, however, that doing it manually may not be a good idea, especially if you are working with large, complex files. Code and markup are already challenging to read as they are. There is a big chance you will miss something—or worse, break something—if you go over everything and manually remove the elements that make it human-readable.
Question #5: What is the difference between minification and compression?
The biggest difference between minification and compression is the need for a separate tool to uncompress the resulting file. Unlike minification where the resulting code or markup can be run by devices or read by web browsers as it is, compression renders the resulting file unusable until the process is reversed.
This is because compression actually modifies the binary code of the file that is being compressed. You need something to return that code to its original state for devices and web browsers to be able to make sense of it. In contrast, as we have seen earlier, minification only involves the removal of non-essential parts of a piece of code or markup.
This, however, does not mean that you will not ever need to reverse the minification process. While computers and web browsers are unable to tell the difference between minified and non-minified code, people can. So, as we have seen earlier, if you or your team need to revisit your code or markup and make changes to it, you may need to use a pretty printer to make it easier for everyone to make sense of it.
To more on how to improve performance by magnification, visit this helpful article from Geeks for Geeks.