How to Minify CSS, JavaScript, and HTML on Webflow?

Minification removes whitespace, comments, and redundant code from CSS, JavaScript, and HTML files. A developer-formatted CSS file with indentation and comments might be 120KB. The minified version of the same file might be 80KB. Smaller files download and parse faster.

Webflow handles minification automatically for everything it generates. Your Webflow site's CSS and JavaScript are minified when you publish. The HTML is served in a compact format. You don't need to do anything for Webflow's own output.

The issue is with custom code you add yourself: code pasted into Webflow's custom code sections — Site Settings Head/Footer Code, or Page Settings custom code — is served exactly as you paste it. If you paste a 200-line commented JavaScript file, those comments ship to every visitor's browser.

How to minify custom code before adding it to Webflow: for JavaScript, use Terser (available online at terser.org). For CSS, use cssnano or any online CSS minifier. Paste your code into the tool, get the minified output, paste that into Webflow instead. This is a one-time step per script — re-minify only when you update the code.

For scripts loaded from external URLs (analytics snippets, tracking pixels), the provider typically serves a pre-minified version. Check whether the script URL ends in .min.js — if it does, it's already minified. If you're accidentally loading a development version, switch to the production URL.

HTML minification: Webflow minifies its generated HTML. The exception is raw HTML inside embed components, which ships as-is. For most embed use cases (iframes, small widgets), this doesn't matter. For large HTML embeds, clean them up before pasting.

Monthly audit: in PageSpeed Insights, the "Minify CSS" and "Minify JavaScript" audits flag unminified resources. These will almost always be custom code you added, not Webflow's generated output. Click through to see which URLs are flagged, then trace them back to the custom code section where they originate.

Minification is typically a 5–20% reduction in file size for assets that are already small. Its real value is as part of a larger stack: minify + Brotli compression (handled by Webflow) + caching = meaningfully faster asset delivery, especially on repeat visits.