Every time someone visits a page on your WordPress site, their browser downloads your CSS and JavaScript files. Those files often contain comments, whitespace, and long variable names that make them readable for developers but add unnecessary bytes to every request. Minification removes all of that without changing what the code actually does.
On their own, CSS and JS minification typically shave 10–30% off file sizes. Combined with other performance improvements like browser caching and GZIP compression, the effect compounds. This guide covers how to set it up in WordPress using a plugin, and what to watch out for when you do.
Quick Answer
Install Autoptimize and enable CSS and JavaScript optimisation in its settings. If your site runs on LiteSpeed hosting, the LiteSpeed Cache plugin includes the same minification features built in — no separate plugin needed. After enabling minification, test your site thoroughly, as combining JS files can occasionally break scripts that rely on load order.
Why Minification Matters
Minifying CSS and JavaScript reduces file sizes, which means faster downloads and faster rendering. This directly affects your Core Web Vitals scores — particularly Largest Contentful Paint (LCP), which measures how quickly the main content of a page loads. Google uses Core Web Vitals as a ranking signal, so performance improvements have SEO implications as well as user experience ones.
On a typical WordPress site with a theme and several plugins, unoptimised CSS and JS can add up to several hundred kilobytes of unnecessary overhead per page. Minification alone won’t make a slow site fast, but it removes weight that has no reason to be there.
How to Minify CSS and JavaScript in WordPress
Option 1 — Use Autoptimize
Autoptimize is a dedicated optimisation plugin that handles CSS and JS minification, aggregation, and deferral. Install it from Plugins → Add New, then go to Settings → Autoptimize.
Enable the following options to start:
- Optimise CSS Code — minifies and optionally aggregates your stylesheets
- Optimise JavaScript Code — minifies scripts; leave Also aggregate JS files unchecked until you have confirmed the site works without it
Save, then clear your site’s cache and test every page type — homepage, a blog post, a WooCommerce product page if you have one. Check that menus, sliders, popups, and forms all behave correctly.
Option 2 — Use LiteSpeed Cache (if on LiteSpeed hosting)
LiteSpeed Cache includes its own CSS and JS minification under LiteSpeed Cache → Page Optimisation. Go to the CSS Settings and JS Settings tabs and enable minification there. This avoids running two optimisation plugins simultaneously, which can cause conflicts.
Enabling JS deferral (carefully)
Both plugins offer a JS deferral option that delays non-critical scripts until after the page has rendered. This can significantly improve LCP scores, but it is also the setting most likely to break things. Enable it only after minification is stable, then test again. If anything breaks, disable deferral rather than disabling minification entirely — the two are independent settings.
Practical Tips
Start with CSS minification only, then add JS minification once you have confirmed the site is stable. JS aggregation — combining all scripts into a single file — is the setting most likely to cause conflicts, because some scripts depend on other scripts loading first. In my experience, minification without aggregation is safe on almost every site; aggregation requires more testing.
After enabling any optimisation settings, always check your site with DevTools open on the Network tab. Look for console errors that might indicate a broken script. If you see errors, use the exclusion list in Autoptimize or LiteSpeed Cache to exempt the offending script from minification.
Minification is one part of a broader performance strategy. Getting all the quick wins in place — minification, caching, compression, a CDN — is part of building a well-optimised WordPress site, which is all covered at the step-by-step guide to building a WordPress website.
Common Mistakes
- Enabling JS aggregation immediately: Combining all JS into one file changes load order and often breaks scripts — enable aggregation only after testing minification alone
- Not clearing cache after enabling minification: Your caching plugin serves old files until you clear the cache; always clear after changing optimisation settings
- Running two optimisation plugins: Autoptimize and LiteSpeed Cache both handle minification — use one, not both, or they will conflict
- Assuming minification alone fixes a slow site: Minification removes unnecessary bytes but does not fix slow server response times, unoptimised images, or missing caching — address those separately
When a CDN Handles Minification Instead
Some CDN services — Cloudflare included — offer automatic minification as part of their plan. If you are already routing traffic through a CDN that minifies at the edge, you do not need a plugin to do it separately. Running both can occasionally produce double-minified output with parsing errors. Check your CDN’s settings before enabling plugin-level minification as well.
Conclusion
Enable CSS minification first, confirm the site works, then add JS minification — and hold off on JS aggregation until you have tested thoroughly. Autoptimize handles this well on most hosts; LiteSpeed Cache does the same if you are already running it for caching.
Etienne Basson works with website systems, SEO-driven site architecture, and technical implementation. He writes practical guides on building, structuring, and optimizing websites for long-term growth.