Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I realize some of the ways are:

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

Update: Here's an example. It's a bit slow to download (per Pingdom.com/tools)

share|improve this question
    
Can you provide the URL to the site (assuming it's live)? –  Tim Fountain Aug 30 '13 at 16:20
    
Speed testing a theme that has not be adjusted to accommodate your requirements is useless, because it will use content that you won't be using, additionally a lot of people who sell templates will use large quality stock images with little compression - in the linked theme for example they use PNG format on the sliders that each slide is extremely larger than it needs to be in a real operating website. I recommend you pick a theme you like, install it, then ask questions.. –  bybe Aug 31 '13 at 19:19
add comment

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.