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 provides 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 plugin.I have tested Better Wordpress Minify result is good.Blogger 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 hosting plan for WordPress but blogger provides us free.Now i also using blogger platform.In blogger you can minify CSS and JavaScritpt Manually.
This guide will help you to complete minification of CSS and JavaScript in Blogger template so lets begin......................





What is Minifying CSS and JavaScript?


As the name suggest,Minifying is the process to reduce size of a webpage by reducing CSS,JavaScript and HTML content from a website.It reduces the number of request.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 webpage load speed by reducing the CSS and JS file size of your webpage.Google also recommend us to minify CSS and JS for higher search engine ranking and this also help to give a good experience to 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.com
www.cssminifier.com
Best Online Tools to Minify JavaScript-
www.jscompress.com
www.javascript-minifier.com

Now I will introduce you with an online to 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 verson 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 pagespeed insight.You will get a better result.

I hope this tutorilal helped 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 share button below...........

0 comments:

Post a Comment