The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

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

TL;DR

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: Pull subtitle into page object pre_start_default_section pre_end_default_section

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?

-- Alda Vigdís
   (on Mastodon)

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

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

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

-- tldr/

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: 

-- pre/

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

-- /pre

-- /tldr

-- h2

Where It Started

-- blockquote
-- by: Alda Vigdís
-- source: on Mastodon
-- url: https://topspicy.social/@alda/111663681972574657

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?

-- p

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

-- h2

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. 

-- h2

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.


-- 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


-- ref
-- url: https://topspicy.social/@alda/111663681972574657
-- title: The original question on Mastodon

Let the Nerd Snip begin

-- ref
-- url: https://gomakethings.com/does-minification-actually-matter/
-- title: Does minification actually matter?

A post from Chris Ferdinandi on Go Make Things that's also mentioned in the Mastodon thread

-- ref
-- url: https://en.wikipedia.org/wiki/Kilobyte
-- title: Kilobyte on Wikipedia

Because I can never remember if it's KB, kB, Kb, kb, or 
whatever

-- ref
-- url: https://xkcd.com/356/
-- title: Nerd Sniping

In which xkcd coins another phrase

-- ref
-- url: https://bulma.io
-- title: The Bulma CSS Framework

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

-- ref
-- url: https://getbootstrap.com/
-- title: The Bootstrap Framework

It has JavaScript, but I'm only looking at
CSS for the purposes of this comparison


-- ref
-- url: https://get.foundation
-- title: The Foundation Framework

Rounding out the CSS framework selection


-- categories
-- CSS 

-- metadata
-- date: 2023-12-29 09:51:05
-- id: 2admldfa
-- site: aws
-- type: post
-- status: published