Content Optimization with Minification

Minification is a method for deleting unnecessary data from the main codes in JavaScript (JS), CSS, and HTML files without making changing the general performance of each file while also reducing their sizes. It rewrites JavaScript, CSS, and HTML files and deletes all of the empty spaces in the code, developer comments, and unused codes.
This method brings about two advantages:

It helps web pages load faster.
It decreases the required bandwidth to facilitate users’ browsing experience even if they have low bandwidths.

Why is the Minification of JS, CSS, and HTML Files Necessary?

While writing JS, CSS, and HTML files, web developers use empty spaces. They write each piece of code in a new line, and make comments for the better readability and tangibility of code logic for future references. These comments and blank spaces are helpful and even necessary when developing web pages. However, once they are published, these comments and blank spaces act as excessive data, causing browsers and webservers to carry out extra analysis on the which results in analysis of excessive traffic. This is not functional since browsers and web servers only need to receive the main codes of web pages.

Minification eliminates these empty spaces and extra data to reduce the size of JS, CSS, and HTML files, helping webpages load faster and reducing the required bandwidth.
The following diagram shows an HTML file before it is minified:

                            
<html>
<head>
    <style>
        #myContent {
            font-family: Arial;
            font-size: 90%;
        }
    </style>
</head>
<body>
    <!-- start of myContent -->
    <div id="myContent">
        <p>
            Hello world!
        </p>
    </div>
    <!-- end of myContent -->
</body>
</html>

The following file is the result of minification:

                    
<html><head><style>#myContent{font-family:Arial;font-size:90%;}</style></head><body><div id="myContent"><p>Hello world!</p></div></body></html>

If minification is appropriately exercised, the minified file size can decrease by 60%. This is why minification is a standard procedure for optimizing web pages.

Minification in Content Distribution Network (CDN)

Minification is a major component of frontend optimization (FEO). FEO includes a series of techniques and tools employed to reduce the size of files and the number of requests for web pages.

Minification can be difficult to exercise and maintain. For instance, it is nearly impossible to perform minification on large files manually. Even automated minification tools sometimes face specific challenges. The main problem in the minification of JS, CSS, and HTML files is to retain a large number of files (both main files for possible future developments and minified files for release). Another one is to continuously ensure that different versions of files are kept in sync.

Arvancloud Content Delivery Network (CDN) provides automatic minification for web page files to solve these problems.
A website administrator is simply required to upload the main files of a website on the server (without minifying them). Arvancloud CDN automatically develops the minified versions of their JS, CSS, and HTML files and caches them on its servers.

At the same time, the minified versions of the main files are automatically updated and synchronized along with all the changes.

Arvancloud CDN performs an automatic minification process to help web pages load faster so that website administrators would not need to consider any excessive configurationsperform minification on large files manually.