Minify HTML, JavaScript, and CSS Together

Full static site optimisation before launch

Before launching a static marketing site with 12 HTML pages, 3 CSS files, and 5 JavaScript files, the developer manually minifies all assets using the FixTools suite. The CSS files reduce from a combined 78KB to 61KB. The JavaScript files reduce from 145KB to 112KB. The HTML pages average 14 percent reduction per file. The total asset size before server compression drops from 279KB to 217KB, a 62KB saving that translates to a 200ms faster load time on a standard broadband connection and over 400ms on a throttled 4G mobile connection.

Performance sprint to improve Core Web Vitals

A product team runs a focused two-day performance sprint targeting LCP improvement on their top three landing pages. They systematically minify all three asset types: HTML saves an average of 14KB per page, CSS saves 22KB across shared stylesheets, and JavaScript saves 45KB from the main bundle after switching to a newer Terser configuration. The combined 81KB reduction in total payload improves LCP from an average of 3.8 seconds to 2.9 seconds across the three pages, moving all three from "Needs Improvement" to "Good" in their Core Web Vitals assessment.

After minifying HTML, CSS, and JavaScript, add up the original sizes of all three file types and the minified sizes, then calculate the percentage reduction as a single figure. For example, if the combined original size is 290KB and the combined minified size is 222KB, the total saving is 23 percent. This single-number metric is clear, meaningful, and directly communicable to stakeholders who want to understand the impact of the optimisation sprint without reviewing each file type separately.

While reviewing files for minification, look for utility functions that appear in multiple JavaScript files, or CSS utility classes and reset rules that are duplicated across multiple stylesheets. Minification reduces the byte cost of duplicate code proportionally but does not eliminate the duplication itself. Identifying and removing duplicate code before minification produces larger and more permanent savings than minification of duplicated content, and reduces the complexity of the codebase as an additional benefit.

When deploying minified CSS and JavaScript for production, generate source maps alongside the minified files. Source maps allow browser DevTools to display the original formatted, named source code when you inspect styles or debug JavaScript in a production session. Without source maps, minified variable names and collapsed CSS rules make production debugging extremely difficult. HTML source maps are less commonly used but are available through some build tools. The source map files are large and should not be served to regular users but should be available to your internal DevTools.

Define maximum acceptable file sizes for your HTML, CSS, and JavaScript bundles and enforce these limits as a failing check in your CI/CD pipeline using a tool like bundlesize or the built-in budget features in Angular CLI and Next.js. When a build exceeds the budget for any file type, the pipeline fails and alerts the developer who introduced the change. This prevents the gradual size creep that can quietly undo months of optimisation work as new dependencies, components, and features are added to the project over time.

Minify CSS and JS first (they may be referenced in HTML). Then minify the HTML. This order ensures inline scripts and styles are also minified if present.

After minifying HTML, CSS, and JS, compare the total before and after sizes across all files. The combined reduction gives a realistic picture of performance improvement.

For projects with regular deployments, automate HTML, CSS, and JS minification in a build pipeline (Webpack, Vite, Parcel). Use FixTools for one-off tasks or during initial setup.