Reduce CSS in the head
Many separate stylesheets block rendering. Combine and defer what is not critical. Follow the steps below on your stack, then re-check the live URL.
Many separate stylesheets block rendering. Combine and defer what is not critical.
We remember this on this browser so the next guide opens with the same CMS.
At a glance
| Time | ~15 min |
|---|---|
| Category | Performance |
| Steps | 3 |
| Stacks | WordPress, Shopify, Webflow, Next.js, HTML, more |
Steps
Consolidate CSS files where your stack allows it.
Preload the one critical stylesheet; defer fonts/icons if you can.
Remove unused CSS from page builders and leftover themes.
In HTML / static
Add defer or async on scripts. Combine CSS. Set width/height on images.
Snippet
<link rel="preload" href="/styles.css" as="style"> <link rel="stylesheet" href="/styles.css">
FAQ
- What does “Reduce CSS in the head” fix?
- Many separate stylesheets block rendering. Combine and defer what is not critical.
- How long does this usually take?
- About 15 minutes on most CMS and code stacks when you already have access to edit the page.
- Where do I start?
- Start with: Consolidate CSS files where your stack allows it. Then use the platform picker on this page for placement notes.