Saturday, January 30, 2016

Hypothesis: bootstrap.min.css is a micro-optimization

Disclaimer: This is a random, untested idea that came into mind, and I just felt like writing about it.

Hypothesis: Bootstrap.min.css is a micro-optimization

As stated alot, premature optimizations are the root of all evil. Programmers suck at guessing where performance problems are going to be, and often spend alot of time optimizing spots that they think are going to be performance problems. I recently was reading a thread about an algorithm implementation (Mod 10 credit card number verification), and I saw people making optimizations and gloating with such nonsense as "I shaved 3 ms off the runtime!" (unstated: while making the code unreadable). I'm not talking down about other programmers, because I include myself in strange behavior. I often catch myself optimizing something when I haven't proven that it needs to be optimized. Why? BECAUSE IT'S FUN!

Ok, now that i've blabbed on and on about that crap that everyone has repeated over and over, I'll get down to the main idea here: Bootstrap.min.css is a micro-optimization.

If you don't know, Bootstrap.css is a CSS framework, and it's 143 kb. Someone came up with the idea of making a "minimized" version of this CSS file called Bootstrap.min.css. It removes all the whitespace and ends up being 121 kb (and becomes an unreadable nightmare, at least for humans). This means 22 kb won't be traveling from the webserver to the web browser.

In order to know if this 22 kb really makes that big of a difference, we have to look at the total size of the page being transmitted, and figure out how big of a savings % the 22 kb leads to.

According to this:, the average web page size is 2099 kb.

22 kb / 2099 kb = 1%

Ouch... that's basically nothing.

So what's taking up all that space? (again, according to that link above)

Images = 1310 kb / 2099 kb = 62.4%
Scripts = 329 kb / 2099 kb = 15.6%
Video = 227 kb / 2099 kb = 10.8%
HTML, CSS, Other combined = 5.8%

I've shown that bootstrap.min.css is a 1% savings. It's been suggested to use bootstrap.css during dev and bootstrap.min.css in production. Why bother? It makes the CSS file unreadable, and adds a bit of overhead, since you have to make sure you're using the right version in the right environment.

Instead, if you're trying to minimize the size of the payload transmitted to the browser, you're better off focusing on images. Most likely you are required to use all those images (because if the don't then the web designer will get really mad at you). So the only thing you can do is make the image size smaller. I can think of only one way to do that: come up with an image format that is super compressed. I'd leave that up to the researchers...

So that leaves us with scripts. Does each page really need 329 kb of javascript? Probably not. Most likely the page needs a small subset of the functions in the script files.

Let's say your page only uses 1 kb of the functionality in the 329 kb js file. You could make a copy of the 329 kb file and remove any functionality that's not used by your page. With a super simple page, that's easy. With a more complex website where templating is being used, or pages are generated dynamically on the server-side, you'd probably need a tool that loads all of your pages, exercising 100% of the website's functionality, and then builds a list of all the javascript functions used. From that list it could generate the minimized version of the js file you need. You'd need to update this anytime any page changes, and swap in the 329 kb version of the file during analysis.

From this contrived example, you'd save 328 kb. That's 15.6% of the total payload. That's pretty awesome. And this would lead to alot of overhead and most likely you'd create bugs.

In conclusion
Bootstrap.min.css is definitely a micro-optimization.

No comments:

Post a Comment

There was an error in this gadget