# 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.

- Category: Optimization
- Canonical: https://xspeedcache.com/docs/css-and-javascript/

---

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**
>
> 1. In your WordPress admin, click **xSpeed Cache** in the left menu.
> 2. In the xSpeed Cache sidebar, open the **Optimization** group.
> 3. Click the **CSS & JavaScript** card.
>
> *Shortcut: open `wp-admin/admin.php?page=xspeed#/performance/minify` directly.*
>
> ✅ This panel is part of **xSpeed Cache (Free)**. Two of its tabs are ⭐ Pro.

![The CSS & JavaScript panel and its three tabs](https://xspeedcache.com/_astro/css-js-tabs.B6QPjzWC.png)

---

## Tabs on this panel

| Tab | Feature | Tier | Guide |
| --- | --- | --- | --- |
| **Minify** | Compress and reorder CSS/JS delivery | Free | [How to minify CSS and JavaScript](https://xspeedcache.com/docs/minify/) |
| **Critical CSS** | Inline above-the-fold styles | ⭐ Pro | [How to generate Critical CSS](https://xspeedcache.com/docs/critical-css/) |
| **Unused CSS** | Strip rules the page never uses | ⭐ Pro | [How to remove unused CSS](https://xspeedcache.com/docs/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](https://xspeedcache.com/docs/minify/) | [Critical CSS](https://xspeedcache.com/docs/critical-css/) | [Unused CSS](https://xspeedcache.com/docs/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:

1. **Start with [Minify](https://xspeedcache.com/docs/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.
2. **Add [Critical CSS](https://xspeedcache.com/docs/critical-css/)** once you're loading stylesheets asynchronously, because that's the pairing that avoids a flash of unstyled content.
3. **Then [Unused CSS](https://xspeedcache.com/docs/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.

---

## Related

- [How to enable Page Cache](https://xspeedcache.com/docs/page-cache/)
- [How to compress your responses](https://xspeedcache.com/docs/compression/)
- [How to run a speed test](https://xspeedcache.com/docs/external-score/)