Excerpt from Jump Start Bootstrap
- Optimization Techniques
- Optimizing CSS
- 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.
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.
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";
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:
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
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.
Bootstrap also comes with a separate
modal.js for modals and
carousel.js for carousels. You can access these
individual files only if you have downloaded Bootstrap's source
files compressed into a single
.js file. One of my
its GitHub page to
download the package. With CompressJS, you have to provide the
paths to all the .js files with a space between
Here's an example:
$ ./compressjs.sh scripts/*.js
The terminal output should be similar to Figure 6.1.
Figure 6.1. Running CompressJS
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
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.