Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
I realize some of the ways are:
.css and .jsUpdate: Here's an example. It's a bit slow to download (per Pingdom.com/tools)
There's a thread on ideas to speed up a website on Pro Webmasters already so I won't cover aspects already covered since your question is primary focusing on bootstrap speed. A snippet of a good answer left by John Conde can be found below which will tell you what you should focus on speeding up a general website, and below that is my answer for speeding up Bootstrap.
SOURCE: Answer from John Conde
Leverage browser caching Specify image dimensions Avoid CSS @import Avoid bad requests Combine images into CSS sprites Defer parsing of JavaScript Enable Keep-Alive Enable compression Inline Small CSS Inline Small JavaScript Make landing page redirects cacheable Minify CSS Minify HTML Minify JavaScript Minimize redirects Minimize request size Optimize images Optimize the order of styles and scripts Prefer asynchronous resources Put CSS in the document head Remove query strings from static resources Serve resources from a consistent URL Serve scaled images Specify a Vary: Accept-Encoding header Specify a cache validator Specify a character set Defer loading of JavaScript Remove unused CSS Use efficient CSS selectors
My Advice
My personal advice and recommendations when using any framework is to think what functions you absolutely need, Zurb Foundation and Bootstrap among many other frameworks have several customization options which will compile the functions that you need - meaning that you don't bloat your site with JavaScript that won't be used and CSS styling that just won't see any light of day.
Bootstrap now offers way more than it ever did when it first launched and the default CSS is very large, so again if you want your bootstrap theme to be fast only compile the CSS and JS that you actually need and then follow the advice suggested by John Conde - You can compile your own version of Bootstrap here.
Use the minified versions of all the
.cssand.js
Yes, that's a good step towards reducing file size. You can also use gzip compression to compress everything sent to client browsers, as explained here by Google: How gzip compression works
Load the common library elements (jQuery, etc.) from some common source. Not sure what the source that's most likely to already be in the browser cache is.
For jQuery, you can use the URL to the jQuery library on their site or Google's jQuery library, which are already minified:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
These URL's are used by many sites, so might be cached - in any case, they use very fast content delivery networks (CDN).
The other option is to use a CDN yourself, which will compress your data for you, as well as serve it from multiple locations closest to the client, in parallel, and may cache it also. Here is an article which discusses the use of CDN's focusing on Twitter Bootstrap, but applicable to many such frameworks.
