Why is HTML Minification Important? How to Minify HTML, CSS?
What is Minification?
Minification means to minimize code (HTML, CSS, JS) and markup in your web pages and script files.
This reduces load times and bandwidth usage on websites. Moreover, it improves site speed and accessibility. Additionally, a user can access your website even with a limited data plan.
Why Minify HTML?
The primary goal is to remove redundant or unnecessary data such as spacing, well-named variables, and comments. Although developers tend to make the code and markup more readable for others who might work on it later.
But it puts a negative effect when it comes to serving pages. Therefore, anything that makes the HTML readable to developers but is not essential for the compilation that can be modified and eliminated.
When files are minified then, comments, extra-spaces are removed and variable names are crunched to minimize the code and reduce the file size. There is only one downside of this process that the minified file is not readable. So, it is crucial to keep both versions of the file.
Designers and developers can work on the human-readable file whereas the other version is used to deploy to the server.
To distinguish the files from one another, the original resource contains ".html" and the minified version uses ".min.html" file extension.
Sometimes the minimized file size is reduced to 60%.
Why Minify CSS?
Across the board, the source code minification reduces the size of the file and can speed up how long it takes the browser to download, and execute such code. However, the critical thing about reducing CSS is that CSS is a render blocking resource on the web.
This means that users will probably not be able to view any content on a web page unless the browser has created CSSOM (DOM but not with CSS information), which only happens when this document After downloading and parsing all the style sheets represented by the document.
The minification is important because unnecessarily large CSS files, due to shipping of unminified or unused CSS, help provide users with this unwanted experience.
What is the difference between minification, obfuscation, compression, encryption, or uglification?
Code minification and compression are often used interchangeably, perhaps because they both address performance optimizations that reduce size. But they are different, and I want to explain how:
Minification
Alters the content of code. This reduces the code file size by removing unwanted spaces, characters and formats, resulting in fewer characters in the code. It can optimize the code by changing the variable securely to use even fewer characters.
Compression
Doesn't actually change the content of the code - well, unless we consider binary files such as images, which we are not covering in this research. When the browser is requested, it reduces the file size by compressing the files before serving the browser.
Uglification
This is essentially the same as Manifestation. Uglify JS is a JavaScript library for minimizing JavaScript files. To 'uglify' a JavaScript file is to minify it using Uglify. Ability improves performance while reducing readability.
Encryption
This is the process of translating data called plain data, into encoded data. This encrypted, or encoded, data is known as zero text, and requires a secret key to decrypt it. Browser cannot execute encrypted code. Encryption is a security feature, and does not necessarily reduce the size of a file.
Obfuscation
This process is done to hide the business logic. The code is modified in such a way that it is not readable by humans. This makes reverse engineering difficult. Unlike advanced encryption, computers are still able to understand and apply code. Obfuscation is accomplished by renaming variables, functions, and members. The resulting reduction in file size also improves performance, although this is not the root cause of the problem.
Here’s how a developer would write a JavaScript file for usage in a website:
How Unminified, CSS code looks like before minification:
html,
body {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
body .pull-right {
float: right !important;
}
body .pull-left {
float: left !important;
}
body header,
body [data-view] {
display: none;
opacity: 0;
transition: opacity 0.7s ease-in;
}
body [data-view].active {
display: block;
opacity: 1;
}
body[data-nav='playground'] header {
display: block;
opacity: 1;
}
/* Home */
[data-view='home'] {
height: 100%;
}
[data-view='home'] button {
opacity: 0;
pointer-events: none;
transition: opacity 1.5s ease-in-out;
}
[data-view='home'] button.live {
opacity: 1;
pointer-events: all;
}
[data-view='home'] .mdc-layout-grid__cell--span-4.mdc-elevation--z4 {
padding: 1em;
background: #fff;
}White space is used generously and long.
When minified, the same CSS code looks like this:
body,html{height:100%}body{padding:0;margin:0}body .pull-right{float:right!important}body .pull-left{float:left!important}body [data-view],body header{display:none;opacity:0;transition:opacity .7s ease-in}body [data-view].active{display:block;opacity:1}body[data-nav=playground] header{display:block;opacity:1}[data-view=home]{height:100%}[data-view=home] button{opacity:0;pointer-events:none;transition:opacity 1.5s ease-in-out}[data-view=home] button.live{opacity:1;pointer-events:all}[data-view=home] .mdc-layout-grid__cell--span-4.mdc-elevation--z4{padding:1em;background:#fff}What is JavaScript Minification?
Minimization, also called minimization, is the process of removing all unnecessary characters from JavaScript source code without modifying their functionality. This includes using small variable names and functions to remove empty spaces, comments and semantics. Short file size as a result of minifying JavaScript code.
For example, here is a block of code before and after the minification:
Before Minification: eight lines of JS code
// This function takes in name as a parameter
// and logs a string which greets that name
// using the information passed
function sayHi (name) {
console.log ("Hi" + name + ", nice to meet you." )
sayHi("Nick");After minification: A single line of JS code
function sayHi(o){console.log("Hi"+o+",nice to meet you.")sayHi("Nick");Minification increases webpage loading speed, improves website experience, make both visitors and search engines happy.
Online Tools to Minify HTML/CSS/JS
1. https://smallseotools.com/minify-html/
2. https://www.willpeavy.com/tools/minifier/
3. http://minifycode.com/html-minifier/