35 lines
3.1 KiB
Markdown
Executable File
35 lines
3.1 KiB
Markdown
Executable File
# 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.
|