Twitter Bootstrap 101: Trimming File Size
videos

Twitter Bootstrap 101: Trimming File Size

on Jun 29th 2012 with 18 comments
Tutorial Details
  • Topic: Twitter Bootstrap, Optimization
  • Difficulty: Beginner
  • Estimated completion time: 30 mins
Download Source Files
Demo View It Online
This entry is part 7 of 8 in the series Twitter Bootstrap 101

Twitter Bootstrap 101

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

Series Navigation<< Twitter Bootstrap 101: The CarouselTwitter Bootstrap 101: Customize >>

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

David Cochran is Associate Professor of Communication at Oklahoma Wesleyan University. He and his students have designed and manage a number of websites, including DeclaringAmerica.com, OKWUeagle.com, and aLittleCode.com.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://laranz.in Lawrence77

    Why there is no blip.tv??

    • http://www.snaptin.com Ian Yates

      We’re shifting all our video content to YouTube (check out and subscribe to the Webdesigntuts+ channel if you feel the urge!) Blip was prone to the occasional….blip, plus YouTube offers us more in terms of connecting with our community.

      I’ll also be setting up all the screencast series as playlists (you can find a couple prepped already.) Enjoy :)

      • http://laranz.in Lawrence77

        That’s great Ian, Playlist prepped was awesome ;)

        Blip tv offers we variety of download format so only I ask about blip.tv ;)

        • http://www.snaptin.com Ian Yates

          Don’t worry about downloads – we’ll still be hosting a copy of each video ourselves, so you’ll find the link in the usual spot under the embedded content :)

          • http://laranz.in Lawrence77

            Yeah i saw that, but its in mp4, blip.tv offers m4v that file is small and quality was good. I don’t have a 20MB/s connection so i bother about sizes :)
            No problem I will manage these :)

            Thanks,

  • http://www.themeforest.net/user/SomniaThemes Timon

    Really starting to fall in love with Twitter Bootstrap!

    Another good post David. :)

  • annie

    Thank you thank you for this series of video tuts. Really clear easy to follow step by step presentations. Thanks for this easy entry into the wonderful world of Twitter Bootstrap!

  • Brian

    I generally just grab the SASS or LESS versions of Bootstrap and modify them on a per project basis, considering the use of their already genreated mixins and such, it makes it easy to customize the css to use only what you need.

    This allows you to customize everything down to your grid layout widths etc. Much easier that way.

  • http://www.izdelava-spletnih-strani.net Izdelava Strani

    Well I worked with 2 others frameworks like this: foundation by Zurb and skeleton.. dunno which is better because they work pretty the same, but I was comfortable with both of them so I will give a try to bootstrap too.

    IDEA for a new tutorial:
    doing the same web page with all of 3 frameworks to see who is faster to work with, have less time to involve in learning and which one have the most useful and time saver features.

    • Rick O’Shea

      Looks like Zurb is using HTML5 Boilerplate while Skeleton is an emaciated version of Bootstrap from a conceptual perspective. Given its wild success and widespread support and integration with other tools, probably the best course of action is to let competing tools provide the case for why their kit is faster or better. Meanwhile, use Bootstrap. There are several problems with your suggested comparison. First, capability and ease-of-use on an ongoing basis rather than one page is important. This is why certain language continue to thrive despite having higher initial learning curves. Second, even if experienced in using all three, one page tells you how much faster *you* are building *that* page on a given day. It would not be wise to generalize from one page. Finally, consider that the learning curve happens up front and that customers typically hire teams/individuals who are past the learning curve. They are less interested in the shape of the learning curve; they want to know how efficient and effective you and your tools are going forward.

  • http://webbuilderstudio.com Raza

    Thank you for a wonderful series David,I hope to see some more tuts from you.

    Regards

  • Katie

    This was great, I hope you consider doing more Twitter Bootstrap tuts.

  • http://facebook.com/fashsolanki Amit Solanki

    Can some one tell me which framework to use under what condition and why?From skeleton Twitter bootstrap and ZURB foundation.Please am getting really confused. Thanks.

  • http://alittlecode.com David Cochran
    Author

    Thanks all for the feedback. Brian, SASS and LESS are awesome. Point well made. This series is meant to show folks around what’s available working directly with the files and docs Bootstrap provides for download. Even those not yet working with LESS and SASS can do some significant customization. Something I really appreciate. But of course working directly with the files in LESS is a natural next step!

  • http://mlangella.com Manuela

    Thank you very much for this great videoserie! I am learning so much, I hope I can give back one day what I am becoming :)

  • Mnova

    Great series, I just started out with web development about a month ago and thanks to great tutorials such as these I already have a responsive website up and running. I’m looking forward to the tutorials on customizing the variables.

  • David

    Thanks for all your work with this David, makes life much easier for a website newcomer.

  • http://www.brillinfotech.com ankur

    Hey..
    There are too many js and css files in asset folder.
    Do I need to add all to my markup?