Minification

What is minification?

Minification is the process of removing everything a browser does not need to run a file: whitespace, line breaks, comments and long variable names. The result is a smaller file that behaves exactly like the original. It applies mainly to HTML, CSS and JavaScript, the three file types every web page downloads before it can render.

Smaller files travel faster over the network, which improves load time and metrics such as Largest Contentful Paint. On a slow mobile connection, the difference is clearly noticeable.

‍

How minification works

A minifier parses the code, then rewrites it in the most compact valid form. For CSS, it drops spaces, comments and redundant units. For JavaScript, it can also shorten local variable names (often called mangling) and remove code that can never run.

/* Before */
.button {
  color: #ffffff;
  margin: 0px 0px 0px 0px;
}

/* After */
.button{color:#fff;margin:0}

The minified version is unreadable for a human, which is why teams keep the readable source in their repository and only ship the minified build to production.

‍

What gets minified

• HTML: removes comments, extra spaces and optional attribute quotes.
• CSS: merges shorthand values, removes comments and shortens colours.
• JavaScript: strips comments, shortens identifiers and removes dead code.
• JSON and SVG: can also be minified, since they are plain text formats.

‍

Minification vs compression vs bundling

These three techniques are often confused, but they solve different problems and work best together.

Minified files still benefit from Gzip or Brotli on top, usually with a further size reduction of 60 to 80 percent.

‍

Best practices and common pitfalls

• Minify at build time, never by hand, and keep the readable source under version control.
• Generate source maps so errors in production can be traced back to the original code.
• Test the minified build: aggressive JavaScript mangling can break code that relies on function names.
• Do not minify files twice, and avoid minifying third-party scripts that are already minified.
• Combine minification with browser caching and a CDN for the best effect.

‍

Minification at BeBranded

Page weight is one of the easiest performance gains, and we treat it as part of every project. On our website design and development work, we make sure CSS, JavaScript and HTML are minified, compressed and cached correctly, then measure the result against Core Web Vitals so that the speed gain is real and not only theoretical.