Welcome, visitor! [ Login | Sign Up ]
Home > Blogger Articles > Speed Up Your Blogger Page Load Time – Compress Your CSS

Speed Up Your Blogger Page Load Time – Compress Your CSS

Posted: Wednesday, March 5th, 2008 | Author:

You have to admit, most free 3rd party Blogger templates that you download are a mess. You open up the xml file and it’s a long and ugly-looking beast of code spaghetti. If you’re like me, you prefer a nice and neat template (even though you’ll be the only one seeing it) and you’ll want to tidy it up.

Most of the code you don’t want to tinker with but the .css code (the part that styles your entire blog with images and colors) is where some people like to change font colors, sizes, or even just space it out properly so it’s important that it’s not only neatly organized, but also properly aligned.

More importantly, did you know the more lines of code your template has, the longer it takes to load in a browser? So your 1,500 lines of code in your newest Blogger template could really be much shorter in size, thus speeding up page load times for your visitors. The slower your site, the more likely a visitor will be deterred and not wait for it to load up.

So here’s a neat trick to optimize your template. I’ve started doing it with some of the newer templates now being hosted on eBlog Templates. You’ll want to do what’s called “commpress your css” into a much smaller format. There’s a site I use called CSSDrive that offers a free web-based CSS Compressor. All you do is select a few basic options like compression mode and comments handling and then paste in your css. The css is the code between the <b:skin> and </b:skin> tags.

Make sure you backup your template code before doing this! Some people might not like how the css looks after it’s compressed so it’s best to have a backup. You also might make a mistake and copy the wrong sections which could screw up your template code. Bottom-line, backup your template before doing this.

css-compression-options.png

After you click on the “Compress-it!” button it will go through your .css code and shrinks it down. Essentially it removes unnecessary white spaces and better organizes each css element into one line. Here are the results for one of the Blogger templates I compressed.

css-compression.jpg

My xml Blogger template was originally 1,286 lines of code and after the css compression was done, it dropped it down to 914. Now that’s not a huge difference (14%) and you probably won’t notice a difference when you load up your blog with the new code, but every little bit helps. Also, some template code might be messier than others so the size decrease could potentially be a lot more.

I also just ran the normal compression mode and wanted to keep my comments so if you go with the super compact mode and strip out all comments, you can compress it even further.

This tool can be used for WordPress blogs or any other websites actually. Most of the Blogger templates I come across are the ones in need of a code clean up, however. So if you’re ready to give CSS Compression a shot, check out CSS Drive’s free tool and compress away!

Ready to super charge your blog? Check out our professional premium blogger templates or make money by joining our blog affiliate program!

If you like this post then please consider subscribing to our eBlog Templates RSS feed. You can also subscribe by email and have new templates and articles sent directly to your inbox.
Blogger Articles


Trackbacks

  1. 50 Amazing Blogger Tricks & Hacks : TechXav on April 12, 2009
  2. 50 Amazing Blogger Tricks & Hacks « Dvhacker on April 12, 2009
  3. 50 Amazing Blogger Tricks & Hacks | Shirley Jarrett on April 13, 2009
  4. 50 Trik & Hacks Dahsyat untuk Blog on June 3, 2010

36 Responses to “Speed Up Your Blogger Page Load Time – Compress Your CSS”



   
DOTMEDOMAINS on Apr 16, 2008, 12:43 pm  

Another awesome advice! I used it for the langit template and helped a lot.

Thanks!


   
alonqexe on May 10, 2008, 1:28 am  

Thanks a lot! Now it loads faster. 😉


   
Soft911 on May 23, 2008, 2:54 am  

Thông báo Tham số không hợp lệ trên nền trang: Biến số được sử dụng nhưng chưa được xác định. Thông tin đầu vào: bgcolor

Help me


   
Ashok on Jul 3, 2008, 5:54 am  

Thanks for this tip.
Mine is http://onlinelar.blogspot.com


   
mike on Jul 17, 2008, 5:19 pm  

Kip up the good work,,, thanks 😛 😆 😕


   
Andy on Aug 24, 2008, 3:12 am  

It work..mine Original size: 13458 bytes
Compressed size: 11779 bytes
Savings: 1679 bytes (12%)

Wowza! 😀


   
callmeminty on Sep 2, 2008, 10:53 pm  

check this out

http://blogminty.blogspot.com


   
zuborg on Sep 11, 2008, 9:42 am  

I would also recommend this online free tool: http://Site-Perf.com/.

