For anyone keeping track at home, Bootstrap is 25KB, gzipped, with all modules included. If you don't include all the modules/stylesheets, you can easily get it down to half that. Milligram is 2.7KB.
Thanks, I found this same article when I was looking at making the switch! In my case, I'm running just a few operations on selectors, so the performance benefit of jQuery doesn't matter to me as much as a small footprint. Link to my project if you're curious http://daviseford.com/shittalk
With Zepto, the page size comes in around 80kB. I also had to rewrite some Ajax calls (base Zepto download doesn't include deferred modules), but since one of my personal goals was to have the page under 100kB, Zepto made sense for me.
Remove Bootstrap.js dependancy (usually, you don't need it)
Heavy reliance on async ajax calls (only load visible page content, load everything else on scroll using a function like below)
$(window).ready(function () {
$(this).one('scroll', function () { //only executes once
// call this data when a user scrolls down for the first time
// only do this with below-the-fold content
});
});
Make efficient database queries, bundle them together when you can.
This is an awesome list that will be really useful and mostly front-end or cross-(back-end) like gzip, which is awesome. Also the tools are a great plus, thanks (:
Still, I like the flexbox-based grid.