Improve Blog Performance by reducing CSS file size

Cascading Style Sheets (CSS) is used generally to define the display of HTML elements. Styles and normally saved in external CSS file. It helps enable you to change the layout and appearance of your website pages. The purpose of using CSS is decrease the amount of source code on a page, by referencing a single set of instructions on how to display various elements on web page. In more general terms it defines the Font Size, Color, Spacing, Border, Margin, Padding etc.

In very normal condition the size of CSS style sheet is about 20KB (on WordPress). If the size is big then it can also affect your site performance by increasing the page load time. Using Optimized Style sheet is a syndication of good webmasters. In Context of SEO, Search Engines also love to pages with less coding errors. Here are few Tips that will surely increase your Site Performance and fix lots of cross browser layout issues.

Here are 10 Effective Tips to that will surely help you to Optimize CSS File by avoiding common CSS Coding Errors. Its just like as compressing your Style sheet without affecting your Site appearance and performance.

1. Don’t Repeat Similar Images Occurrence

This could be possible you are using lots of images in your website’s style sheet and most of them are similar. For example you are using similar image as background on both Primary and Secondary Navigation Menu. It may be possible that you have uploaded both at different locations. And calling the on your Style Sheet with two different urls. So don’t do so if you are doing.

If you are using same image on various part of your website then instead of uploading them at different locations and calling with different urls, only use a Single Image code. This is very simple, for example you are using a 10kb image at different locations say 4. Then total size would 40kb if you would use Different image embed code.

2. Combine All CSS files into one File

On a website we use various Style Sheets for different parts. So instead of using different style sheet for every part use a single style sheet at all. This will decrease the number of HTTP requests. The formula is simple.

When using 4 Style sheets = 4 HTTP Request

Using 1 Style sheet = 1 HTTP Request

<link rel="stylesheet" type="text/css" href="banner.css" />
<link rel="stylesheet" type="text/css" href="ads.css" />
<link rel="stylesheet" type="text/css" href="footer.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

3. Always Place CSS File code in Header

In Header we call lots of external files as well as internal files but call your main style sheet file at very first of all. This should be loaded first of all to improve page loading time. Would be best place it just below your Meta tags.

4. Reduce Number of Line Breaks

Reducing Number of Line Breaks is an another effective way to increase page load performance. Instead of  creating new line for every new property place them all next to each other. As most of style sheet has line breaks as shown in style of heading tag 2 below.

h2 {
font-family:arial;
padding:0;
margin:5px 0;
color:#000;
text-decoration:none;
}

Instead of using above method use the method shown below. It will reduce the number of lines.

h2 {font-family:arial;padding:0;margin:5px 0;color:#000;text-decoration:none;}

5. Use CSS Short hands

Group all the same properties together. It Reduce the CSS File size and improve page load performance as well. This specially for background images, always group similar properties together. See the improved method below.

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

Never use the method shown below, as most of do. Always use background properties in grouped form to reduce word count, and number of line breaks.

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

6. Group Similar Styles

It might be possible that you are using same styling properties of various classes and tags. If so group them together. The Conventional method is as shown below.

h1 {padding:6px 2px; font-family:arial; font-weight:bold;}
#box1 .heading {padding:5px 2px; font-family:arial; font-weight:bold;}
#box2 .heading {padding:5px 2px; font-family:arial; font-weight:bold;}

The Improved method is as shown below, we have placed heading tag, box 1 and box 2 class in one line. When more than 2 Tags or class has similar styling properties then its ideal to grouped them all. It will reduce Line Breaks, and Text Count.

h1, #box1 .heading, #box2 .heading {padding:5px 2px; font-family:arial; font-weight:bold;}

7. Use Simple Comments

I noticed in lots of theme coders use lots of asterisks for commenting, its understandable by me why they do so.  Its Increase the size of Style sheets increase Texts Counts, and Line breaks, too. So whenever you are placing a comment in CSS instead of using too many asterisks,  use minimum.

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

Instead of using above method use this method for placing comments.

/* content page */

8. Use Simple Colors

In CSS 3 we have lots of new properties, styles etc; so use them all. Instead of using full color code like this,

#FFFFFF, #113355, #AABBCC, #FFFF00, #FFFF00

Use them like as below, For #FFFFFF you can use only #FFF, both will turn same result.

#FFF, #135, #ABC, #FF0, #FF0

The Dark side of using colors short codes is, we won’t able to change anything like this,

#D2D2D2, #1A2B3C

9. Remove Px & Last Semicolon

In the latest CSS version, no need to use PX after ‘0’ numeric values [for styling properties like as width, height, margin, padding]  And also No need to use semicolon with the last styling property in a class or tag.

Before Removing Last Semicolon,

h2 {font-family:arial;color:#000;}

After Removing Last Semicolon the code would look like as,

h2 {font-family:arial;color:#ooo}

Also when using padding and margin property in CSS don’t use PX (pixels) with numeric values as used in code below.

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

You can remove all px from padding and margin also with bordering properties.

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

10. Validate Your Style sheet

It’s always possible that your CSS code has some coding errors, coz we are man its obvious. So you can use a machine to fix the remaining. Use CSS validator to validate your Style Sheet and remove common typos errors.

CSS validator from W3 is on the best online tool to check your style sheet validation. It gives you suggestion along with validated code. But remember if you are using Round corners etc. this will show them as error but actually they aren’t. So instead of using the whole validated code suggested by this tools check the particular parts and fix them.