Speed Up Blog Using Conditional Tags In Blogger

Reducing the loading time of a blog is known as one of the most important factor in blogging because it matters a lot. If you blog is too ...

Reducing the loading time of a blog is known as one of the most important factor in blogging because it matters a lot. If you blog is too lazy to load completely then you can loose your blog readers, traffic, earning and also getting disapproval from big advertising companies like Google AdSense and BuySellAds. There are many ways to speed up your blog like compressing the CSS and JavaScript, externally hosting CSS, removing unnecessary elements from your blog and many more but today, in this post, I'm going to give special tip for bloggers users only by which we can easily speed up blog or improve loading time of blog.

How It Works : Speed Up Blog Using Conditional Tags

Before we get started to the tutorial, I would like to clear that how this will work. You might know, or not know that what are conditional tags? Let me explain it for those who don't know about that. These are special Blogger XML tags which are used in blogger templates. Basically, You might have heard about If Else statements in JavaScript so these conditional tags are mostly similar to them. Conditional tags will help us to load any kind of coding in specific pages or posts. Mostly, blogger template developers put the whole css of template in <b:skin> tag which is fine but you know, that CSS loads in every webpage of our blog. There can be some elements like author bio box, related posts widget, social sharing button and many more which load in posts and pages only then why we should allow these element's CSS to load in every page? We'll just setup conditional tags which will load the coding when it's necessary. Got it?

Who Can Properly Speed Up Blog With Conditional Tags?

In order to speed up blog using conditional tags in blogger, a person needs to have basic knowledge of web designing including CSS and JavaScript. Here, we're going to play with coding of blog's template so if you've not ever touched the coding of blogger template then you might not be able to do this. It is also important that a person should know the each coding of his blog template.

Caution 

Before doing any step, make sure you've complete backup of your blog and template otherwise a single mistake can ruin the design of your blog. So, take a backup first and let's start improving speed of blog. Secondly, you should be careful in reading this article and doing customization in your template.

Tutorial

1. Load Elements in Homepage, Label, Archive, Pagination Pages

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>


</b:if>
</b:if>

First of all, we're going to load the elements in homepage, labels pages, archive pages, next previous pagination pages. The above conditional tags will help us to load elements in above mentioned pages. Copy the above code and paste it above </head>.  Now here you've to decide yourself that elements you would like to load in these pages. Let me give you tip, check these pages in your blog and note those elements which only appear in these pages. They can be Auto Read More Script, Read More button, Custom CSS of Posts which appear on these pages, pagination of blog and more. So, you've to note those things and copy their CSS and JavaScript only and put that those coding between the above given coding.

2. Load Elements in Homepage Only

<b:if cond='data:blog.url == data:blog.homepageUrl'>


</b:if>

Secondly, we're going to load elements in homepage only. As we did in previous step, you can analyze the homepage of your blog and note those elements which only appear in homepage. Copy the above code and paste it above </head>. The elements which appear in homepage only can be Featured Posts Widget, Posts By Specific Labels, Homepage Sign Up Box, Homepage Ad Section and many more. Just note those elements, copy their CSS and JavaScript and put it between the above given conditional tags.

3. Load Elements in Posts Only

<b:if cond='data:blog.pageType == &quot;item&quot;'>


</b:if>

So, we're in the third step and in this step we're going to load elements in posts only. Again, copy the above code and put it above </head>. After that, check the post page of your blog and note those elements which only load in posts only. In my point of view, they can be social sharing widget, related posts widget, author bio widget and many more so copy their CSS and JavaScript and paste them between the above give code.

4. Load Elements in Post and Pages

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

</b:if>
</b:if>

This is the fourth and last step in which we're going to set elements which will load in post and pages only. So, paste the above given code above </head>. Start analyzing the post and page areas and note those things which load in these pages only. They can be post meta css in which posted by, date, filled under and comments can come. You can also think about sidebar widgets, blockquote, bullet and numbered list. Finally, put the CSS and JavaScript coding of those elements between the above given coding and save it.

Final Words

So friends, that's how we can speed up blog using conditional tags in blogger and that works like charm. While setting elements to load in specific areas, you should be sure that they should load in the given areas and pages only otherwise in some areas your blog design can be messed up. That's why I told to be careful, that's just easy and awesome if you do the things correctly. I hope this article is going to helpful in improving load time of blog and also share this article with your friends. Take a lot of care!