: How can I speed up the download time of a Bootstrap theme'd website? I realize some of the ways are: Use the minified versions of all the .css and .js Load the common library elements (jQuery,

@Radia820

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.

Vote Up Vote Down

@Ravi8258870

Use the minified versions of all the .css and .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.

Vote Up Vote Down