Unused CSS
Silktide loads your pages in a real browser and measures how much of each stylesheet is actually used to display the page. Stylesheets with a large amount of unused styling are reported, along with the potential savings.
Why this matters
Browsers cannot show a page until they have downloaded and processed its , so every rule that isn't used still delays the moment your content appears. Unused CSS builds up naturally: themes and frameworks ship styles for every feature whether you use it or not, and old styles rarely get deleted when designs change. The result is that visitors wait for styling that never draws anything.
How to fix it
- Remove styles you no longer use. Build tools can do this automatically by scanning your templates and keeping only the CSS they reference.
- Split large stylesheets so each page loads only the styles it needs, rather than one bundle containing every page's styling.
- For the styles a page does need, prioritise the ones that render the first screen, and let the rest load without blocking:
<!-- Loads without blocking the first paint -->
<link rel=\"preload\" href=\"rest.css\" as=\"style\"
onload=\"this.onload=null;this.rel='stylesheet'\">
<noscript><link rel=\"stylesheet\" href=\"rest.css\"></noscript>
Be careful with automated removal: styles used only by , or only on other pages sharing the stylesheet, can be removed by mistake.
How Silktide tests this
- Load the page in a real browser and record which CSS rules are applied while the page loads.
- For each stylesheet, measure how many of its bytes were never used.
- Report each stylesheet with meaningful waste, showing its current size, the percentage unused, and the bytes you could save.
Troubleshooting
The CSS is used, just not immediately
The measurement covers the initial page load. Styles that only apply later - on hover, in modals, after JavaScript reveals content - count as unused even though the page needs them eventually. That is still useful information: those styles don't need to block the first paint, so they are candidates for loading separately.
The stylesheet is shared across the site
A shared stylesheet is mostly "unused" on any single page. That can be a reasonable trade-off, since the file is after the first page view. Weigh the first-visit cost against the convenience before splitting it.