Hi, while auditing your blogger in Google page speed tool, have you ever noticed opportunities to make your blogger’s loading speed fast. These are, “minify CSS” and “minify JavaScript. Google page speed tool shows the lists of all unminified CSS files and JavaScript along with the potential saving in kilobytes (KB) when these files will minified. In this article you will come to know what are unminified CSS and JavaScript and how to Minify these files in Blogger.
WHAT ARE UNMINIFIED CSS AND JAVASCRIPT
When CSS JavaScript files contain unnecessary characters, such as comments, whitespace, and indention, then these files are unminified. However these unminified files can be less complicated, easy to read and edit.
UNDERSTANDING MINIFICATION PROCESS
Comments, whitespaces, and indention can be safely removed to reduce file size without affecting the core functionality of CSS and JavaScript and how browser processes the styles. This process is minification.
According to Google, Minification can improve the byte efficiency and the loading speed by removing all unwanted characters.
MINIFICATION OF AN UNMINIFIED CSS
Take a look at the following CSS block.
font-family: “Benton Sans”, “Helvetica Neue”, helvetica, arial, sans-serif;
margin: 2em;
}
/* all titles need to have the same font, color and background */
h1 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
h2 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
This content can be easy to read but it’s a large file than necessary.
- It uses spaces for indentation purposes and contains comments, which are ignored by the browser, so they can be removed.
- The
<h1>and<h2>elements have the same styles: instead of declaring them separately: “h1 {...} h2 {...}” they could be expressed as “h1, h2{...}“. - The background-color,
#000000could be expressed as just#000.
After making some of these changes you could get a more compact version of the same style.
Know more about minification process by clicking here
HOW TO RECOGNIZE YOUR UNMINIFIED CSS AND JAVASCRIPT IN BLOGGER
Recognizing unminified CSS and JavaScript in Blogger can be a bit difficult. To recognize these unminified files in Blogger, follow these steps.
1. Analyze your blogger in Google page speed tool.
2. Now go to “minify CSS” and “minify JavaScript” opportunity section.
3. Copy the codes flagged by speed tool.
4. Now open your blogger’s theme.xml file in any html editor.
5. Try to find your unminified CSS and JavaScript by searching the codes which you have copied from speed tool.
HOW to MINIFY CSS and JAVASCRIPT in BLOGGER in 2021.
You can Minify CSS and JavaScript files in Blogger either manually or automatically.
MANUAL MINIFICATION
If you want to minify your unminified files manually then you have to follow all the rules which I have described. However for doing this you should have some basic knowledge of html as a small mistake can destroy your blogger’s style. Please backup your theme.xml file before editing it.
AUTOMATIC CSS MINIFICATION (RECOMMENDED)
If you don’t have any knowledge of html then no problem. Here so many online tools are present on the web to Minify your CSS and JavaScript. These tool can minify your unminified files in very smart way without affecting the core functionality and style of your template. However the backup of your blogger’s theme.xml file is still advisable.
List of some best online CSS minifier.
1. cssminifier.com– This minifier by Andrew Chilton is simple to use. Simply past your unminified CSS and click on minify button to output the minified code. You can also download the output code as file.
2. csscompressor.net– This online CSS minifier is quick, easy and free to use.
3. refresh-sf.com– This compressor will minify CSS. It also includes all the compressor options for each code type if you need them.
4. htmlcompressor.com– This compressor can minify your CSS in a very smart way. You also check your codes for errors also.
5. minifycode.com– This minifier can minify your codes in single click. It contain a beautifier button to unminify the minified codes to make them easy to read. (Opposite to minification).
6. Dan’s tool also offers CSS minifier.
Some best JavaScript minifier
1. JSCompressor.
HOW TO MINIFY CSS USING AN ONLINE TOOL
Most of these online tool have the same process to Minify CSS. I’m using cssminifier for showing the steps.
First open your blogger’s theme.xml file in any html editor and locate your unminified CSS file. Copy the entire code to your clipboard.
Now go to cssminifier, past in your entire code in tool and click the minify button.
Now copy minified CSS code to your clipboard and again go your blogger’s theme.xml file.
Replace your unminified CSS by minified CSS code.
That’s it.
If you have any problem ask me by comment.
So that’s all, now it is your turn to tell what you think about the minification process and its advantages in blogger.
if you you know any other method to overcome this problem, any feedback about our website, or you have any problem regarding this. Tweet your opinion on Twitter and tag us. We will embed your tweet here below the article. Our twitter handle is @realtechandbio.
you may also like.
Ensure Text Remain Visible During Webfont Load In Blogger.
How To Eliminate Render-Blocking Resources In Blogger.
Hi
Thanks for a detailed and descriptive post , want to know
Can I copy paste my entrie blogger HTML code and use the minify tool?
If Yes will be error free while pasting the code back and saving the theme?
I am not from coding background so help in this regard will be much appreciated!
Hi saurabh, I have checked your website in Google page speed tool. Congratulation, your website doesn’t have any unminified JavaScript or CSS. You don’t have to worry about this. If you’ll minify your all html codes, they can be a little complex for you to edit. However while checking your website I seen so many render-blocking resources and unused JavaScript. I recommend you to remove render-blocking resources and unused JavaScript. Use images in WebP format. You can do this all by reading my other articles.
Thanks.
Very nice content. I have solved all my problems regarding this issue. Thanks author. Please upload more content about SEO and adsence monetization.
Thanks Danish Roheena,
We are continuously doing our effort to solved all your problems regarding blogger. Please stay connected with us for more informative content in future.
Thanks.
Welcome
Hey there,
Nice work, but i have to ask something and i hope i’ll get a response. Could you please tell me how to replace the minified css with unminified in blogger? I minified the region by taking a url address from speed insight which was mentioned in “eliminate render blocking resources”. I don’t know and got confused how to find a region and replace that minified css. Thanks
Hi Atif,
I have checked your website in page speed tool, it has too many problem which are lagging your website.
You can email me for personal help or tweet your problem on Twitter and tag us
My personal email address is
[email protected]
Our Twitter handle is @realtechandbio
Remarkable things here. I am very happy to look your article.
Thanks so much and I am looking forward to contact you. Will you please
drop me a e-mail?