Graphic Rating

Compressing and Optimizing CSS Code

• by Andy Gongea
• Nov 20, 2008
• 1 Comment »

As you know, optimizing your site’s response time is one of the most popular topics regarding website design and development. And one of the elements that can be optimized in a site is CSS. Let’s take a look and see what ways of optimizing and compressing CSS code are available.

For this purpose of showing the ways to optimize CSS code I picked up a CSS file from Dave Shea’s CSS Zen Garden. It was the best choice because the CSS code was somehow in the standard coding style way. So, based on the following CSS code we will try to see how can we improve our website performance by optimizing and compressing CSS code.

1. Standard CSS Code

The following CSS example is in a way like a standard way of writing CSS code. Keep in mind that this is just a fracture of a CSS file. Let’s see how it is the code that we will try to optimize.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

html {
	margin: 0;
	padding: 0;
	}
 
body {
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	color: #555753;
	background: #fff url(/001/blossoms.jpg) no-repeat bottom right;
	margin: 0;
	padding: 0;
	}
 
p {
	margin-top: 0;
	text-align: justify;
	}
 
h3 {
	font: italic normal 1.4em georgia, sans-serif;
	letter-spacing: 1px;
	margin-bottom: 0;
	color: #7D775C;
	}
 
a:link {
	font-weight: bold;
	text-decoration: none;
	color: #B7A5DF;
	}

***The test file that I will use has 3.39 KB. For this article purpose I will use CleanCSS.***

Pros: The advantage is that you can see very easy your code and you can identify really fast the selectors.
Cons: To code has many break lines and a lot of space is wasted. The size of this CSS code is big.

2. Basic Optimization

The first thing you can do to your CSS file is to remove the semicolon (;) placed after the last property in every selector. Also you can loose the indentation and the unnecessary space placed in front of the properties as well as the single space placed in front of the properties’ values.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

html {
margin:0;
padding:0
}
 
body {
background:#fff url(/001/blossoms.jpg) no-repeat bottom right;
color:#555753;
font:75% georgia, sans-serif;
line-height:1.88889;
margin:0;
padding:0
}
 
p {
margin-top:0;
text-align:justify
}
 
h3 {
color:#7D775C;
font:italic normal 1.4em georgia, sans-serif;
letter-spacing:1px;
margin-bottom:0
}
 
a:link {
color:#B7A5DF;
font-weight:bold;
text-decoration:none
}

***New file size: 3.02 KB.***

Pros:An average decrease of size of 15%, that means the file will be loaded faster.
Cons:A minor decrease in readability but the code remains easy to read and find.

3. One Line per Selector

To optimize further the size of the CSS file, the user can make every selector declaration to be displayed in one line. In this case the depending on the file size, the gain can be significant.

1
2
3
4
5
6
7

html{margin:0;padding:0}
body{background:#fff url(/001/blossoms.jpg) no-repeat bottom right;color:#555753;
font:75% georgia, sans-serif;line-height:1.88889;margin:0;padding:0}
p{margin-top:0;text-align:justify}
h3{color:#7D775C;font:italic normal 1.4em georgia, sans-serif;letter-spacing:1px;
margin-bottom:0}
a:link{color:#B7A5DF;font-weight:bold;text-decoration:none}

***New file size: 2.57 KB.***

Pros:The decrease percentage is now at around 25%.
Cons:The readability was severely altered and not many are able to read these lines.

4. One Line CSS File

The next way is the way that I recommend to use it in production. This is how all the big names on the Internet use CSS. Also you will have to keep a clean and readable CSS file for development purpose.

1

html{margin:0;padding:0}body{background:#fff url(/001/blossoms.jpg) no-repeat...

New file size: 2.53 KB.

Pros:This is the most optimized CSS code form.
Cons:The readability is next to 0. Without “Find” capabilities in your code editor you won’t do much.

5. Guidelines for Optimizing CSS while coding

Next I will present some of the best guidelines that you can use in your coding process to optimize your CSS code.

1. Use space only when you need it.
2. Use shorthand CSS.
3. Don’t put semicolon after the last property in a selector.
4. Use ’700′ instead of ‘bold’.
5. Use ’400′ instead of ‘normal’.
6. Use 0 instead of ’0px’ or ’0em’
7. Merge selectors with the same properties

This article was created to explain the ways you can optimize a CSS file. In this test, a great help was the CleanCSS optimizer, which is an automated CSS service that can optimize your code based on different options. As you can see, you can decrease your CSS file size with 25%-30%. That is because our sample code was well written. For bad CSS coding it is possible for the decrease percentage to be higher.

So, code CSS well, choose your optimization type and follow the standards. Cheers!