Twitter Bootstrap: How to Load Sites Faster With BootstrapCDN

Hello and welcome again to our ongoing series focusing on Twitter Bootstrap. By now we have covered in detail what Bootstrap is as well as how to design a unique and responsive homepage using the front end framework.

Today, let’s take some time to talk about a great new way to access bootstrap for any of your projects. Content Delivery Networks play an important role for the global web. Instead of downloading website files from a single hosted location, a CDN allows for users to quickly access site files from a large distributed system of servers deployed across multiple data centers around the world. This type of distribution leads provides for easier access to common files, increased security for your site as well as speed.

---

Twitter Bootstrap is already a great front end framework and it is increasing in popularity among web developers and designers. So it starts to make sense that we begin treating bootstrap like some of its CDN hosted bretheren like jQuery, jQuery UI, Dojo and more. So the very cool people at NetDNA decided to do us all a favor and provide a Twitter BootstrapCDN platform.

Using BootstrapCDN developers and designers can access the vital Bootstrap CSS, JavaScript and image files over a high-powered CDN that even includes SSL access.

To get going, simply link up your CSS files in the same way you normally would in the hea of your document like this.

It is a good idea to link up a local stylesheet after the BootstrapCDN link in order to provide a semantic method of modifying incoming bootstrap styles.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" />

Then, in the foot of your document simply link up the JavaScript portion of bootstrap like this.

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>

---

---

Now that we have successfully linked the CDN files to our head and foot areas of a webpage. Let’s discuss a bit more about why it is a good idea to obtain common files from a Content Delivery Network like NetDNA or Cloudflare.

The advantage of using files hosted on a CDN include:

1. It increases the parallelism available.
   (Most browsers will only download 3 or 4 files at a time from any given site.)
2. It increases the chance that there will be a cache-hit.
   (As more sites follow this practice, more users already have the file ready.)
3. It ensures that the payload will be as small as possible.
   (CDN providers can pre-compress the file in a wide array of formats (like GZIP or DEFLATE). This makes the time-to-download very small, because it is super compressed and it isn’t compressed on the fly.)
4. It reduces the amount of bandwidth used by your server.
   (CDN providers are basically offering free bandwidth.)
5. It ensures that the user will get a geographically close response.
   (CDN providers have servers all over the world, further decreasing the latency.)
6. (Optional) They will automatically keep your scripts up to date.
   (If you like to “fly by the seat of your pants,” you can always use the latest version of any script that they offer. These could fix security holes, but generally just break your stuff.)

Credit: John Gietzan

---

Start getting that extra little performance boost by using the CDN versions of Bootstrap and other common files.