CSS
Dotjuice → Page speed → CSS
What this tab controls
Minification and combining of your site's local stylesheets, optional asynchronous loading of the combined file, and manual exclusions for stylesheets that shouldn't be touched.
Settings
| Setting | Default | What it does |
|---|---|---|
| Minify CSS | On | Strips comments and unnecessary whitespace from stylesheets. Safe on its own — the visual output is identical, just a smaller file. |
| Combine CSS Files | On | Merges your local stylesheets into a single cached file, in the correct dependency order, cutting down the number of separate requests the browser has to make. External stylesheets (Google Fonts, CDN-hosted resources) are always left as their own requests. |
| Load Combined CSS Asynchronously | Off | Removes the combined stylesheet from the render-blocking path — see the warning below before enabling. |
| Critical CSS | Empty | A block of CSS you provide, inlined directly into every page. Required if you enable asynchronous loading (see below). |
| Remove Unused CSS (Experimental) | Off | Not yet active in this version — enabling it currently has no effect. We'll update this guide when it ships. |
| Exclude Handles or Filenames | Empty | A comma-separated list of partial matches (stylesheet handle names or filenames) to skip entirely — useful for a plugin that behaves oddly when combined with others. |
⚠ Before enabling "Load Combined CSS Asynchronously"
This is the highest-impact CSS setting and also the one most likely to cause a visible problem if used without preparation. Removing the stylesheet from the render path means the browser paints the page before your CSS has loaded — if you haven't told it what the essential above-the-fold styling looks like, visitors will briefly see unstyled HTML (a "flash of unstyled content," or FOUC) before your CSS kicks in.
Always set Critical CSS first. This should be the minimum styling needed to render what's visible without scrolling: your body font and background colour, header, navigation, and hero section. A tool like a critical CSS generator (search for "critical CSS generator" — several free online tools exist) can produce this automatically by analysing your homepage.
Test on a staging copy of your site first, particularly if your site has several very different-looking page templates (a landing page vs. a blog post vs. a WooCommerce product page) — one block of critical CSS may not cover all of them equally well.
Excluding a stylesheet
If a specific plugin's styling looks wrong after combining, add its stylesheet handle or filename to Exclude Handles or Filenames. You can find a stylesheet's handle using your browser's developer tools (Network tab, filter by CSS) — the filename usually gives it away, or check the plugin's own documentation.
What's not affected
External stylesheets — Google Fonts served from fonts.googleapis.com, CDN-hosted libraries, anything not physically hosted on your own server — are never combined or minified. They're already optimised by whoever serves them, and combining them isn't possible across domains.