It measure loading speed of page and it’s requisites (images/js/css) like browsers do and shows nice detailed chart – so you can easily spot bottlenecks.

Also very useful thing is that this tool is able to verify network quality of your server (packet loss level and ping delays).


   
Arof on Nov 22, 2008, 7:50 am  

Thanks man, i will give a try


   
nickel on Dec 23, 2008, 8:28 am  

thx for tips, but don’t give a real burst for me.

In anyway, thanks 🙂


   
David on Dec 23, 2008, 9:57 am  

Nickel, it does help speed up your page loads but it’s not something you would necessarily see with.


   
nickel on Dec 23, 2008, 3:11 pm  

So, is better use compression in any case?

ah, another question David (if I could) exists a compression for blogger-template? like a css-compressor?

thx, for this hi-blog 😉


   
kakokaka on Feb 22, 2009, 6:12 pm  

yes, man. my blog going fast. thanks for your advice.


   
Jonathan on Aug 19, 2009, 10:19 am  

Wow, thank you very much David. This is exactly what my blog needed. I just had to use the compressor 3 consecutive times for it to work, like small to normal to maximum compression in order for some things to remain stable in my blogger template. Too complicated to explain here, but it does work. Be well.


   
Jonathan on Aug 19, 2009, 10:56 am  

If anyone has trouble doing this with their blogger template, just do 3 separate compressions consecutively like so: small, then large, then maximum, downloading the compressed css each time. Mine is sped up quite a bit. Thanks David.


   
pixelshots on Sep 4, 2009, 8:52 pm  

oh frnd it is not working for me.. i meant the code after compression gives error,but shows that it compressd the code to 56 percent.. giving error but… u said to compress the codes between skin tags or including the skin tags.. i tried both.. dnt know wat problemm


   
carl on Oct 7, 2009, 7:17 am  

WILL TRY IT OUT!


   
Blogging Tips on Nov 25, 2009, 10:57 am  

I done this with one Template but Late when Editing the Template it can be Confusing this is where it’s Good to have the CSS saved to a File on your Hard Drive


   
stanley on Dec 20, 2009, 10:31 am  

hi, quite a god article. however, every time i try to compress my css i am told of the following problem.

Invalid variable declaration in page skin: Variable is used but not defined. Input: bodytextcolor

what should i do?
thanks.


   
John on Dec 26, 2009, 2:01 am  

it doesn’t work because the template ends up could not be sparse. Something about white space needed.


   
Muhammad Azhar on Mar 7, 2010, 11:18 am  

Best tip.
Very help full.
Please check my blog its now http://www.jokedarjoke.tk very slow please give me any good tip.


   
safrootkimo on Mar 13, 2010, 8:20 am  

speed up my blog


   
David on Mar 26, 2010, 1:46 pm  

Thanks for the advice. Many people think pagespeed is important for when google factors PR, too.


   
Karthick-The fire on Mar 27, 2010, 1:12 am  

Very nice tips man!Thanks a lot…………


   
Manuel on Apr 7, 2010, 4:02 am  

Wow, This is insane. Number of lines in my CSS was around 500 and after a ‘Normal’ compression, it went down to as low as 127!! Is that normal? My blog is working fine after the hack and I hope everything is going good. Thanks for the post 🙂
And this is my blog http://www.techdrivein.com
Can somebody check and tell me if there are any abnormalities. Thanks in advance.


   
Islamabad Community on Apr 23, 2010, 10:11 am  

Great tip, I like blogspot bcz we can do anything on it


   
BGY on Jul 25, 2010, 4:03 pm  

thanks for this


   
Ravi Saive on Oct 22, 2010, 1:04 am  

Thanks to you i liked your post and i have compressed my css in my website http://www.hqwallpaper.in.


   
Nokia X6 on Nov 11, 2010, 7:44 am  

thanks man for this info .


   
Ashish on Mar 26, 2011, 3:48 am  

I tried to use this tool to compress my .xml file(blog template) but it showed error.
What should i do??


   
Alvin on Jul 24, 2011, 7:49 am  

Hey I’ve tried using it for my blog, but it keeps giving me an error of sorts like some error 500. how do I deal with it? I’ve tried it many times already


   
deepak on Feb 16, 2017, 2:11 pm  

Hey I’ve tried but it showed me error that CSS file size is over 100kb, and unable to compress. You have any other solution or way to compress CSS over 100kb file. Thanks in advance