Learn what minification is and 7 of the most powerful tools with which you can apply this technique to your JavaScript code.

Javascript is the language responsible for providing interaction to most of the world's web pages.. Through the handling of its events it is possible to control forms, as well as include effects and animations, among other functions.

However, what is also true is that on many occasions your code affects the overall site performance. When your website slows down, both the user perception and the organic search engine ranking of your site are diminished.

To reduce this impact, it is necessary to take action through site optimization and one of the ways to achieve this is through minification. Below you will find out what minification is all about and how you can achieve it.

1. What is Minification?

Minification, also called minimization, occurs through the compaction of the code in order to reduce its size as much as possible. The problem with minification is that it requires some time investment, because it is about lightening the site without losing functionality.

In the minification process, everything that does not add value to the execution of the code is eliminated. This means whitespace, comments, and even indentation are removed, making these files less human-readable.

But this is not all. It will also be necessary to rethink the code using writing alternatives that are more compressed, such as renaming variables and modifying conditionals.

2. Why Minify?

In the early stages of development, the programmer often focuses on functionality and delivery times, as well as code readability to facilitate future modifications.

Hence, the need to adjust this code to reduce its size as much as possible is always present. When you make these files lighter, then the loading of the website speeds up and this will be pleasing to both the eyes of the users and the search algorithms.

Minification is one of the most frequent tips that website load speed check tools do. And this is an important job that must be covered by the programmers to improve the metrics and the monetary results of the website.

3. Differences between the Code Compression Processes

There are concepts associated with compacting files that can be confused with each other and are explained below.

Compression

In the process of compressing a file, some algorithms are used that identify redundant data series and eliminate them through rewriting under other parameters, to reduce their impact on the weight.

The original and compressed content is the same, only the compressed uses some different techniques to store the characters. For example, imagine that the file contains text like "GGGDDDHHLLLLLLL", which on compression can be read as 3G3D2H7L.

minification

In the minification if there is a change of the file, since here characters such as blank spaces, line breaks, comment blocks are suppressed and it is possible to rewrite variables, as well as conditionals to make them more compact.

When you open a minified file, you'll notice that the code is there, just placed sequentially as a single paragraph. This reduces the weight of the file.

Obfuscation

It refers to modifying code in such a way that it is completely unreadable by humans. This is intended to hide the business model and development, to prevent attacks.

With obfuscation it is also possible to reduce the size of the code, but it is not its main function, since it has been designed more as a security technique.

Encryption

The encryption process transforms the content into ciphertext, using complex algorithms that will prevent the file from being understood, even if it can be opened. It is used more as a security feature than as a technique to reduce the size of a file.

4. How to Minify Javascript Code

Javascript code minification can be done both manually and automatically. Among the most popular are:

1.- JS Min

JS Min is a library oriented to the minification of JavaScript code through commands. It takes care of filtering and removing characters, but does not change the functionality of the website.

To work with JS Min it will be necessary to install it as a global script within the site and it will start to significantly reduce the extra characters. However, the result may produce some errors, so it is recommended to keep the original file to avoid extensive damage.

2.- UglifyJS

UglifyJS It is one of the most used tools by programmers, since it allows, in addition to minifying, compressing the JavaScript code. It has a free version with which it is possible to use an unlimited number of public packages.

Although it was initially created to work with NodeJS, it works with any platform that uses JavaScript.

UglifyJS compression also affects those files that contain functions or variables that are in other files, but are called from the core code.

3.- Toptal

The Javascript minifier of Toptal is an online solution that offers fast code compaction to make it lighter.

In addition, it has an option that converts the code into a .JS file, with which you can group functions to make calls from HTML.

4.- JSCompress

JSCompress compress and minify your JavaScript files online and in seconds. You just have to paste the code or upload it to reduce the weight of the file by up to 80%, completely free.

5.- WP-Optimize

WP Optimize is a free WordPress plugin oriented to handling cache memory to speed up the loading of the site. But, it includes an option to compress and minify your JavaScript code.

This tool will be very useful for your website, because it includes other additional features that defer the loading of heavy elements within the web page. Therefore, the maximum optimization of the page created with Wordpress is obtained.

6.- Fast Velocity Minify

Fast Velocity Minify is another free WordPress plugin but it works in a different way as it creates the minified code in real time.

It creates a minified file at the time of the first HTTP request, after its installation. Once created, the minified file can be called from any other web page.

7.- Autooptimize

Autooptimize is a WordPress plugin that minifies all scripts on the site and ensures that JavaScript does not block rendering. It does this by moving the scripts to the end of the file.

This tool has other features that allow you to fully optimize the website. Among other things, it minifies HTML and CSS code, optimizes images and Google fonts.

Conclusion

Minification allows you to compact the code to make the files lighter and favor the acceleration of the loading of a website.

It differs from other forms of compaction such as compression, obfuscation and encryption, since minification does change the structure of the code, although not its functionality and its only mission is to reduce the weight of the file.

JavaScript is a language that supports minification and this improves the performance of the site in general, since the code is usually one of the elements that intervene in a web page that most affects the load.

If you want to improve the user experience, as well as the organic positioning of your website, some tools can help you to minify the JavaScript code.

●       JS Min

●       UglifyJS

●       Toptal

●       JSCompress

●       WP Optimize

●       Fast Velocity Minify

●       Autooptimize

Thanks for your time ;-)