HackingUniversity - Hacks . Tricks . How-To's

18 May 2015

How to Compress Bloggers HTML Code & Reduce Size

Blogger's template are composed using HTML, CSS, JavaScript hence all the three languages are used to give blogger templates the desired look. Well but its not necessary to learn all of them as many tutorials could be browsed online that you actually make designing your blogger template and the best part many good sites even provide free blogger templates for one click blogger designing.

Well but on your end its really necessary to optimize the speed of blogger, by reducing image size while posting content or even if you are using few images on your blog, even compressing CSS code could reduce the size and give a neat look.

Well today we will be posting a simple online tool that combines everything, its compresses the whole HTML Template, CSS, JavaScript in one go and gives you a simple HTML code that you can use on your blog.

Compress Bloggers HTML, CSS and JavaScript Online

Now just follow the below steps and see how we actually reduce the size of our Blogger Template HTML section, its going to make secure, compressed and fast.

  1. Open Blogger > Template > Edit HTML.
  2. Now press Ctrl + A & copy the whole code.
    blogger template editor
  3. Visit https://htmlcompressor.com/compressor to compress the whole code.
    html compresser blogger
  4. Paste the whole code in the compression box like above.
  5. Now don't click the compress button straight as we have to tweak few settings.
  6. On the right hand side you have to choose Blogger from the drop down menu.
    blogger menu
  7. Now click on Show Options, and tweak some more settings.
    settings html compresser
  8. Make all the appropriate settings you can see in the above screenshot.
  9. Now when you have tweaked all the settings, press the Compress button and wait for few seconds, depending on your HTML size.
    compressed
  10. So now you will land up on a page with your compressed HTML, you can see the compression and size difference above displays mine.
  11. Simply copy the whole code and navigate to your Blogger > Template > Edit HTML.
  12. Press Ctrl + A once again and paste the new compressed code.
  13. Now save the template and enjoy your faster blog.

Not able to understand the compressed code

Well if you face problem of not understanding the code and you are not able to edit it, then the easiest way is to Format the Template using the inbuilt blogger feature. Then will clean the whole code and you can easily edit the template after that you can repeat the process of compressing the template and enjoy faster blog.

format blogger template

To format the template navigate to Blogger > Template > Edit HTML. Now right above you will see the Format template option click that wait few seconds and see your clean HTML coding that you edit easily.