Skip to content
SilktideHelp

CSS minification

Silktide checks whether the stylesheets your page downloads have been minified - rewritten to remove the spacing, comments, and repetition that only matter to people reading the code. Unminified stylesheets are larger than they need to be, making the page slower to appear.

changes nothing about how the page looks. For example:

\/* Before minification: readable, but heavy *\/
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

\/* After: identical result, a fraction of the size *\/
h1,h2{background-color:#000}

Why this matters

Stylesheets usually block rendering: the browser downloads the page's before showing anything, so every unnecessary byte in a stylesheet directly extends the blank time before your page appears. Minification routinely cuts stylesheet size substantially, and the saving repeats for every visitor on every uncached page view.

Because minification is automatic and changes no behaviour, unminified production stylesheets are almost always an oversight: a skipped build step, or development files deployed by mistake.

How to fix it

  1. Turn on CSS minification in the site's build process. Every modern build tool includes a minifier, usually enabled by default in production builds.
  2. If the site has no build process, check the : most have a setting or plugin that minifies stylesheets automatically.
  3. As a last resort, run files through a standalone minifier before uploading them. Keep the readable originals - you edit those, and publish the minified output.
  4. If a reported stylesheet belongs to a third party, check whether they offer a minified version, which most do.

How Silktide tests this

  1. Load the page in a real browser, using the device type, connection speed, and test location configured for your speed tests.
  2. Examine each stylesheet the page downloads and estimate how much smaller it would be if minified.
  3. Report each file with a meaningful possible saving, and grade the page by the total: around 50 KB of potential savings is graded down, and 250 KB or more is graded as poor.

Troubleshooting

The file already looks minified

Minifiers differ in aggressiveness, so a lightly compacted stylesheet can still contain meaningful savings. The check reports how much smaller the file could be; running it through a current minifier usually captures the difference.

We need readable styles for debugging

Keep readable source files in your project and debug with source maps, which let browser developer tools show the original styles while visitors receive the minified version. You never need to serve readable code to get readable debugging.

Learn more

Last updated

Was this page helpful?