---
title: CSS Minification for Server-Side Rendered Apps
date: 2020-05-14T08:21:17+00:00
modified: 2020-05-14T14:28:47+00:00
image:: https://kaspars.net/wp-content/uploads/2020/05/dummy-minify-css.png
permalink: https://kaspars.net/blog/css-minify-compress
post_type: post
author:
  name: Kaspars
  avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
post_tag:
  - CSS
category:
  - Development
  - Web Performance
---

# CSS Minification for Server-Side Rendered Apps

With styles moving into components and critical styles being unique for each layout we no longer get the luxury of preparing and optimizing CSS during the build process (especially for server-side rendered applications). Optimizations needs to happen dynamically and have to be as fast even with a caching layer on top of it.

Most of the HTTP responses these days are compressed using GZIP which takes care of reducing the response body size during the transfer so I’m not completely sure why CSS and JS minification is considered *that important* [in Google PageSpeed](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification-preprocessing--context-specific-optimizations), for example. AMP also limits the [uncompressed CSS per page to a maximum of 75KB](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/).

## Minification vs. Compression

I created [this experiment](https://github.com/kasparsd/csso-perf) to evaluate the impact of CSS minification over the resulting compressed version and the time it takes to do the minification.

For minfication I used the [csso](https://github.com/css/csso) library and this “dummify” three rule regular expression string-replace as the fastest way to do *some* minification:

```
const dummyMinifyCss = (css) => {
  return css
    .replace(/[\n\r\t]/gi, ' ') // Line breaks to spaces.
    .replace(/\s+/gi, ' ') // Multiple spaces to single spaces.
    .replace(/(\s+?)?([\(\):;}{>])(\s+?)?/ig, '$2') // Remove spaces before and after :;{}()>
}
```

Note that I haven’t really tested this tiny minifier apart from this site and a few other sites using the Bootstrap CSS library. I’m using a PHP version of the same snippet with the [Minit plugin](https://github.com/kasparsd/minit) on this blog.

## Results

Here are the results for the Bootstrap CSS library:

SizeCompressedMinify Time**Original**198KB26KB**Minified**158KB (-20%)24KB109ms**Dummified**166KB (-16%)24KB6ms (-94%)The dummy minifier produced only a 4% larger CSS but **18 times faster** than `csso` with the compressed CSS being the same! Note that different CSS files have different minification potential usually in the range of 5-35%.

Minifying CSS has very little impact over its compressed size so using a fast minifier that removes only the unnecessary whitespace is the quickest solution for server side rendered apps with dynamically generated CSS.