Build a Better Bootstrap

The Bootstrap CustomizerIn episode one of Decoded, I talked to Jacob Thornton, co-inventor of the incredibly popular UI framework Bootstrap. BuiltWith estimates that Bootstrap is being used on over 7 million websites, worldwide. That’s huge!

Bootstrap’s popularity has a lot to do with its flexibility and ease of use. Need a grid? Bootstrap’s got you covered. Responsive navigation? Check. Progress bars? Naturally. Chances are, if you need an interface component, Bootstrap’s got you covered.

Unless you’re building a terribly complex website, however, you probably don‘t need all of the components Bootstrap provides. Or at least you don’t need them when you push your site to your production servers. Unused code is just bloat that your users have to download and, in some cases, pay by the bit for the privilege of downloading. It also has a significant negative impact on the download and render performance of your website.

Back in the early days with Bootstrap, you had to fork the project on Github and manually prune the component-related CSS and JavaScript you didn’t need. But since version 2, the Bootstrap site has included a Customizer that allows you to pick and choose the bits you want from the sizable buffet of options.

With the customizer, rather than ending up with a build weighing in at over 200 KB (before you even include the jQuery dependency), you can slim things down to as little as 40 KB. That’s an 80% reduction in size and could reduce the download time for your site by up to 16 seconds over a slow mobile network. It’ll also save your users real money on pay-per-bit connections.

Bootstrap is an incredibly powerful UI tool, it’s up to us to wield it wisely.

Leave a Reply

Your email address will not be published. Required fields are marked *