How to Minify HTML, CSS, and JavaScript

Minification reduces the size of your code files by removing unnecessary characters without changing how they work. Smaller files load faster, improve Core Web Vitals, and save bandwidth. This guide covers what minification does and how to minify your frontend code.

What Minification Does

Minifiers optimize code by applying several transformations:

• Remove whitespace. Strip spaces, tabs, and newlines between tokens.
• Remove comments. Eliminate single-line and multi-line comments.
• Shorten variable names. Rename local variables to shorter names where possible.
• Simplify expressions. Collapse boolean expressions, remove unnecessary semicolons, and optimize number literals.

Before and After

// Before (220 bytes)
function greet(name) {
  // Say hello
  const message = "Hello, " + name + "!"
  console.log(message)
  return message
}

// After (107 bytes)
function greet(n){let e="Hello, "+n+"!";return console.log(e),e}

How to Minify Code Step by Step

1. 1Choose the right tool. Use dedicated minifiers for each language. HTML, CSS, and JavaScript each have specific minification rules.
2. 2Paste your code. Copy your source code into the HTML Minifier, CSS Minifier, or JavaScript Minifier.
3. 3Copy the result. The minified output appears instantly with a size comparison showing how much space you saved.

When Not to Minify

During development, keep your code readable and unminified. Only minify for production builds. Most modern build tools (Webpack, Vite, Next.js) handle minification automatically in production mode.

Try It: Minify Your Code Online

Related Tools