Using minification to reduce file sizesfor Drupal 11 , 10 , 9 , and 8

Home » Performance Optimization » Using minification to reduce file sizes
Last updated :  
11.x , 10.x , 9.x , 8.x

Aggregation reduces how many files the browser fetches; minification reduces how big each of those files is, by stripping whitespace, comments, and shortening variable names in the process. Drupal does this automatically as part of the same aggregation pipeline — you don't configure it separately.

What you'll learn in this lesson

  • How minification fits into the aggregation pipeline (it isn't a separate toggle)
  • What actually gets stripped, and why source maps matter for debugging minified output
  • A common mistake: shipping unminified debug code that assumes readable variable names

It's not a separate setting

There's no "Minify CSS/JS" checkbox distinct from aggregation — when you enable Aggregate CSS files or Aggregate JavaScript files at /admin/config/development/performance, Drupal's asset optimizer both combines and minifies as one step, using \Drupal\Core\Asset\CssOptimizer and \Drupal\Core\Asset\JsOptimizer internally. A CSS rule like:

.my-block {
    margin: 10px;
    padding: 5px;
}

becomes .my-block{margin:10px;padding:5px} in the aggregated output — same behavior, a fraction of the bytes.

Debugging minified JS in production is genuinely painful without help: a stack trace pointing at "line 1, column 48291" of a single-line file tells you almost nothing. If you ship a custom library to production, consider whether your build process should also generate a source map so browser dev tools can map minified code back to your real source — Drupal core's own optimizer doesn't generate source maps itself, so this matters most for custom JS you build with your own toolchain (webpack, esbuild) before attaching it as a library.

See it for yourself

With aggregation enabled, open any generated file under /sites/default/files/css/ or /js/ directly in the browser — it'll be a dense, single-line (or near-single-line) file, in contrast to the readable formatting of your original source.

Quick check: you want minified CSS/JS on production but full, readable files while developing locally. Do you need a separate minification setting per environment? (No — since minification isn't a separate toggle, simply disabling aggregation in development, as covered in the last two lessons, already gives you unminified files. Enabling aggregation on production gives you both aggregation and minification together.)

Key takeaways

  • Minification is bundled into Drupal's aggregation step — enabling aggregation gets you both, there's no separate setting.
  • CssOptimizer/JsOptimizer strip whitespace and comments automatically; you don't write minification logic yourself for core-managed assets.
  • For custom JS built with an external toolchain, generate source maps yourself if you need readable production debugging — Drupal's own optimizer doesn't produce them.

Coming up next

Smaller, fewer files help — but images are usually the biggest payload on a page. Next: Lazy Loading Images.