JavaScript files are often the biggest performance problem on modern websites. They must be downloaded, parsed and executed, and while that happens the page may feel frozen. Minifying your scripts is one of the easiest ways to reduce that cost, especially for custom code that was never optimised.
What JavaScript minification does
- Removes comments and whitespace
- Shortens local variable and function names when mangling is on
- Simplifies code such as removing unreachable code and shortening expressions
- Keeps behaviour exactly the same
Why we use Terser
Our JavaScript Minifier uses Terser, the same professional minifier used by popular build tools. It understands modern JavaScript properly, which makes it far safer than simple whitespace removal.
How to use it
- Open the JavaScript Minifier.
- Paste your JavaScript.
- Keep Shorten variable names on for the smallest file, or turn it off if you need readable names.
- Click Minify JavaScript.
- Copy the result or download script.min.js.
If your code has a syntax error, the tool shows the error and the line number so you can fix it.
When to use it
- Custom scripts on your website or landing pages
- Small libraries you wrote yourself
- Inline scripts that run on every page
- Code copied from tutorials that you deploy as is
Keep your original file
Always keep the readable source. Edit the original, then minify again. Never try to edit minified code directly.
Other ways to reduce JavaScript cost
- Remove scripts you do not need. Old sliders, popups and tracking codes add weight on every page.
- Load scripts with defer or async so they do not block the page.
- Load heavy widgets only when needed, for example a chat widget after a few seconds.
- Use fewer page builder animations.
Check how many scripts block your page with the Page Speed Analyzer, and track interaction delays with the Core Web Vitals Checker.
Minify CSS and HTML too
For complete optimisation, also use the CSS Minifier and the HTML Minifier.
A real example
A small online quiz site had a 90 KB game script with long variable names and detailed comments. Minifying it with mangling reduced it to about 35 KB. Adding defer to the script tag let the quiz questions appear before the script finished loading. On cheaper phones the page went from feeling stuck for two seconds to responding almost immediately. The developer kept the original file for editing and simply minified again after each update.
Test after minifying
After deploying the minified file, open the page and test its main features: buttons, forms, menus and anything interactive. Minification is very safe with Terser, but testing confirms nothing in your setup depended on a specific function name.
Common mistakes to avoid
The most painful mistake is losing the original readable file. Always keep it in a separate folder or in version control. Another mistake is minifying a file that is already minified, such as a library you downloaded from a CDN. This rarely saves anything. Some developers also merge every script into one huge file, which forces visitors to download code for pages they never open. Split scripts by page when you can. Finally, do not forget about third party scripts. Chat widgets, ad tags and tracking pixels are often bigger than your own code, and minifying your files will not fix them.
When a page breaks after minifying, open the browser console. The error message usually points to the line that failed. Fix the issue in your original file, run the minifier again and test once more before you upload.
Frequently asked questions
Can minification break my code
Terser is very safe, but code that relies on function names at runtime may need mangling turned off.
Is my code uploaded
The minifier runs in your browser. Your code stays on your device.
Is minified code secure
Minification makes code harder to read but is not real protection. Never put secrets in client side code.
Compress your scripts now with the free JavaScript Minifier.