4 ms·

Bootstrap only requires jQuery if you're using bootstrap.js - which is 37kB. So, if you want to use bootstrap CSS + JS + jQuery, you're immediately looking at

Bootstrap only requires jQuery if you're using bootstrap.js - which is 37kB. So, if you want to use bootstrap CSS + JS + jQuery, you're immediately looking at ~75kB worth of stuff. Side note: I was recently dealing with this, and found Zepto to be a suitable jQuery replacement for small single page apps.

datashaman 11y ago
An item about jQuery vs Zepto was posted recently, worth reading since you're in the same situation. http://zurb.com/article/1293/why-we-dropped-zepto http://zurb.com/article/1293/why-we-dropped-zepto
- random_rr 11y ago
  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 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.
  - franciscop 11y ago
    awesome, I plan on launching 100kb.org when I get some free time with some tips to get pages under 100kb. Would you be interested in giving some tips?
    - random_rr 11y ago
      Sure, here's some notes I have from building the Shittalk Generator Minify HTML (http://www.willpeavy.com/minifier/ http://www.willpeavy.com/minifier/) Minify CSS (YUICompressor) Minify JS (Google Closure Compiler) Enable gzip compression Replace jQuery (29kB) with Zepto (9.6kB) 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. Use loadCSS to asynchronously load non-essential CSS after the page has been loaded: https://github.com/filamentgroup/loadCSS https://github.com/filamentgroup/loadCSS Try out different CDN's - some CDN's have bootstrap.min.css around 30kb, and other services have it compressed to 19kB (CDNJS works best for me) Use the following sites to find what's impacting load times/page size: http://tools.pingdom.com/fpt/#!/dVQE7B/http://daviseford.com/shittalk/ http://tools.pingdom.com/fpt/#!/dVQE7B/http://daviseford.com... https://gtmetrix.com/ https://gtmetrix.com/ https://developers.google.com/speed/pagespeed/insights/ https://developers.google.com/speed/pagespeed/insights/
      - franciscop 11y ago
        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 (:

datashaman 11y ago

An item about jQuery vs Zepto was posted recently, worth reading since you're in the same situation. http://zurb.com/article/1293/why-we-dropped-zepto http://zurb.com/article/1293/why-we-dropped-zepto

random_rr 11y ago
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 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.
- franciscop 11y ago
  awesome, I plan on launching 100kb.org when I get some free time with some tips to get pages under 100kb. Would you be interested in giving some tips?
  - random_rr 11y ago
    Sure, here's some notes I have from building the Shittalk Generator Minify HTML (http://www.willpeavy.com/minifier/ http://www.willpeavy.com/minifier/) Minify CSS (YUICompressor) Minify JS (Google Closure Compiler) Enable gzip compression Replace jQuery (29kB) with Zepto (9.6kB) 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. Use loadCSS to asynchronously load non-essential CSS after the page has been loaded: https://github.com/filamentgroup/loadCSS https://github.com/filamentgroup/loadCSS Try out different CDN's - some CDN's have bootstrap.min.css around 30kb, and other services have it compressed to 19kB (CDNJS works best for me) Use the following sites to find what's impacting load times/page size: http://tools.pingdom.com/fpt/#!/dVQE7B/http://daviseford.com/shittalk/ http://tools.pingdom.com/fpt/#!/dVQE7B/http://daviseford.com... https://gtmetrix.com/ https://gtmetrix.com/ https://developers.google.com/speed/pagespeed/insights/ https://developers.google.com/speed/pagespeed/insights/
    - franciscop 11y ago
      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 (: