While working on some enhancements for my Blade CSS forms components, I found myself needing to add a few icons to the Blade CSS collection.
By collection, I mean the Fontello icon groupings. If my preference is Font Awesome, why use Fontello? I gave up on Font Awesome when version 5 was released. The modifications to v5 were too much to handle. By that, I mean size, configuration, and usage. I did continue using Font Awesome version 4.7.0, usually by CDN. I started to notice a degradation in speed of display sometime after using Bulma CSS. After some quick calculations, it occured to me that Font Awesome v4.7.0 was adding over 1Mb to a page stream. 1.12Mb to be exact. I started to package Font Awesome differently. I cut out all the font styles and only using the woff2 version. That did take out compatibility for IE, and some old IOS browser. It also brought down the stream overahead to 1/10th the size: 110Kb. Even at that dramatic a reduction I started to question whether or not I needed over 600 icons at the ready all the time.
That's when I discovered Fontello. I'm not sure how to describe Fontello. I think of it as a customized aggregator. I have access to all the Font Awesome fonts (plus many other manufacturers too). I get to pick the icons I want and custom create a font and css file for my individual use.
After much introspection, I ended up using 94 icons into one package. That was a bit over one year ago ... this week I upped that to 99 icons. Four new icons form the basis for a new checkbox and radio form customization strategy.
Even at that, my total size for the CSS and font is 27Kb. About 1/5th the size of the smallest Font Awesome size I could get. I'm quite thrilled with this. I also custom designed a "custom" cheatsheet that displays the icons in alphabetic order making them an awful lot easier to find.
All this to get to the title of this article. Bulma CSS again. As I was calculating my file size savings by using Fontello, it occured to me that Bulma CSS relies extensively on Font Awesome to enhance the overall experience and UI of their CSS solution. So, I decided to tally up the file size totals for a stream ... and just Bulma CSS and its Font Awesome recommendations.
I discovered that Bulma CSS is updated again to v1.0.2. And more bloat again with file sizes increases for both raw and minified versions. Since it is elephantine in size to begin with, the size increase isn't that surprising.
What is surprising, though, is when you tally up the overall hit on data streams when using Bulma CSS v1.0.2 and Font Awesome – even the smaller version 4.7.0. It's DRAMATIC at well over 1.8 Mb before you even write any HTML. 1.807 Mb to be exact and that's MINIFIED.
Does anyone over at Bulma CSS do any planning? any thinking?
Is it any wonder why market share reports Bulma CSS as third from the bottom out of a field of twelve CSS Frameworks? That's right – in 10th place out of 12.
Not surprised that Bootstrap remains in first place. And, look at that: Tailwind is in fourth place.
Why bother with Bulma then? Tailwind has surpassed it BOLDLY. It's the right strategy: utility first. Sure cuts out the bloat. Use Tailwind.