8 Tips to Optimize and Reduce CSS File Size and Increase Performance

No.of Views1341
Bookmarked0 times
Downloads 
Votes0
By  RRaveen   On  06 Dec 2010 00:12:43
Tag : ASP.NET , HTML and CSS
The website loading speed is always important.In this article, i will give 8 ways to optimize CSS and reduce the CSS file size.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

The website loading speed is always important.In this article, i will give 8 ways to optimize CSS and reduce the CSS file size.The web page loading is speed is important now days. The reason is, if your website is slow users or readers not like it to visits. they are expecting the site would be load in few seconds. even search engine also give a certain points for faster website than slower.

So here I'm going to give 8 ways to optimize CSS and reduce the file size, through these tips, hope your website loading speed will increase.

1. Don’t use the line breaks

body
{
	font-family:Verdana,Arial;
	font-size:12px;
	font-weight:bold;
	font-style:normal;
}

File Size: 105 bytes
Instead above you can use the like following,

body{font-family:Verdana,Arial;	font-size:12px;	font-weight:bold;	font-style:normal;}

File Size:88 bytes
Here you have saved 17 bytes, to remove the line breaks and optimize CSS, you can use the following online tools

2. Using shorthand

body
{
	font-family:Verdana,Arial;
	font-size:12px;
	font-weight:bold;
	font-style:normal;
}

Instead above style, you can using shorthand as like below

body{font:12px Verdana,Arial normal bold;}

File Size:45 bytes
Here you have reduced more have 50% of size.

3. Remove unused selectors.

In your development time you may add different styles for your page, but finally you may forget to remove those, so this also leads to increase your CSS file size. There is good tool to remove the unused styles from your page. This is calling “Dust-Me Selectors”. You have to install this tool as extension of Firefox from here https://addons.mozilla.org/en-US/firefox/addon/5392/
Once you installed add-on in Firefox you able to see like below 

Image Loading

Then just select the “Find unused selectors” it will run and display list if unused selector.
Note: It will look only the current page. For more details http://www.sitepoint.com/dustmeselectors/

4. Remove “px”

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

If value is 0, then don’t need speicify the “px”

*
{
	margin:0;
	padding:0;
}

This is alos help to reduce the size,when you are have more times 0 in your css.

5. Always Use Simple color

In some case, you define color like following

h1,h2,h3,h4
{
	color:#ffffff;
}

But this is also lead to increase your file size.so above style you can change or write like followings,

h1,h2,h3,h4
{
	color:#fff;
}

but in this tips there are some limitation, see following color code,

#ee22aa -> #e2a but #ee212a still you have to use #ee212a.

6. Remove the comments in production css file

/************************************/  
/*          Head                    */  
/************************************/  

body{font:12px Verdana,Arial normal bold;}

/* common    */  

h1,h2,h3,h4
{
	color:#ffffff;
}

This is also lead your file size, so in production you have to remove the comments

body{font:12px Verdana,Arial normal bold;}h1,h2,h3,h4{	color:#ffffff;}

7. Remove the last property semicolon

h1,h2,h3,h4{	color:#ffffff;}

above style you can write like following

h1,h2,h3,h4{color:#ffffff}

8.Use Online Compress tools

There are many online CSS minify tools to help to remove these unnecessary line breaks, comments and etc. here few of them

Conclusion

When you are reduce the CSS file size by one byte your site the loading speed is increasing by 0.1 milliseconds. So keep your CSS file size is less size and external source file to load your side speed and earn more revenue.thank you for reading

 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top