4

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)

2
  • Can you provide the URL to the site (assuming it's live)? Aug 30, 2013 at 16:20
  • 1
    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.. Aug 31, 2013 at 19:19

2 Answers 2

4

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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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