1. Web Design
  2. Workflow

Twitter Bootstrap 101: Trimming File Size

Read Time:2 minsLanguages:
This post is part of a series called Twitter Bootstrap 101.
Twitter Bootstrap 101: The Carousel
Twitter Bootstrap 101: Customize

One of the common criticisms of frameworks such as Twitter Bootstrap is that they include far more code than you actually use in your site, leaving you with a bloated code base and poor site performance. This is a possible danger, but Bootstrap's Customize page provides an excellent tool for addressing the problem. Let me walk you through the process of customizing your CSS and JavaScript files to greatly reduce their file size.

That takes care of the first video, in the second I'll walk you through another important step: squeezing bits out of your image files, using Yahoo!'s Smushit tool. Together, these two steps (optimizing your code and optimizing your images) will greatly reduce your site's footprint.

Step 1: Trim CSS and JavaScript

We'll use Twitter Bootstrap's Customize page to select and download only the CSS and JavaScript components we need, resulting in much smaller file sizes.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Screenshots: CSS & JS Components

The following are screenshots of selections I made in the screencast.

Want to Optimize Further?

Once you've downloaded and deployed your customized CSS and JS files, you may choose to make further gains by using a plugin like Dust Me Selectors to identify remaining unused selectors, which you could edit out of your CSS file by hand. This will be much easier with the smaller customized file than with the original file.

Step 2: Smush Your Image Files

While we're optimizing files, we may as well mention an additional step that will help you with the biggest files in the average site: the image files. There's a lot to think about when optimizing images for the web. You may be surprised to know that not all compression tools are equal. The "Save for web and devices" dialog in Photoshop turns out to be one of the least effective compression tools out there.

Here we'll use Yahoo!'s Smushit tool to help us accomplish what Photoshop couldn't.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

For Further Reading

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.