Minification

What is Minification?

Minification removes unnecessary characters from code files – whitespace, comments, line breaks, long variable names – without changing how the code works. The result is smaller files that download faster.

A 100KB JavaScript file might become 40KB after minification. That's 60% less data to transfer.

What Gets Minified

JavaScript

• Removes comments and whitespace
• Shortens variable names (userName becomes u)
• Simplifies expressions
• Removes dead code

CSS

• Removes comments and whitespace
• Combines selectors
• Shortens colour codes (#ffffff becomes #fff)
• Removes unnecessary semicolons

HTML

• Removes comments
• Reduces whitespace
• Removes optional tags
• Shortens attribute values

Before and After

Readable CSS

/* Main heading styles */
.heading {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20px;
}

Minified CSS

.heading{font-size:24px;font-weight:bold;color:#333;margin-bottom:20px}

Same result, smaller file.

Why Minification Matters

Faster Loading

Smaller files transfer more quickly, especially on mobile connections.

Better Performance Scores

Minified assets contribute to better Lighthouse and Core Web Vitals scores.

Lower Bandwidth Costs

Less data transferred means lower hosting costs at scale.

How to Minify

Most modern development workflows handle minification automatically:

• Build tools – Webpack, Vite, Parcel
• Task runners – Gulp, Grunt
• CMS plugins – WP Rocket, Autoptimize
• CDNs – Cloudflare, CloudFront

You don't need to do this manually. Development tools serve readable code to developers and minified code to visitors.