Working with Koala

Once we have explored all the things that we are going to include in this project, let's set up the tool to put them together. In Chapter 1, Responsive Web Design, we have installed Koala. Koala is a free and open source development tool that ships with many features. In this first project, we will use Koala to compile style sheets and JavaScripts into a single file, as well as minify the codes to result in a smaller file size.

There will be about five style sheets that we are going to include in the blog. If we load all these style sheets separately, the browsers will have to pull off five HTTP requests, as shown in the following screenshot:

As shown in the preceding screenshot, the browser performs five HTTP requests to load all the style sheets, which have a size of 24.4 KB in total and require around 228 ms in total to load.

Combining these style sheets into a single file and squishing the codes therein will speed up the page-load performance. The style sheet can also...