Web application Performance Optimization Part 2: Optimizing CSS

In this part of the series, I’m going to share some of the techniques that I used to optimize SharePoint/ASP.NET applications from CSS perspective. All of the following techniques are common for other technologies too.

Use Shorthand Properties

There are few shorthand properties available in CSS that we can use to set several properties at once. Those properties are: background, border, font, list-style, margin, padding, and outline.

Use margin: 1px 0 2px 5px; instead of margin-top: 1px; margin-right: 0; margin-bottom: 2px; margin-left: 5px;

Advantages:

• Reduced file size
• Faster performance
• Easy maintenance

CSS Compression

In my previous post of this series, I’ve talked about JavaScript compression. The same compression process applies on CSS as well. It will remove whitespaces, comments, replacing existing properties with shorthand properties. It will reduce the file size and reduce the amount of data sent in each server response. There are many tools available for CSS compression like YUI, Microsoft Ajax Minifier, etc... You can use previous post to get an idea on compression and tool comparison.

Add CSS in the Head section

CSS in the head section of the page allows the page to render progressively. The best approach for a page load should be; browser to display whatever content it has and in proper visual format. So if we add CSS at the top of the page. It will help the browser to render the downloaded content.

Avoid CSS Expressions

CSS provides a powerful way to set properties dynamically. It only works with IE version 5 – 7. Microsoft decided to stop supporting them from IE8 onward. To make IE standards compliance, browser performance, and security reasons. Let’s say if we’re using expression in CSS that mean is expression may be evaluated on different events like mouse move, hover, resize, on scroll. Especially when we’re moving mouse pointer on the page. It might evaluate unknown number of expression without any reason and slow download our page performance.

Note: Fewer HTTP request is the key to improve the page load time for any application. The following sections are mostly related to; how to reduce HTTP requests.

CSS Sprite

This technique reduces HTTP request each time a page is load by combining several images together on a single image file and control its output with CSS background-position attribute. Here is a very useful article Creating easy and useful CSS Sprites.

Merge (combine) All CSS files

As we know, fewer HTTP requests are the key to the performance. If we’ve more one CSS files in our application then we should try to merge/combine them into one file. It might not reduce the amount data but it definitely reduces the number of HTTP requests. Still we can use CSS compression tools to reduce the size of combined CSS file.

Online CSS Optimization Tools

Here are some online CSS optimization tools that we can use to optimize CSS during our projects:

• CleanCSS
• Prefixr
• CSS Optimizer
• W3C CSS Validation Service