Increase website speed with css optimization ~ GrowTechInfo.com

Now website speed is search engine ranking factor, officially. CSS optimization playing major role in increasing website speed. Here I'm telling some step for how to optimize CSS and obviously website speed.

Avoiding import external CSS in style sheet

Importing another CSS into CSS will force browser to download CSS one after one. It is increasing a waiting time until all CSS download. @import statement used to import an another CSS. e.g.

/*file:first.css*/
@import url("second.css");

In above example, first.CSS import second.CSS. When first.css is downloaded then second.css downloaded, increase in waiting time.

Solution:

Instead of using @import, force to download CSS parallelly. This will speed up rendering time. Use <link> tag for each stylesheet, which allow browser to download all stylesheet parallelly.


<html>
    <head>
        ...
        <link type="text/css" href="first.css" media="screen" />
        <link type="text/css" href="second.css" media="screen" />
        ...
    </head>
    <body>
        ....
    </body>
</html>

Remove Unused code

Unused code in CSS will increasing the size of file. Larger file take time to download, and decreasing in speed of site.

Solution:

Use CSS minify for removing all unused code from CSS, for that use CSS compressor.
Note: Check the version of CSS compressor, because if you are using CSS3 and compressor using CSS2.1 or less than compressor will remove all CSS3 properties like shadow, border radius, etc. It is better way to minify CSS manually.

Code Duplication

Code duplication is writing same properties for different tags. This will increasing a size of CSS file. For example, if you want to apply same style for tag h1 and h2,


h1{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}
h2{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}

In above example properties of tag h1 is repeated for tag h2, this will increasing size of CSS.

Solution:

Use comma operator to apply same properties for multiple tags.


h1, h2{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    font-weight:800;
    color:#039;            
}

Avoid CSS Expression

CSS expression is used to change the CSS properties dynamically. This CSS expression work only in Internet Explorer also this expression execute each time when page is load, scroll down, resizing browser, event mouse move in browser. Expression may slow down you website speed. Example of CSS expression.


#customeDiv {
   position:absolute;
   width:100px;
   height:100px;
   left:expression(document.body.offsetWidth  - 110 + "px");
   top:expression(document.body.offsetHeight - 110 + "px");   
}