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.

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.

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.

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.

5. Use Link instead of @import

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:

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.

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;}

11. Simple Color

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:

Reference/Credit/Further reading

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

32 comments

Indra
5 years ago

Good article on reducing CSS file size. BTW there are some typos in this sentence under no. 7. Group Similar Styles: "However, for most cases, the CSS Styles not neccesarily appear eaxctly the same, like this:"