iBlognet

Home SEO

Speed Up Your Website: CSS Optimization

by Editor

CSS OptimizationDoes your website loads like a tortoise, due to over weighted or unwanted CSS styles? Then it’ s time to optimize your website CSS to load your website with a blazing speed. In this post I will show you the different ways in which you can optimize and reduce your CSS file size that have been using by most designers/developers. If you are not an expert, don’t worry, at the end of the post I have listed some online tools where you can optimize and reduce your CSS file size to a great extent.

1. Combine all CSS files into a single file
Whenever a user visits your website, every object on the page [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. So, if you have 3 CSS files in your webpage, browser will send 3 HTTP requests to the server. Combine all the 3 CSS files into one like shown below:

Before

<link rel=”stylesheet” type=”text/css” href=”style1.css” />
<link rel=”stylesheet” type=”text/css” href=”style2.css” />
<link rel=”stylesheet” type=”text/css” href=”style3.css” />

After

<link rel=”stylesheet” type=”text/css” href=”allstyle.css” />

2. Make CSS as an external file
After combining all CSS files into one it’s time to link it as an external file. Because using external files 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 [example of inline shown below]. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document.
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.

Before[Inline example]

<html>
<head>
<title>CSS</title>
<style>
body {
font-family:georgia;
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>

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

4. Reduce 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;}

5. Remove last semicolon [not all]
Before

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

After

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

6. Use simple comments
Instead of using long comments using short comments:
Before

/************************************/
/* Main Page */
/************************************/

After

/* Main page */

7. Simple Color
Instead of using full color code like this:
#FFFFFF, #113344, #AABBCC, #FF0000

You can do it like this
#FFF, #134, #ABC, #F00

However, we won’t able to change anything like this:
#C4C4C4, #1A2B3C

8. Change “0px” to “0”
Before

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

After

h2 {padding:0; margin:0}

Not an expert, you can also use the following tools:
CSS Optimizer
Flumpcakes CSS Optimizer
CSS Formater and Optimizer
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

The optimization is not yet complete.When it comes to website optimization, there are lot of thing you need to consider. In my next post I will show you how to optimize Java scripts.

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

Comments on this entry are closed.

Previous post:

Next post: