Skip to toolbar
How To Compress CSS in blogger

How To Compress CSS in blogger

From the best steps to reduce the loading time of a blog is compressing the HTML code of the template .
and you can compress the java-script codes and the CSS . But on this article we will care about the second one .

Caution : Because we will do some changes on the template , first save a copy to stay safe .
HOW ? go to blogger >> template >> Backup button will be on the top of the right

Why You should Minify Blogger CSS Style coding

Minifying is the process to compress the original CSS file. In order to increase the page load time, you need to work using different tactics. And the one best tactic to increase load time is by minifying the css style code. You can really boost the page speed by minifing your blogger css style.

What is difference between Regular CSS and Minified css?

The regular one is meant for examination and (if necessary) editing. The minified version makes the file as small as possible by removing all the white space it can. This makes it load faster for users, and ultimately increase the site speed.

Pros vs Cons of Minified CSS

There are both pros and cons of Minified css. So, let’s first discuss the cons of it:

  • Difficult to Read: The minified css is difficult to read, so that it means that if you are a developer and need to edit the css then you face difficulty in editing.

How to automatically redirect Blogger blog to another blog or website(Opens in a new browser tab)

hmm.. it has only one con. ( may be some more but I find only one which is also not too big. because you can use the search feature of blogger template editor by pressing CTRL+F to find any element style.)

you can read:-  How To Submit Blogger Sitemap To Google Webmaster Tools?

So, after the cons now let’s discuss the pros of minified css

  1. Increase the site load time: When you minify your css then all the unnecessary white spaces removed and the size of the code decreased, which load faster and your site speed increases.
  2. Help you in getting higher position in Google: As you know that site speed is now one of the important ranking factor of google. So, my minifying the css the site load time increases and ultimately you get higher SERP

How to Put Google Adsense Below Post Title in Blogger?(Opens in a new browser tab)

Steps on How to Minify Blogger CSS Style to Increase speed

To minify your blogger css then just follow the below simple steps:
before start first don’t forget to backup your blogger template.

LEARN HOW TO COMPRESS CSS :

  1. Go To Blogger Dashboard
  2. Go to Template tab
  3. Click on Edit HTML
  4. Hit CTRL+F and search for <b:skin> and </b:skin> , the whole code between those two tags is the code that you need to compress .

5. Copy the whole code like we said on the second steps and past it on a notepad .
6. Go to CSS COMPRESSOR .
7. Past the code there on the box named CSS Input .
8. Hit comp… button .
9. in a few seconds you will get your compressed code .
10. Select & copy it
11. Go to your HTML and replace it with the code between <b:skin> and </b:skin> .
12 . SAVE .

Does This change my Site Style?

No and never, if you do all the above mentioned steps right then your site style does not change. The CSS code just minified by removing the unnecessary white spaces and nothing else. So, you don’t need to worry.
And Feel Free to Minify your css.

you can read:-  Your SEO Checklist: 4 Steps to Optimizing Your Website.

Final Words

Hope that this guide help you to minify your blogger css. If your template is fully designed and don’t need any further big customization then I recommend you that you must minify your blogger css. becuase this will increase your site speed. But if you are still designing your template then don’t minify the css.

Don’t forget to share this post with others, and stay blessed, keep smiling and happy Blogging. 🙂

1 thought on “How To Compress CSS in blogger”

  1. Pingback: How to automatically redirect Blogger blog to another blog or website

Leave a Comment

Scroll to Top