What is Minification?

Definition

Minification is a bandwidth optimization technique that reduces the size of code transmitted over the web. With minification, HTML, JavaScript, and CSS files are rewritten to provide identical functionality in a much smaller footprint.

Graphic for minification by MaxCDN.

Overview

When it comes to generating a page or running a script, web browsers aren’t concerned about the readability of code. Minification strips a code file of all data that isn’t required in order for the file to be executed. Unlike traditional compression techniques, minified files don’t need to be decompressed before they can be read, modified or executed.

Minification is performed after the code for a web application is written, but before the application is deployed. When a user requests a webpage, the minified version is sent instead of the full version, resulting in faster response times and lower bandwidth costs. Minification is used in websites ranging from small personal blogs to multi-million user services.

How Minification Works

Minification works by analyzing and rewriting the text-based parts of a website to reduce its overall file size. Minification extends to scripts, style sheets, and other components that the web browser uses to render the site.

Minification is performed on the webserver before a response is sent. After minification, the web server uses the minified assets in place of the original assets for faster distribution to users.

Here’s a step-by-step description of how minification works:

A web developer creates a JavaScript or CSS file to be used in a web application. These files are formatted for the developer’s convenience, which means they make use of whitespace, comments, long variable names, and other practices for readability.
The developer applies a minification technique (see below) to convert the file into one that’s more optimized, but harder to read. Common minification techniques include removing whitespace, shortening variable names, and replacing verbose functions with shorter, more concise functions.
The web server uses the minified file when responding to web requests, resulting in lower bandwidth usage without sacrificing functionality.

The benefit of minification is that it only needs to be performed when the source file changes. When combined with other compression techniques, minification can greatly reduce bandwidth usage for both the enterprise and the user.

Minification Techniques and Tools

One of the more comprehensive minification tools is minified. Minify handles minification, caching, and compression of CSS, HTML and JavaScript files. Minify also offers integration with popular web applications and frameworks including WordPress and the Zend Framework.

HTML minification

Google provides the PageSpeed Insights Chrome extension, which recommends performance improvements to any website. PageSpeed Insights provides a Minify HTML rule which generates a minified version of the open website.

CSS minification

Since CSS is less likely to change frequently, several online tools provide instant CSS minification. CSS Minifier is a quick and simple way to minify CSS, while Refresh-SF uses multiple tools to minify CSS, HTML, and JavaScript.

JavaScript minification

Google’s JavaScript optimization tool - the Closure Compiler - creates a more efficient copy of any JavaScript file. When a developer makes a change to a JavaScript file, he or she uses the Closure Compiler to minify the code. The new file is pushed to the webserver where it can be accessed by a user’s web browser.

Example of Minification

The following code block shows an example of plain HTML and CSS:


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

The following shows the same code after minification:

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

Benefits of Minification

Minification has all the benefits of traditional compression techniques with fewer drawbacks.

Users load content faster as less unnecessary data needs to be downloaded. Users experience identical service without the additional overhead.
Enterprises see lower bandwidth costs as less data is transmitted over the network. The extra content that only developers care about is no longer being sent to users.
Enterprises also see lower resource usage since less data needs to be processed for each request. The minified content - which only needs to be generated once - can be used for an unlimited number of requests.

Conclusion

Minification is a fast and easy way to reduce the web application’s resource usage. Even with standard compression techniques, minification can improve the time needed to render a page by over 60%.

Minifying your website can lead to large performance gains without compromising your users’ experience.

If you have any questions or experience any issues, please reach out to the Support Team, live chat and ticket support are available 24/7.

MaxCDN Help Center