Minifying CSS
This post is a bit of a rebuttal to a blog post written by the lovely Shiv J.M. (who asked to be referred to as "Shiv the Omniscient and Omnipotent" - presumably in jest, but either way I'll write as Shiv for brevity), Is Minifying CSS Necessary?
In the post, a few points are brought up; I don't necessarily disagree with them, but still don't think never minifying is a good stance to have. So in this post, I'll be quoting bits and pieces and elaborating on my own thoughts, but for the full picture, I recommend reading Shiv's post first.
Reading source code
The first thing mentioned is that Shiv's learning journey involved a lot of reading the source code. I second this; being able to press F12 and seeing the magical worlds bahind web pages was how I got initially enamoured with web development. Shiv then goes on to say
I’ve never understood the desire to add an extra step to your pipeline that does nothing but prevent that
This might sound sensible, but I think it's a bit more nuanced. In some cases, people do this with JavaScript (it's called "obfuscation") for additional friction for security purposes, but it doesn't really happen with CSS because there's not much you can obfuscate. The properties and selectors are kept intact regardless of minification, because they need to match whatever the markup is. So realistically, nobody adds CSS minification to their pipeline to prevent people from reading it. In fact, even if you minify it, all major browsers have a "pretty print" button that essentially revives the unminified version of the stylesheet. And most browsers do it by default, so you don't even need to click it! On top of that, it doesn't do "nothing but", it makes the payload size smaller; whether this optimization is worth it is another question, but this is the reason people are doing it.
Payload size
The primary reason people minify CSS is to reduce filesize. Shiv argues that gzipping CSS is where the big win happens, and I completely agree with this. CSS as a language gzips particularly well because it involves a lot of repetition. So I agree we should be gzipping CSS (and any file type that benefits from it, for that matter), but I don't necessarily agree that the extra opimization step of minification is negligible.
Per CSS-Tricks, just gzipping Bootstrap takes it from 147 to 22 KB, while minifying it before gzipping brings it to 20 KB.
Reducing a file's size from 147kB down to 22kB is a major improvement. Minification takes that down by an extra 2kB, which might seem insignificant compared to the 125kB improvement that gzipping did, but still it is an additional 10% smaller, essentially for free. Generally speaking, loading stylesheets is not the bottleneck for load times on websites. But it could have an impact, especially since CSS is one of the few asset types that is usually render-blocking to avoid layout shifts, whereas JavaScript or images can be deferred and lazy-loaded. Especially with multiple stylesheets (particularly small ones, since they don't gzip as much), the little optimizations together can end up making a significant difference.
Parsing speed
Next, we come to parsing.
Shiv then goes on to talk about parsing speeds - I don't have much to add here. The difference in speed is somewhat incorporated in load times, so again this is an optimization, but the load time is generally much more influenced by payload size (number of transferred bytes) than the parsing speed.
The unmentioned
Minification adds a benefit in terms of speed for your users, and the cost is a less readable source. And this is where the choice comes in; who are your users? What is your website about? Is there more value in keeping assets readable for those interested, or does one choose a slight increase in load times? For Shiv's website, and mine, too, I think having unminified source code is nice. Both of us blog about code (at least sometimes) so I expect a portion of the people visiting our websites is interested in web development and might inspect the underlying code to see how it works. On the other hand, I stand by my choice to minify CSS (and HTML, and JS) for the website for the company I work for. My job there is to create the best user experience for visitors, and I don't expect many (if any) are going to inspect the source code. And if they do, I am (and the company is, too) fine with them potentially having to press a "pretty print" button. If there is a chance for an optimization, especially one that doesn't affect the developer's (i.e. my) workflow, I will take it.
In conclusion, it's a tradeoff. Like usual, there is no right answer. While there might not be a perceivable difference in load times when minifying, there is a difference, one that adds up across your user base, and this optimization can be worth it for some. For others, they might feel better shipping readable code. Personally, I choose depending on context.