How to Minify CSS and JavaScript in Blogger to Speed Up Your Blog

Minify CSS and JavaScript in your BlogSpot Blog to Speed Up Your Blog.It increases page load speed of your blogger blog.This guide will help you to learn almost everything about minifying CSS and javascript in your blogger blog.You can increase the page load speed by minifying CSS and javascript in your blogger template.
In WordPress blogging platform they provide so many free plugins to use.For minifying CSS and javascript, they have W3 Total Cache and Better Wordpress Minify these two plugins are very good if you are a WordPress lover then you can use any one of these two plugins.I have tested Better Wordpress Minify result is good.Blogger a is free blogging platform and it is easy to use for a new blogger.On the other side WordPress is the powerful blogging platform but configuring a blog on WordPress platform is hard for a new blogger and it gives you free blog with WordPress ads as their credit.You need to buy a hosting plan for WordPress but blogger provides us free.Now I also using blogger platform.In blogger, you can minify CSS and javascript Manually.
This guide will help you to complete minification of CSS and JavaScript in Blogger template so let's begin......................





What is Minifying CSS and JavaScript?


As the name suggests, Minifying is the process to reduce the size of a web page by reducing CSS, JavaScript and HTML content from a website.It reduces the number of requests.It combines two or more CSS and JavaScript file to one file.

Actually, this removes following parts from a CSS or JavaScript code.

White spaces, new line characters, comments and any other unwanted codes.

This CSS example will help to understand clearly about minification
Before Minify

.site-innernbt,
.wrapnbt {
margin: 0 auto;
max-width: 1140px;
}

.site-innernbt {
clear: both;
padding-top: 40px;
padding-top: 4rem;
    padding-bottom: 40px;
    padding-bottom: 4rem;
}

After Minify
.site-innernbt,.wrapnbt{margin:0 auto;max-width:1140px}.site-innernbt{clear:both;padding-top:40px;padding-top:4rem;padding-bottom:40px;padding-bottom:4rem}



Importance of Minification:

The only one reason for minifying is to speed up your web page load speed by reducing the CSS and JS file size of your web page.Google also recommend us to minify CSS and JS for higher search engine ranking and this also helps to give a good experience to the user.Minification is the big part of SEO.

So let's enter into the process of minification........
There are so many online tools available to minify CSS and Javascript.

Best Online Tools to Minify CSS-
http://csscompressor.net
www.cssminifier.com
Best Online Tools to Minify JavaScript-
www.jscompress.com
www.javascript-minifier.com

Now I will introduce you to an online tool by this you can minify CSS and JavaScript Both.

www.minifier.org

How To Minify CSS and JavaScript from Blogger Template:

First login to your blogger dashboard then click on Template>>Edit HTML


If you want to  Minify CSS then go to header section and Find <b:skin> by pressing Ctrl+F.

Now scroll down you will find CSS codes copy those codes.As shown in  example below



If you want to Minify JavaScript then Find <script> by pressing Ctrl+F.Copy JS codes available between Open and close script tags   <script>JS codes</script>  


Now open www.minifier.org then paste CSS/JavaScript Code in the box.

Now click on MINIFY
You will get minified version of CSS/JS codes.Copy minified code and paste it from where you copied from blogger template.


Then Click On Save template.


Now check your page speed on google page speed insight.You will get a better result.

I hope this tutorial will help you to speed up your blogger blog......
Let me know which method you use to speed up your blogger blog put your comment in comment box......and please share this post using the share button below...........

1 comment: