Minified JS/CSS.

Performance Core Web Vitals & Page Load

Unminified code wastes bytes — minification is free performance

What does this check test?

This check verifies that JavaScript and CSS files are minified — meaning whitespace, comments, and unnecessary characters have been removed, and variable names have been shortened (for JS). Minification typically reduces JavaScript file size by 30-60% and CSS file size by 20-40% before compression. Minified code is functionally identical to the original — only human-readable formatting is removed. Source maps can be used alongside minified code to enable debugging in development.

Why does it matter?

Unminified code contains whitespace, comments, and long variable names that serve no purpose in production. These extra bytes cost bandwidth to download, take longer to parse, and provide no user benefit. While text compression (Gzip/Brotli) partially compensates for unminified code, minification and compression work together — minified + compressed code is always smaller than unminified + compressed code. Minification is a zero-cost optimization with no quality tradeoff, making it one of the easiest wins available.

Who is affected?

Sites that deploy development builds to production, sites without a proper build pipeline, WordPress sites with plugins that don't minify their assets, and sites using hand-written inline `<script>` and `<style>` blocks that bypass the build process are most commonly affected. Development servers that accidentally serve unminified code to production users are a frequent cause.

Where does this apply?

Check JavaScript and CSS files in Chrome DevTools Sources panel — unminified code will have readable variable names, comments, and formatting. The Network panel shows the transfer size; compare it with the content size to assess compression, and look at the raw source for minification status. Lighthouse flags specific unminified resources with estimated byte savings.

How to fix it

Use your bundler's production mode to enable minification automatically. Enable minification in webpack:

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
  devtool: 'source-map',
};

Enable minification in Vite (on by default in production):

// vite.config.ts
export default defineConfig({
  build: {
    minify: 'terser', // or 'esbuild' (default)
    sourcemap: true,
  },
});

For Next.js: `next build` automatically minifies all output. For standalone minification: use `npx terser input.js -o output.min.js -c -m` for JavaScript and `cssnano` or `lightningcss` for CSS. Ensure your CI/CD pipeline runs production builds, not development builds.

References

AppVet checks Minified JS/CSS automatically

Run a free performance scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks