HTML & CSS

Minify CSS and JavaScript for a Small Web Page

Minify a page’s CSS and JavaScript separately, preserve file relationships and behavior, then verify the exact assets the browser loads.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Process each language with its own minifier

To minify CSS and JavaScript for a small page, make a compact output file for each language. Use Minify CSS for the stylesheet and Minify JavaScript for the script. Do not paste both files into one input: their syntax and the rules for preserving behavior are different.

Keep the readable files as your maintained source, for example notice.css and notice.js. Save their generated counterparts as notice.min.css and notice.min.js. This naming convention helps you distinguish source from output, but the filename itself does not perform minification. The browser can load a minified file with any valid name.

Use a small component as a complete example

<button id="toggle" type="button" aria-expanded="false">Show details</button>
<p id="details" hidden>The delivery window is two working days.</p>

#toggle {
  padding: 8px 12px;
  color: #ffffff;
  background: #1d4ed8;
}
#toggle:focus-visible { outline: 3px solid #111111; outline-offset: 3px; }

const button = document.querySelector('#toggle');
const details = document.querySelector('#details');
button.addEventListener('click', () => {
  details.hidden = !details.hidden;
  button.setAttribute('aria-expanded', String(!details.hidden));
  button.textContent = details.hidden ? 'Show details' : 'Hide details';
});

Minify the CSS and JavaScript snippets separately, then use the generated files in a page containing the markup. The script should still toggle the paragraph, update the button label and expose the expanded state. Keyboard activation should produce the same change as a pointer click. This checks the actual interaction rather than merely checking that output text exists.

Point the page at the generated files

<link rel="stylesheet" href="assets/notice.min.css">
<script src="assets/notice.min.js" defer></script>

The example uses a classic external script with defer so the elements have been parsed before the script queries them. Keep the loading model used by your real application: a module still needs its module semantics, and dependencies still need to be available in the correct order. Minifying a file does not resolve imports or convert one loading model into another.

Avoid accidentally loading both the source script and its minified counterpart. In the toggle example, registering the same handler twice could toggle the paragraph twice per click, leaving it apparently unchanged. The stylesheet can also be duplicated without a visible immediate failure, making network inspection a useful part of the check.

Understand the local tools’ boundaries

The CSS tool parses and serializes compact CSS without merging rules, compiling Sass or validating every property value. The JavaScript tool parses scripts or modules and generates compact code without executing it, transpiling language features or renaming your identifiers. TypeScript and JSX require their appropriate compilation process before this JavaScript-only minification step.

Both operations must preserve literal text and meaningful syntax. A comment-looking sequence inside a string is part of that string; a line break following return can affect a JavaScript statement. Retain required dependency notices and inspect the final output when a file carries licensing conditions. Compact code should remain the same program and stylesheet.

Verify what the browser actually received

Reload the page and inspect the network requests for both generated files. Confirm the requested paths, successful responses and absence of duplicate source-file requests. Check the console for parsing or runtime errors. A copied artifact that was never referenced by the page cannot improve that page’s transfer size.

Compare the interaction and computed styles before and after the swap. Test the toggle twice, once to open and once to close, and check keyboard focus visibility. Include a narrow viewport so the label and paragraph wrap naturally. A script that only works for its first click or a stylesheet that hides a focus outline has not passed the component comparison.

Keep future updates tied to the maintained source

When the component changes, edit the readable source and regenerate both affected outputs. Use your project’s existing cache version or content-hash process when publishing them. Keep the old asset references available for rollback until the delivered page has been checked. Do not make a last-minute repair only inside a generated file that the next build will overwrite.

Measure uncompressed UTF-8 bytes separately from HTTP-compressed transfer bytes. Minification and transport compression can work together, but they are different layers, as explained in the HTTP compression guide. For frequent releases, move this two-file workflow into the project’s build process so copying output is no longer a manual release dependency.