Minify CSS and JS in WordPress
Minifying CSS and JS strips spaces and comments so the files weigh less, while the browser applies the same styles and runs the same scripts. Turn CSS Minify and JS Minify on in your cache plugin, purge, and reload in a private window. The layout should match the page you had. Leave combine and defer off until that passes.
A switch-by-switch guide for WordPress owners: what to enable, what to postpone, and how to prove the smaller files loaded.
knowledge
- Read time
- 4 min
- Sections
- 6
- Updated
- 14 Nov 2026
- Written by
- WebJi® team
Last editorial update: 15 November 2026.
What does minifying CSS and JS actually change?
Minifying CSS and JS removes the spaces, line breaks and comments from those files so they weigh less, while the browser applies exactly the same styles and runs exactly the same scripts. It does not compress images, it does not cache the HTML, and it does not change what a button does — those are separate jobs.
A WordPress site loads many stylesheets and scripts from the theme and from every plugin, so this is a job for a cache plugin that minifies files as the page is built. Pasting a theme file into an online compressor is a different exercise: the next theme update overwrites it. WordPress should minify the files it enqueues, and that is what the plugin's optimisation module is for.
- Out: whitespace, line breaks, comments — the parts no browser needs.
- Unchanged: every CSS rule, every script's behaviour.
- Not this job: image compression, HTML caching, plugin features.
How do you turn minify on in WordPress?
In wp-admin, open your cache plugin's optimisation settings, set CSS Minify and JS Minify to ON, purge the cache, and reload the homepage in a private window — leaving combine and defer off for this first pass. On a LiteSpeed server stack, LiteSpeed Cache is the plugin that should do this (a WordPress hosting plan tells you which stack you are on); on anything else, Autoptimize does the same two jobs.
- Stay logged in on this browser, and open the public homepage in a second tab so you can compare afterwards.
- In LiteSpeed Cache → Page Optimization → CSS Settings, set CSS Minify to ON. Save. Do not turn on CSS Combine yet.
- Open JS Settings, set JS Minify to ON, leaving JS Combine and Load JS Deferred off. Save.
- In the admin bar, open LiteSpeed Cache and choose Purge All.
- In a private window, load the homepage: fonts, menu and buttons should match the tab you left open.
If LiteSpeed Cache is not in the menu, use one other plugin — not several. In Autoptimize: Settings → Autoptimize, tick Optimize JavaScript Code and Optimize CSS Code, leave Aggregate JS-files and Aggregate CSS-files unticked, save, and empty its cache. Then run the same private-window check. Two minify plugins rewriting the same files is the classic way a layout breaks for no gain.
Which settings should stay off until the page matches?
Combine and defer stay off until minify alone has passed the private-window check, because combine changes the file order plugins expect and defer changes when scripts run. Minify makes each file shorter; combine merges many files into one — related, but not the same switch, and riskier.
| Setting | What it does | When to turn it on |
|---|---|---|
| CSS Minify | Drops spaces and comments in stylesheets | First |
| JS Minify | Drops spaces and comments in scripts | With CSS Minify, in the same pass |
| Combine (CSS or JS) | Joins many files into one request | Only after the private window matches, and only if many tiny files remain |
| Defer / async | Waits to run scripts until after first paint | Last — sliders and menus often fail here |
On a site already served over HTTP/2, one fat combined file is often slower than a few short ones, because the browser can fetch them in parallel. Combine earned its reputation on HTTP/1.1; check which one your host serves before you chase it.
What do you exclude when the layout breaks?
Turn off the last switch you enabled, purge, and reload — when the page matches again, you have found the culprit, and that one file goes on the exclusion list while everything else stays minified. Change one switch at a time; two changes at once make the culprit ambiguous.
Open the browser console on the broken page and note the file named in the red error. In LiteSpeed Cache, paste it into JS Excludes or CSS Excludes under the corresponding settings, turn the minify switch back on, purge, and reload. The named file stays exactly as the plugin shipped it; the rest of the queue stays minified.
Do this on a staging copy when the site takes orders, and retest the checkout or payment button afterwards — a broken script on the money page is easy to miss when you only check the homepage.
How do you verify the smaller files actually loaded?
A private window that looks right is only half the check: open the browser's Network panel, reload, and filter by CSS and then JS — each file should return status 200, smaller than before, or served from the plugin's cache path instead of the original theme path. That is the evidence that minification happened, not just that nothing broke.
If the size did not change, the old file is still cached — choose Purge All again and reload the private window. If the page is blank, turn JS Minify off, purge, and reload before touching any other switch. A lab score is optional; the pass mark is a matching layout plus smaller CSS and JS responses. A higher score with a broken menu is a fail.
When should this become someone else's job?
Do it yourself when you can open wp-admin and have a quiet hour; email support@webji.services when the console names a file you cannot find, or the layout is still wrong after JS Minify is off and the cache is purged. The mailbox is staffed 24/7 in Hindi and English, and the office phone is not the support line.
Minify alone is a setting, not a performance project. A full pass across images, caching, scripts and the database is the WordPress speed optimisation service, quoted by email before you pay — this page carries no price for that work. The image half of the job is covered in the WebP conversion guide.
Frequently asked questions
How do I minify CSS and JS in WordPress?
Open your cache plugin's page-optimisation settings, set CSS Minify and JS Minify to ON, leave combine and defer off, and purge the cache. A private window should show the same layout with smaller CSS and JS responses in the Network panel. LiteSpeed Cache on a LiteSpeed stack, Autoptimize anywhere else.
Does minifying CSS and JS make WordPress faster?
It cuts the bytes in those files, which helps most on slow connections. It does not shrink images or fix a heavy plugin, so treat it as one step: minify first, verify the layout, then consider combine or defer. If the page is still slow, the bottleneck is usually elsewhere.
Should I combine CSS and JavaScript too?
Not in the first pass. Combine merges files and can change the order a plugin expects, which is where layouts break. On HTTP/2 the benefit is also smaller than it was on HTTP/1.1, since the browser fetches files in parallel. Turn it on only if many tiny files remain after minify passes.
Why did my design break after enabling minify?
A stylesheet or script needed its original form. Turn off the last switch you enabled, purge the cache, and reload; when the page recovers, put the file named in the browser console on the plugin's exclusion list and re-enable minify for everything else. One switch at a time keeps the culprit identifiable.
Can I minify CSS and JS without a plugin?
Only for files you maintain yourself. Pasting a theme stylesheet into an online compressor is undone by the next theme update, and WordPress loads dozens of files from theme and plugins together. A cache plugin minifies the whole queue as pages are built — that is the sustainable way.
Last editorial update: 15 November 2026.
Ready to get started with WebJi®?
Join 12,000+ businesses across India and overseas. INR pricing, 18% GST shown before payment and 24/7 email support in Hindi and English — average first reply under 60 minutes.