How to Minify CSS for Static Sites

June 19, 2026 · 10 min read · How-to

Unminified CSS is fine while you iterate locally, but production visitors download every whitespace character and comment. Minification removes redundant bytes without changing styles, which improves Time to First Byte perception on slow mobile networks. Static sites on Cloudflare Pages do not minify your assets automatically—you opt in via a build command or pre-deploy script. This how-to covers practical minification workflows that stay compatible with no-framework LaunchStatic projects.

When minification is worth the effort

If your entire CSS bundle is under 20 KB gzip, minification saves a few hundred bytes—nice but not launch-blocking. When CSS grows past 50–80 KB uncompressed, or you embed large comment blocks and duplicated rules, minify before marketing launch. Pair minification with removal of unused styles for bigger wins. Measure with Lighthouse and the Network panel; optimize what the waterfall proves is slow.

Prepare a safe workflow

Never overwrite your only readable source file. Keep main.css as the human-edited source and emit main.min.css for production, or store sources under assets/css/src/. Reference the minified file in HTML only after you verify styles visually. Commit both files if your deploy pipeline has no build step—simplicity beats forgetting to regenerate minified output before a push.

assets/css/
  main.css        # source of truth
  main.min.css    # generated, linked in production HTML

Option A: clean-css CLI (Node)

The clean-css project is a widely used minifier. Install locally in your repo (not globally) so teammates share the same version.

npm init -y
npm install clean-css-cli --save-dev
npx cleancss -o assets/css/main.min.css assets/css/main.css

Add an npm script for repeatability: "minify:css": "cleancss -o assets/css/main.min.css assets/css/main.css". Run it before git commit when styles change. On Cloudflare Pages, set build command to npm run minify:css and output directory / if you want automation on every push.

Option B: esbuild for CSS bundling

If you split CSS into partial files, esbuild can bundle and minify in one step—even though LaunchStatic defaults to a single stylesheet.

npx esbuild assets/css/main.css \
  --minify --outfile=assets/css/main.min.css

esbuild is extremely fast, which matters when you add a tiny build pipeline to an otherwise static repo. It does not autoprefix unless you chain plugins; for simple landing pages, hand-write standard properties or verify in BrowserStack once.

Option C: online minifier for one-off exports

For a single-file template download without Node installed, paste CSS into a reputable minifier, inspect output, and save as main.min.css. Do not use random browser extensions that exfiltrate code. Prefer CLI for anything commercial so the process is reproducible and auditable.

Update HTML references and cache busting

Point <link rel="stylesheet"> at the minified path. Cloudflare caches static assets aggressively; after deploy, purge cache if users report stale styles. Optional cache bust: rename to main.a1b2c3.min.css or add query strings—only needed when you have seen CDN stickiness problems.

<link rel="stylesheet" href="/assets/css/main.min.css">

Verify nothing broke

Minifiers are safe for well-formed CSS but can break hacks that rely on comment placement (rare in modern projects). Open critical pages—home, pricing, mobile nav—and confirm layout, focus states, and dark-mode variables if present. Run Lighthouse Performance again; you should see slightly smaller transfer sizes and unchanged Accessibility scores.

• Source CSS preserved separately from minified output
• All HTML pages link to the same production CSS file
• Build command documented in README
• Visual regression check on mobile width
• Cloudflare cache purged after major style deploy

Remove unused CSS for bigger savings

Minification shrinks bytes; purging unused rules shrinks more. Audit selectors with coverage tools in Chrome DevTools—open Coverage, reload the page, and sort by unused CSS percentage. Delete dead rules from the source file, then re-minify. For multi-page static sites, avoid copying entire framework CSS bundles when you only need a grid and typography. LaunchStatic templates intentionally ship a single moderate stylesheet so you start lean.

Integrate with your deploy pipeline

On Cloudflare Pages, add a package.json script and set the build command to npm run minify:css even if that is your only build step. On GitHub Actions, run the same script before upload-pages-artifact. Document the command in README so contributors do not commit HTML pointing at stale minified files. If you skip automation, add a pre-commit reminder in CONTRIBUTING.md—human processes fail under launch pressure.

Measure gzip and Brotli impact

Cloudflare serves Brotli-compressed responses to supporting browsers. Minification improves gzip/Brotli ratios by removing repeated whitespace patterns. Compare Network tab sizes before and after minify on the same deploy preview. Record bytes saved in your performance log—helpful when deciding whether to adopt a CSS preprocessor later. For most LaunchStatic pages, minified single-file CSS plus CDN compression already achieves excellent transfer sizes.

Source maps for larger teams

If your CSS grows past a few hundred kilobytes and multiple authors edit it, consider generating source maps during minify for DevTools debugging. LaunchStatic single-file stylesheets rarely need this complexity—skip source maps until pain appears. When you add them, do not publish .map files publicly unless you are comfortable exposing original class names and comments.

Run Lighthouse before and after minification on the same preview URL. Store the Performance score delta in your launch checklist—evidence helps justify build tooling to teammates who prefer zero-config deploys.

Minify JavaScript with the same discipline if you add client-side helpers later. Symmetry keeps your asset pipeline understandable when the project grows beyond pure HTML.

Commit minified output in the same pull request as source CSS changes so reviewers see both files diff together and catch accidental regressions early.

Tag releases after CSS changes so you can roll back minified assets quickly if a deploy looks wrong on mobile Safari.

Related: Cloudflare deploy guide Fix broken links checklist Optimized templates Static site tooling