Minification is the process of removing unnecessary characters from source code to reduce file size. This includes whitespace, line breaks, comments, and sometimes shortening variable names. The resulting code behaves identically but downloads faster.
How Minification Works
Minification tools parse JavaScript, , or HTML files and output smaller versions. For example, a CSS file might go from readable formatting with comments to a single line of compressed code. Variable names in JavaScript can be shortened from descriptive words to single letters.
The process is a form of lossy compression for readability but lossless for functionality. Browsers execute minified code exactly as they would the original.
Minification vs Compression
Minification alters the actual code by removing characters. Compression like gzip or Brotli uses algorithms to make files smaller during transfer without changing the code itself. Most sites use both: minified files that are also gzip compressed during delivery.
Tools and Implementation
Popular minification tools include UglifyJS and Terser for JavaScript, CSSNano and csso for CSS. Build tools like Webpack, Rollup, and Vite include minification as part of production builds.
Many CDNs offer automatic minification, storing minified versions on edge servers while you keep readable source files. This removes the need to manage minification in your build process.
Performance Impact
Minification typically reduces JavaScript file sizes by 20-30% before compression. Combined with gzip, total savings can reach 70-80%. Smaller files mean faster downloads and reduced parsing time, directly improving page load metrics.
