15 Ways to Optimize CSS and Reduce CSS File Size

Introduction

I have gathered a long list of CSS optimization and file size reduction techniques that have been using by most designers/developers. Depend on the complexity of your CSS code, these techniques might greatly reduce your CSS file size, or maybe just a few kilobytes.

Also, you might also want to read my previous post regarding CSS - 15 CSS Tips and Tricks to learn how to write more efficient CSS code.

1. Use CSS Sprite

"CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment." - Yahoo Developer Rule

This method is proven to greatly reduce the amount of HTTP request and very effective for high traffic websites. The famous community news website Digg is using this method.

More details about CSS Sprite:

2. Combined all CSS files into single file

"When a user is opening your website every object on the page (e.g. images or scripts) will require a round trip to the server. Those HTTP requests will delay the response time of your site, and if you are loading dozens of objects this delay can add up to several seconds." - Dailyblogtips

This technique is quite similar to CSS Sprite, at least they have the same purpose - to reduce HTTP requests. So, if you have 3 CSS files in your webpage, browser will send 3 HTTP requests to the server. Simple mathematic, 1 CSS file = 1 HTTP request. I have seen some of the websites that have 6-7 CSS files in the header, and that will affect your website loading time for sure.

Before

<link rel="stylesheet" type="text/css" href="content.css" />
<link rel="stylesheet" type="text/css" href="about.css" />
<link rel="stylesheet" type="text/css" href="contact.css" />

After

<link rel="stylesheet" type="text/css" href="layout.css" />

3. Make CSS as an external file

"Using external files in the real world generally produces faster pages because the CSS files are cached by the browser. CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests." - Yahoo

This is so true. There are a lot of websites still using inline CSS. From develoment point of view, although there are a lot of tools out there to help out, but, we should always try our best to separate different languages into different files. For example, try not to put inline CSS, javascript in the HTML documents, but put them into external files. It makes your code easy to maintain and read. Besides that, it also increases and optimize website performance.

4. Always put CSS file in the header/top

"While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. " - Yahoo

Putting stylesheet in HEAD can avoid two problems: the blank white screen and flash of unstyled content. Steve Souders did some tests on what will happen if you put the Stylesheet in somewhere else in the webpage.

Before

<html>
	<head>
		<title>CSS</title>
		<style>
		body {
			font-family:verdana;
			margin:0;
			padding:0;
		}
		
		h1 {
			font-weight:700;	
			margin:5px 0;
		}
		
		......
		......
		......
		
		</style>
	</head>
</html>

After

<html>
	<head>
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
</html>

5. Use Link instead of @import

A details testing and analysis from indicates using @import can affect the performance of your website. The result of the analysis:

Using @import within a stylesheet adds one more roundtrip to the overall download time of the page.
Using @import in IE causes the download order to be altered. This may cause stylesheets to take longer to download, which hinders progress rendering making the page feel slower.

6. Use CSS Shorthands

By grouping all the same properties settings together, CSS shorthand definitely able to help you reduce and optimize CSS files. Instead of multi lines of properties, we'll able make it a one liner. The following is all the CSS shorthands:

CSS Shorthand

/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}

h1 {margin-top:1em;
   	margin-right:0;
   	margin-bottom:2em;
   	margin-left:0.5em;
}

/* BORDER */
h1 {border:1px solid #000;}

h1 {border-width:1px;
    border-style:solid;
    border-color:#000;
}

/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}

h1 {border-top-width:1px;
	border-right-width:2px;
	border-bottom-width:3px;
	border-left-width:4px;
}

/* BACKGROUND */
div	{background:#f00 url(background.gif) no-repeat fixed 0 0;}

div	{background-color:#f00;
	 background-image:url(background.gif);
	 background-repeat:no-repeat;
	 background-attachment:fixed;
	 background-position:0 0;
}

/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

h1 {font-style:italic;
	font-variant:small-caps;
	font-weight:bold;
	font-size:1em;
	line-height:140%;
	font-family:"Lucida Grande",sans-serif;
}

/* LIST STYLE */
ul {list-style:square inside url(image.gif);}

ul {list-style-type:square;
	list-style-position:inside;
	list-style-image:url(image.gif);
}

/* OUTLINE */
h1 {outline:#f00 solid 2px;}

h1 {outline-color:#f00;
	outline-style:solid;
	outline-width:2px;
}

7. Group Similar Styles

This happens easily after a long development. We just declare the same styles over and over again without realising that something exactly the same is already exist. It's good to look back the CSS code and reanalyse it, so that similar styles can be grouped together.

Before

h1 {padding:5px 0; font-family:verdana; font-weight:700;}
#box1 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}
#box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}

After

h1, #box1 .heading, #box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}

However, for most cases, the CSS Styles not neccesarily appear eaxctly the same, like this:

Before

#nav a.home {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(home.gif) no-repeat 5px 5px}
#nav a.portfolio {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(portfolio.gif) no-repeat 5px 5px}
#nav a.contact {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(contact.gif) no-repeat 5px 5px}
#nav a.about {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(about.gif) no-repeat 5px 5px}

After

#nav a {padding:5px 0; font-family:verdana; font-weight:700; background:#fff no-repeat 5px 5px}

#nav a.home {background:url(home.gif)}
#nav a.portfolio {background:url(portfolio.gif)}
#nav a.contact {background:url(contact.gif)}
#nav a.about {background:url(about.gif)}

We all can see the differences for this example, it's a great method to reduce CSS files size and increase readability.

TO THE EXTREME: CSS File Size Reduction

This section is dedicated for those who want to further reduce CSS file size. Some of the tips and tricks can only reduce few bytes from the file, but it's will be good to know all the possibilites anyway. :)

8. Reduce The Number of Line Breaks

h2 {
	font-family:verdana;
	padding:0;
	margin:5px 0;
	color:#333;
	text-decoration:underline;	
}

/* you can do it like this */
h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline;}

9. Remove the last semicolon

h2 {font-family:verdana;color:#333;}

/* removed */
h2 {font-family:verdana;color:#333}

10. Use simple comments

/************************************/
/*          Content Page            */
/************************************/

vs

/* content page */

11. Simple Color

Instead of using full color code like this:

#FFFFFF, #113344, #AABBCC, #FF0000

We can do it like this

#FFF, #134, #ABC, #F00

However, we won't able to change anything like this:

#C4C4C4, #1A2B3C

12. Remove "px"

h2 {padding:0px; margin:0px;}

/* removed */

h2 {padding:0; margin:0}

13. Using shorthand

As mentioned above, it really helps in reducing file size.

14. Remove unused classes

During the development, due to the design changes, some of the classes that we have created might not in use. Sometimes, we just have to skim through the CSS code, and identify them and clean up the code.

Dust-Me Selector is a Firefox extension that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.

15. Use CSS Compression Tools

Or, if you don't want to do all that manually, you can always use the following tools:

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

Reference/Credit/Further reading

Copyright & Usage

The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.