Does CSS Minification Matter? (Does 1-2KB?)
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:
File Raw gzip6 gzip9 brotli
bootstrap 145,933 21,287 20,964 16,945
min 121,457 19,754 19,604 16,036
_________ _______ ______ ______ ______
diff 24,476 1,533 1,360 909
bulma 245,486 29,637 29,435 21,886
min 207,302 27,596 27,452 21,000
_________ _______ ______ ______ ______
diff 38,184 2,041 1,983 886
foundation 196,222 21,784 21,633 16,836
min 159,374 19,269 19,237 15,532
_________ _______ ______ ______ ______
diff 36,848 2,515 2,396 1,304
my-site 18,897 2,520 2,500 2,106
min 13,991 1,977 1,973 1,680
_________ _______ ______ ______ ______
diff 4,906 543 527 426
All values in bytes
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
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 Your mileage may vary.
Notes
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
References
-
Let the Nerd Snip begin
-
A post from Chris Ferdinandi on Go Make Things that's also mentioned in the Mastodon thread
-
Because I can never remember if it's KB, kB, Kb, kb, or whatever
-
In which xkcd coins another phrase
-
I wasn't familiar with this one. Found it via a "top frameworks" post when I couldn't figure out how to get a sample of Tailwind
-
It has JavaScript, but I'm only looking at CSS for the purposes of this comparison
-
Rounding out the CSS framework selection