How to optimize CSS and JavaScript
The panel that controls how your stylesheets and scripts are delivered — minification and loading behaviour, plus Pro tools for critical and unused CSS.
Caching makes your server fast. What arrives in the browser is a separate problem: stylesheets and scripts that block rendering, ship code the page never uses, and load in an order nobody chose. The CSS & JavaScript panel is where you fix delivery.
Where to find it
- In your WordPress admin, click xSpeed Cache in the left menu.
- In the xSpeed Cache sidebar, open the Optimization group.
- Click the CSS & JavaScript card.
Shortcut: open
wp-admin/admin.php?page=xspeed#/performance/minifydirectly.✅ This panel is part of xSpeed Cache (Free). Two of its tabs are ⭐ Pro.
Tabs on this panel
| Tab | Feature | Tier | Guide |
|---|---|---|---|
| Minify | Compress and reorder CSS/JS delivery | Free | How to minify CSS and JavaScript |
| Critical CSS | Inline above-the-fold styles | ⭐ Pro | How to generate Critical CSS |
| Unused CSS | Strip rules the page never uses | ⭐ Pro | How to remove unused CSS |
Each tab has its own address, so you can link straight to one:
| Tab | URL |
|---|---|
| Minify | #/performance/minify |
| Critical CSS | #/performance/minify/critical |
| Unused CSS | #/performance/minify/unused |
Which one should you use?
These three attack the same bottleneck from different angles, and they’re meant to be layered rather than chosen between.
| Minify | Critical CSS | Unused CSS | |
|---|---|---|---|
| What it changes | How assets are compressed and when they load | What renders first | How much CSS ships at all |
| Risk level | Low to moderate, per setting | Low | Moderate — needs verification |
| Effort | Toggle and test | Mostly automatic | Review before trusting |
| Tier | Free | ⭐ Pro | ⭐ Pro |
A sensible order:
- Start with Minify. Compression is nearly free of risk and gives an immediate size win. The loading-behaviour toggles on the same tab are more powerful and more disruptive — introduce them one at a time.
- Add Critical CSS once you’re loading stylesheets asynchronously, because that’s the pairing that avoids a flash of unstyled content.
- Then Unused CSS, which gives the biggest byte savings but needs the most checking, since “unused” is a judgement about pages you may not have tested.
⚠️ Change one thing at a time here. Unlike caching, these settings alter what the browser receives. A page that breaks after enabling four toggles at once tells you nothing about which one did it — and some breakage only shows on pages you don’t routinely look at.
Minification itself is safe on most themes. The risk sits in the loading-behaviour options — defer, delay, async CSS — because they change execution order, which is what scripted UI depends on.
💡 Check in a private window. Most of what this panel does applies to cached, logged-out responses. Viewing your own site while logged in is the usual reason a change appears to have done nothing.