2009-03-25

Image

Speed Up Blog by Compressing CSS Code, تسريع-مدونتك-بلوجر-بلوج-سبوت-جوجل

CSS Code of a blog hold design attributes (like font color, column size, background color etc) of various parts of blog. Compressing this code can result in faster blog and little saving in bandwidth.

With so make theme and template designers out there, everyone has own style of coding stuff. Some template may contain ‘bad hair day’ kind of CSS code with characters spread all over.

CSS compression does not delete any part of CSS code. It removes white spaces and better organizes each CSS element into one line. Before you perform CSS compression make sure you BACKUP CSS file (Wordpress) or Template (Blogger).

FOR WORDPRESS USERS
In Wordpress Dashboard, click on ‘Design’ tab > ‘theme editor’. Click on Stylesheet (Style.css) located at bottom right part of the screen. Copy - paste contents in a notepad file for back up purpose. Now open CSS Drive online compression tool.

Then paste your CSS code in the Web based window and click on ‘Compress-it’ button. Compression mode ‘normal’ should be fine. Then paste the compressed code in your Wordpress CSS file and your are all set. In case something goes bad, restore your original CSS file.

FOR BLOGGER USERS
First you need to backup your blogger template. In your blogger dashboard, click on ‘layout’ > ‘Edit HTML’ and then click on ‘download full template’ button and save template on your computer.

Next step involves copying ONLY css code from your template. Search for <b:skin> and </b:skin> . Your blogger CSS code in between <b:skin> and </b:skin> tags. Copy that code and paste in online editor at CSS Drive online compression tool.

Click on ‘compress it’ button and now paste the compressed code between  <b:skin> and </b:skin> tags in your blogger template. Preview your blog and it should be all fine with blog loading faster. In case something goed bad, restore your old template.

You could see difference of about 11% - 20% in the size of CSS code of your Blog. So, compress CSS to speed up your blog and CSS code look good to eyes with proper text formating with no characters spread all over!

التعليقات:

  1. Wow man this is really ver helpful.

    http://www.webhostinggeeks.co.cc
    http://www.games-on-line.co.cc
    http://www.massivemoney.co.cc

    ReplyDelete
  2. Terrific! Thanks so much for sharing this; I can't believe what an improvement this made to my site, www.imperialflags.blogspot.com. I had had to get rid of so many gifs and images to get the page to open in a semi-reasonable time and now I have more space to tinker with. Thanks again!

    ReplyDelete

Total Pageviews