CSS Optimization
CSS optimization is where performance wins can turn into layout regressions. The safest approach is: reduce CSS bytes first, then change loading behavior (async/critical/unused CSS) one step at a time.
Decide the "CSS Owner"
Pick one system to own CSS transforms (minify, unused CSS, critical CSS, combine). Keep equivalent features disabled everywhere else.
If two tools both rewrite CSS, you cannot tell which one caused a regression.
Step 1: Reduce CSS Bytes (Before Fancy Features)
- Remove unused plugins and block libraries that enqueue CSS on every page.
- Delete unused theme/global styles (builders often accumulate).
- Avoid stacking multiple CSS frameworks.
Step 2: Reduce Render-Blocking CSS Safely
You typically have three strategies:
| Strategy | What it does | Risk level |
|---|---|---|
| Critical CSS + async rest | inlines minimal above-the-fold CSS, loads the rest later | medium |
| Remove unused CSS | strips unused selectors per page/template | high |
| Route-level loading | only enqueue CSS where needed | medium/high |
Start with the least risky option that moves the needle on your pages. Many sites get most of the benefit from reducing CSS bytes and removing unused features.
If You Use Perfmatters (Example)
Use file-based output when available (smaller HTML and better caching), and enable changes one at a time.
Perfmatters starting point (high-level)
- Enable: Remove Unused CSS (file mode), Async CSS.
- Only add critical CSS inlining if you see FOUC.
- Keep OFF elsewhere: LSCache CSS/JS optimization features (minify/combine/async/UCSS) if Perfmatters owns CSS.
Exclusion Strategy (For Unused CSS)
Unused CSS tools often need exclusions for:
- navigation states (mobile menu open, sticky header)
- form styles
- ecommerce states (cart/checkout)
- sliders/tabs/accordions
Example selector exclusions (start small)
.site-header
.main-navigation
.site-footer
button
input
textarea
select
.woocommerce
.swiper
.slick
Verification (Do Not Skip)
- Hard refresh and test: homepage, a post, a landing page, search, login.
- Test interactions: mobile menu, sticky header, forms, tabs/accordions, cart/checkout if present.
- Check DevTools Console for new errors and DevTools Network for missing CSS files (404).
Common Breakages
| Symptom | Likely cause | Fix |
|---|---|---|
| header/menu looks unstyled | missing selector in used CSS | add a minimal selector exclusion and regenerate |
| flash of unstyled content (FOUC) | async/critical CSS coverage is insufficient | adjust critical CSS strategy or revert the risky toggle |
| CLS increases | late-loading CSS, fonts, or media sizing | reserve space and fix font/image sizing before re-testing |
Checklist
- Only one tool owns CSS optimization features.
- CSS bytes reduced before enabling unused CSS.
- All critical templates and flows verified.
- No new FOUC/CLS regressions.