Speed Up Your Blogger Page Load Time – Compress Your CSS
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.
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.
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.
Trackbacks
- 50 Amazing Blogger Tricks & Hacks : TechXav on April 12, 2009
- 50 Amazing Blogger Tricks & Hacks « Dvhacker on April 12, 2009
- 50 Amazing Blogger Tricks & Hacks | Shirley Jarrett on April 13, 2009
- 50 Trik & Hacks Dahsyat untuk Blog on June 3, 2010
36 Responses to “Speed Up Your Blogger Page Load Time – Compress Your CSS”
Blogger Sponsors
- Get Paid to Write Reviews on Your Blog
- Yaro Starak's 10 Great Blog Traffic Tips
- Create Cool Images With a Wet Floor Effect Maker
- Why Most Bloggers Are Stuck - Reporters vs Experts
- Google Friend Connect - New Social Network
- Mashable's "70 Fresh & Modern Blogger Templates" List
- Free Blogger Training Videos
- Improve Your Google Rankings in One Easy Step
- "What Blog Template Should I Make Next?" Contest Results
- Top 5 Free Blog Header Image Websites
- Improve Your Blog in 31 Days – Guaranteed
- Build a Better Online Business with WordPress
- Become a Blogger Just Reopened – 5 Days Only!
- Roadmap to Become a Better Blogger
- Free Image Hosting – Photobucket
- How to Install Google Analytics on Blogger
- Improve Your Google Rankings in One Easy Step
- 50 Excellent Blog Footers
- Free Instant Blog Logos
- Create Cool Images With a Wet Floor Effect Maker
- Lyrics: "It was a useful document. Thank you." Blog Videos (66 comments)
- Birthday: "Hello. It worked great for me, thank you." Blogger Ad Code Converter (846 comments)
- paus88: "situs slot yang sangat gacor yang pernah ada di Asia..." Blogger Ad Code Converter (846 comments)
- paus88: "paus88 is the most exciting slot site that has ever..." Blogger Ad Code Converter (846 comments)
- tokovvip: "situs togel hongkong tokovvip yang terpercaya ini..." Blogger Ad Code Converter (846 comments)
- tokovvip: "situs togel hongkong terpercaya hanya ada di tokovvip..." Blogger Ad Code Converter (846 comments)
- Wadud: "Very very helpful. Thank you." Blogger Ad Code Converter (846 comments)
- Maria: "Very effective it is and It helps a lot for me. Thank you..." Blogger Ad Code Converter (846 comments)
- noob: "We carefully select honey to reach you with the highest..." Blogger Ad Code Converter (846 comments)
- Textile Mentor: "This post is very creative I liked it. keep..." Blogger Ad Code Converter (846 comments)
Lyrics commented on 
Birthday commented on 
paus88 commented on 
tokovvip commented on
Another awesome advice! I used it for the langit template and helped a lot.
Thanks!
Thanks a lot! Now it loads faster. 😉
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
Thanks for this tip.
Mine is http://onlinelar.blogspot.com
Kip up the good work,,, thanks 😛 😆 😕
It work..mine Original size: 13458 bytes
Compressed size: 11779 bytes
Savings: 1679 bytes (12%)
Wowza! 😀
check this out
http://blogminty.blogspot.com
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).
Thanks man, i will give a try
thx for tips, but don’t give a real burst for me.
In anyway, thanks 🙂
Nickel, it does help speed up your page loads but it’s not something you would necessarily see with.
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 😉
yes, man. my blog going fast. thanks for your advice.
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.
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.
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
WILL TRY IT OUT!
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
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.
it doesn’t work because the template ends up could not be sparse. Something about white space needed.
Best tip.
Very help full.
Please check my blog its now http://www.jokedarjoke.tk very slow please give me any good tip.
speed up my blog
Thanks for the advice. Many people think pagespeed is important for when google factors PR, too.
Very nice tips man!Thanks a lot…………
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.
Great tip, I like blogspot bcz we can do anything on it
thanks for this
Thanks to you i liked your post and i have compressed my css in my website http://www.hqwallpaper.in.
thanks man for this info .
I tried to use this tool to compress my .xml file(blog template) but it showed error.
What should i do??
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
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