Optimizing Bootstrap

Excerpt from Jump Start Bootstrap

Chapter 6Optimizing Bootstrap
Table of Contents
Optimization Techniques
Optimizing CSS
Optimizing JavaScript
Optimizing Images
Avoiding Common Pitfalls
Where to Go From Here

So we have reached the final chapter of the book. We've really come a long way, now having the capability to build a professional, responsive website using Bootstrap. But the final piece of the puzzle is discovering how to optimize our creations so that they not only look good but also perform well.

In this chapter, you will be learning techniques to optimize a website built with Bootstrap (or, indeed, any other front-end framework). We will be working with CSS and JavaScript minification and also streamlining the Bootstrap default package. We will try to understand the limitations of Bootstrap and discuss some of the common pitfalls of using it.

A website needs to look good and perform well. Web users have become impatient, and a slow-loading website will be dismissed, irrespective of how beautifully designed it is.

In order to build the right template, we need to optimize our CSS files, JavaScript files, and images. All these files are served to the browser via separate request calls, so the lighter they are, the better the overall performance of the website.

Optimizing CSS

When dealing with the Bootstrap framework, we generally end up creating more than one CSS file. By default, every Bootstrap project comes with the bootstrap.css file included in the website's template. On top of that, we will normally have custom CSS files to make our website look more attractive. Here are a few tasks we can do to reduce the size of the CSS files in our website's template.

Use the Minified Bootstrap CSS File

As stated in the previous chapter, Bootstrap allows developers to select only those components that are actually needed while developing the template. This reduces the overall size of the main Bootstrap CSS file (bootstrap.css). Once the website is ready for production, we can further reduce the size of this CSS file by using its minified version (bootstrap.min.css).

Remove Unused Bootstrap Components Using Less

If you prefer writing CSS through Less, you have the additional option of customizing Bootstrap through its main Less file (bootstrap.less). If you open this file, you'll see lots of import statements aggregating various Bootstrap components together. You can comment out those import statements that are irrelevant to your template.

For example, to avoid using Bootstrap's labels, badges, and progress bars, you can comment out the following lines from bootstrap.less file:

@import "labels.less";
@import "badges.less";
@import "progress-bars.less";

Suppose that you don't want to use any of Bootstrap's JavaScript plugins. Remove all the CSS rules associated with them by commenting out the following lines from bootstrap.less to exclude them completely:

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

You can also remove the default font icons (glyphicons) that are built into the Bootstrap package. First you need to delete all the glyphicon-* font files from the fonts folder. Then comment out the following import statement from bootstrap.less file:

@import "glyphicons.less";

After you're done commenting out those components that you won't be using, compile the main bootstrap.less file to form bootstrap.css, as discussed in the previous chapter. This way you can reduce the size of the CSS file.

Compress all the CSS Files into One File

After developing your website's template, you will likely be left with a version of Bootstrap's CSS file and multiple custom CSS files. You can combine all these files into one CSS file, which will help in reducing the number of HTTP requests, as well as the combined size of all the CSS files.

There are several tools to help you with the compression process. One of my favorites is Recess from Twitter, an open-source code quality tool for CSS. You can read how to install and use Recess at SitePoint.

Let's first combine all the CSS files into a main one called application.css. This can done using CSS's @import statement as follows:

@import url("bootstrap.min.css");
@import url("myCSSFile1.css");
@import url("myCSSFile2.css");
@import url("myCSSFile3.css");
@import url("myCSSFile4.css");

You need to ensure that you are providing relative paths in the import statements with respect to application.css.

Next, run the recess command in the terminal:

recess path/to/application.css --compress > 
āž„path/to/application.min.css

This will create a new CSS file called application.min.css in the same folder. This new CSS file will be much smaller in size than the original separate files.

Optimizing JavaScript

Optimizing the JavaScript files is equally as important as optimizing the CSS files. Bootstrap comes with flexible options to remove any unwanted JavaScript plugins that we won't be using in our projects. This can greatly help in reducing the size of the main JavaScript file bootstrap.js.

Use a Minified Bootstrap JavaScript file

If you want to be able to use all of Bootstrap's JavaScript plugins, you should include the minified file bootstrap.min.js file rather than bootstrap.js when sending the project for production.

Remove Unused Bootstrap JavaScript plugins

Just like we did for CSS components, you can head over to Bootstrap's customization page and deselect any JavaScript plugins you don't need before downloading. This can be the easiest way of removing unwanted JavaScript plugins from Bootstrap.

Bootstrap also comes with a separate .js file for each of its JavaScript plugins. For example, it has modal.js for modals and carousel.js for carousels. You can access these individual files only if you have downloaded Bootstrap's source package.

Once downloaded, you can head over to the js folder to find all the .js files related to each of Bootstrap's JavaScript plugins. You can then include just those files in your project that you want to use.

Compress All the JavaScript Files into One

Just as with CSS, it is a good idea to have all your JavaScript files compressed into a single .js file. One of my favorite JavaScript compression tools is CompressJS, which is found on its GitHub page to download the package. With CompressJS, you have to provide the paths to all the .js files with a space between them.

Here's an example:

$ ./compressjs.sh jquery.min.js bootstrap.min.js 
āž„myCustomJavaScript.js

This command will compile all the JavaScript files and produce the output in a single .js file. It gives a random name to the compressed file and tells you the filename. If you have many JavaScript files, you can place them all in a single folder and compile them together as follows:

$ ./compressjs.sh scripts/*.js

The terminal output should be similar to FigureĀ 6.1.

Running CompressJS

FigureĀ 6.1.Ā Running CompressJS

Optimizing Images

It is often the images that cause the slow loading of web pages. Imagine a situation where we need to display an image of resolution 500px by 500px but instead we have an image of resolution 2000px by 2000px. We can use Bootstrap's helper class img-responsive to fit that bigger image into a 500px by 500px div; however, while the helper class has assisted in displaying the image properly, it hasn't actually reduced the file size of the image. Unfortunately, Bootstrap lacks the tools to fix this issue.

There are several server-side tools that can identify the request type of a particular image and then resize the image before serving it. Some of the tools I've been using are Adaptive Images and TimThumb, but I won't be covering them in this book as they are server-side tools. Installation and usage instructions are available on their official websites.

Get instant access to all books and courses.

Free Trial