ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How to Optimize CSS file for Optimum Performance

rainmaker
How to Optimize CSS file for Optimum Performance

CSS ( Cascading style sheets ) is an important  for every Website as it helps you to customize the design of your Website. Most of the modern browser, picks design related information from .Css file and renders it.  CSS have made things easier as all the parameters for the layout of a website can be specified within a single file. Optimize CSS file Size of a CSS file can be large because of useless or unused CSS selectors or because of in-efficient CSS codes. No, matter what it’s always a good idea to optimize CSS file of your Website, as it saves either few Kb’s or might end up saving huge which results in faster loading of your blog. Also, we tend to make some common CSS mistakes or at times we use outdated code which results in broken site design on different browser. Many online CSS optimization tools, also suggest you about new updated code.

If you are completely new to CSS, you can learn CSS from W3School for free or you can get an overview of CSS from this CSS-wiki article.

Optimizing CSS file is not something very tough, and anyone with decent how-to knowledge of Web-designing can work on CSS Stylesheet optimization and reduce the over all size of CSS files.

Why you need to Optimize CSS file ?

Many of you thinking, why CSS file optimization is so important and should we do it or not. In case, if you are not aware, Google started ranking website based on Site loading time. Even by saving few kb’s by optimizing CSS file, you are improving the overall load time of your Website. Also from search engine and from readers perspective, a faster loading site will always give better experience.
CSS files can be very large for some extensive websites. You can optimize your CSS for the best performance and make it load quicker by removing the redundancies and optimizing the codes.

Creating first Optimized CSS file:

Before I will start sharing the tip to create optimize CSS file, take a backup of your CSS file. As, it will be helpful in future editing. When we optimize a CSS file using any online tool, it strips off all commented text, useless and repeated text, So you might find it difficult to edit your optimized CSS file.  So, it’s better to take a backup before we start working on CSS file optimization.

If you are a CSS expert who knows how to write CSS code which is already optimized, you can skip doing optimization, else it’s better to use online tool to optimize and compress CSS file, as they are mostly up-to date with updated CSS selectors and remove all outdated and redundant codes from your CSS file.The style elements and their attributes should be specified properly in understandable codes and they shouldn’t clash with other codes within the CSS file.

Optimize CSS file using Format CSS tools:

Format CSS tool can format your code in a snap. Just copy the style sheet which you want to format and paste it in the text box. Now select the desired rules of formatting from the right hand side panel. Now enter the style rule settings like entering space or tab after colon, semicolon etc. and press the Format CSS button.

format css tool1

Now, you need to remove the unnecessary parts in your CSS. Go to Online CSS optimizer and enter your CSS code there. It can do lots of optimization like converting RGB color values to hexadecimal; remove all the comments and white spaces. Convert absolute values to relative values and so on.

cssoptimizer

How to clean your CSS file?

To clean your CSS file, you can use Clean CSS. Paste your CSS code optimized in the earlier steps and compress it by selecting the compression mode. It can merge shorthand properties, only compress colors and font weight and many more.

cleancss These tools can help you clean and optimize  CSS file for the better performance of your overall website. By optimizing your CSS file, you will be saving few Kb’s which is still useful to reduce overall loading time of your blog. I hope that this tutorial will help you to optimize CSS file of your Website and your blog will be loading faster.

  • Author Bio

  • Latest Post

Article by Vincent Vagabond

Vincent has written 2 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 8 comments… add one }

  • sashimi

    If your site uses ASP.NET, you can have the site optimise the css on the fly, so you don’t have to redo stuff when you change your css. Check out:

    http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx

    Reply
  • Gourav Jain

    Nice share !! I’ll definitely try this out.

    Reply
  • shashank

    i removed 16 unused id in CSS:)
    Moreover ununsed css loads website faster!
    thanks:)

    Reply
  • Mani Viswanathan

    Clean CSS is the best I would say. Also removing unnecessary comments is very important while optimizing a css file.

    Reply
  • Chetan Bhasin

    Good! Very good guide, I can’t explain how useful it was for me.

    Reply
  • Designer's Digest

    I have used cleancss for several times.

    Reply
  • Rakesh @ Wizard Journal

    Quite complicated for free, i am a new css user/

    Reply
  • Nihar

    Thanks for sharing this Vincent. I have used few online sites to compress my themes CSS but, some sites doesn’t do it properly and site files to draw badly in few browsers.

    Do these sites that you share do it properly?

    Reply

Leave a Comment