How to Minify CSS and JavaScript
Code files are written to be readable by humans, with spaces, line breaks, comments, and long variable names. Browsers do not need any of that. Minification strips these extras so files are smaller and download faster. It is a standard step for production websites.
What minification does
- Removes whitespace, line breaks, and comments
- Shortens variable and function names in JavaScript
- Simplifies code where it can without changing behavior
The minified file works exactly like the original, only more compactly. Savings vary, but for large stylesheets and scripts they can be significant.
Minification versus compression
They are different and complementary. Minification changes the code itself. Compression, such as Gzip or Brotli, is applied by the server while sending files and shrinks them further for transfer. Use both. Most hosts support compression, and you can verify it with tools in how to test website speed.
How to minify
Website builders and managed platforms usually do it automatically.
WordPress and other CMS platforms have optimization plugins that minify CSS and JavaScript with a setting or two. Test your site afterward, since aggressive options can occasionally break layouts or features.
Custom projects can use build tools to minify automatically as part of the process. Common tools exist for both CSS and JavaScript.
Quick one-off files can be minified with online tools, though remember to keep your original, readable source.
Combine files carefully
Bundling several files into one used to be important because each request had a cost. With modern HTTP versions, multiple small files are less of a problem, so aggressive combining matters less than it did. Focus on removing unused code rather than just merging it.
Remove unused code
The best byte is the one you never send. Audit your plugins, themes, and libraries. If you load a large framework for a small feature, consider alternatives. PageSpeed Insights flags unused CSS and JavaScript.
Load scripts sensibly
Use defer or async for scripts that are not needed for the first view, so they do not block rendering. This helps your Core Web Vitals.
Keep source maps and originals
Store your unminified files so you can edit them later. Source maps help developers debug minified code.
Test after changes
Check forms, menus, sliders, and checkout flows to make sure everything still works. Clear caches too. See browser caching explained.
The bottom line
Minify your CSS and JavaScript, compress them on the server, and remove what you do not use. It is routine, low-risk, and worth doing on every live site. Read our full load time checklist for the rest.