Minification

What Is Minification?

Minification is the process of stripping out everything from your code files that a browser does not need to read. This includes whitespace, line breaks, code comments, and long variable names. The result is a smaller file that does exactly the same thing but downloads faster.

Here is a simple example. Before minification:

/* Set the body font */
body {
font-family: sans-serif;
font-size: 16px;
line-height: 1.6;
}

After minification:

body{font-family:sans-serif;font-size:16px;line-height:1.6}

Same result in the browser, but the file is significantly smaller. Across an entire WordPress site with dozens of CSS and JavaScript files, minification typically reduces total file sizes by 10–30%. That translates directly to faster page speed and better Core Web Vitals scores.

What Gets Minified

• CSS files — Stylesheets that control your site's appearance. Themes and plugins each add their own CSS files. Minifying them removes comments, extra whitespace, and shortens color codes (e.g., #ffffff becomes #fff).
• JavaScript files — Scripts that add interactivity to your site. Minification removes comments, shortens variable names (e.g., buttonElement becomes a), and strips unused code.
• HTML — The page markup itself. HTML minification removes comments, extra whitespace between tags, and optional closing tags.

Minification in WordPress

WordPress does not minify files by default. You need a plugin or your CDN to handle it:

• WP Rocket — One-click minification for CSS, JavaScript, and HTML. Also combines (concatenates) files to reduce HTTP requests.
• LiteSpeed Cache — Free minification built into its optimization suite. Works best on LiteSpeed servers.
• Autoptimize — Free, dedicated optimization plugin that minifies and combines CSS/JS/HTML.
• Cloudflare — Can minify CSS, JS, and HTML at the CDN edge, before files even reach the visitor. Enable it in the Speed settings.

Warning: Minification can occasionally break things — especially JavaScript minification. If your site looks wrong or features stop working after enabling it, try minifying CSS and HTML only, and exclude specific JavaScript files that cause issues. Most caching plugins let you add exclusion rules.

Why It Matters

Every kilobyte counts on mobile. Google's PageSpeed Insights specifically flags unminified CSS and JavaScript as opportunities for improvement. While minification alone will not transform a slow site into a fast one, it is a free, low-risk optimization that stacks with other improvements like lazy loading, image compression, and caching. There is no reason not to enable it.

Sources: MDN: Minification, web.dev: Minify CSS, web.dev: Minify JavaScript