NOTE: Under Construction - I'm in the middle of upgrading my site and lots of stuff is kinda broken. Please forgive the mess.

Does CSS Minification Matter? (Does 1-2KB?)

December 2023

Here's how many bytes you'll save by minifying the files of three different CSS frameworks and the primary CSS file on my site:

TODO: pre

Where It Started

Serious question: Do we *really* need to minify our JS and CSS files?

Does it matter at all if we're gzipping the HTTP streams anyway?

I was >nerd snipped>https://xkcd.com/356/> and decided to do a little research.

What Matters (Your Choice)

The question to define is what you mean by what matters. I leave that as an exercise for the reader. As you can see from the data above, assuming you use some kind of compression, the difference in size between minified and the full size version of the files is between: 0.426 - 2,515KB.

My Choice

I'm writing my own >file format>/neopolitan/> and static site generator. I could add minification into the process, but based of these numbers it's not worth the trade-off for all the other things I want to get done.

Your mileage may vary.

  • The question is about about minifying. I'm not going into the diffs between minified-compressed vs uncompressed-unminified files. You're server probably already compresses and if it doesn't it's probably worth turning that on

  • I haven't tested how having lots of comments in your CSS would change things. It certianly would to some degree, but that's also an exercise for the reader

  • I didn't do Tailwind because I didn't see a trivial way to get a full version of the framework as a raw file

  • gzip can go from levels 1-9 with 9 being the best compression. The default is 6. Figuring out what level your servers compresses is an adventure I leave to you

  • brotli is a compression that Google came up with. I'd never heard of it before. I learned about it via a mention in the Mastodon thread. Something else to investigate

═══ § ═══

Footnotes And References