28 Jul 2013

How To Compress JavaScript and CSS StyleSheet In Blogger?

we should compress the JavaScript and StyleSheet of a blog to boost the loading speed and here I'm going to teach step by step to those who can't compress their JavaScript and CSS files. Compressing these coding will surely bring the benefit because after compression, the code looks short and it looses too much memory that actually helps in improving loading time. We can easily compress any JavaScript or CSS code with the use of two tools I have. So, now it's time to begin the tutorial.

Compressing JavaScript and CSS

The important thing is that you should know that a code is JavaScript or CSS so that you may not get problem in getting the code from your template. I will help you in finding CSS of your blog but for JavaScript you will need to find yourself. So first we begin with the compression of StyleSheet.

Caution

In the tutorial, we're going to play with the coding of your template so it's important to take backup of your template first otherwise you can be in big trouble. I recommend to always take backup of template before editing the template.

StyleSheet

  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTML >> Expand <b:skin> By Clicking On The Arrow With <b:skin>Tag.
  • After Expanding, You Will Get The Complete Cascading StyleSheet Of Your Blog Between <b:skin></b:skin> tags. So Copy The Whole Code Between These Tags.
  • Now Save That Code In The Notepad.
  • Go To CSS Compressor
  • Paste The Coding In The CSS Input Box
  • Press "Compress" Button.
  • Here You Will Get Your Code Compressed. 
  • In The Messages Box, You Will Get Known That What Kind Of Changes Are Made With Your Code.
  • Compressed CSS Box Will Be Having Your Compressed Code.
  • In The Last, You Will Know The Compression Ratio That How Much Memory Decreased.
  • Now Press "Select All" Button and Copy The Compressed Code.
  • Go To Blogger >> Template >> Edit HTML 
  • There Replace The Whole Code Between <b:skin></b:skin> Tags.
  • Save Your Template and You're Done!

JavaScript

  • As I Told You That You Will Need To Find The JavaScript Coding In Your Template Yourself So, First Get It and Save It In Notepad
  • Now Go To JavaScript Compressor
  • Paste The JS Code 
  • Press "Compress" Button.
  • So Here Is Your Compressed JavaScript Code.
  • At The Bottom, You Will Get The Compression Ratio.
  • Now Copy The Compressed Code
  • Replace It With The Old One In Your Template.
  • Save Your Template.
  • That's All!

Final Words

So friends, This was a little post in which we learned about the JavaScript and CSS Compression. I hope this little tutorial will help you in improving the loading speed of your blog. What do you think about this? Please share your ideas in the comments and don't hesitate in asking any question. See you soon guys! Take Care!

2 comments:

  1. I much prefer the tool at www.blimptontech.com for minifying my JavaScript files. It uses UglifyJS2 which not only is a powerful library it adds variable concatenation which helps reduce your overall file size even more.

    Great post on how to help your Blogger though. Keep up the solid posts :)

    ReplyDelete

Ads Inside Post