Home
Blogging

How to Disable Loading JavaScript and HTML in Mobile Device?

How to Disable Loading JavaScript and HTML in Mobile Device?
Mobile trick for Blogger

We know that latest trend to use Responsive Template thus it can be fit for any smart devices. Before revealing the responsive design there was critical problem to display the website on Smartphone. A Smartphone or tablet’s screen size is smaller and our website’s height and width is bigger in size. So when we open any website then a small part of the webpage display. And to visit rest of the part of webpage you have to scroll manually. And if you have bigger image on your Blog post then readers can’t view the images properly.  As a result, we were searching the solution and explored the Responsive web design.

A responsive web design can be fit on any kinds of devices as well as widgets and plugins adjust by stretching and resizing automatically. But we can’t say that we have get ride from all kinds of problem. We have solved one issue and arises another issue.

Recently the main problem is when you use responsive web design then same template loading on Desktop, Laptop, Mobile and Tablet. But all devices are not same in terms of Internet speed a template loading speed. Suppose when a template load on Desktop and Laptop then some JavaScript and widgets load with that. And similarly if you visit the same site from your Mobile phone then same JavaScript and widgets will load with it. Generally we use GSM or 3G service on our Smartphone which is slower than Broadband. So we must make our website lighter for mobile devices. But multiple JavaScript and widgets is the main barrier for increasing loading time on Mobile devices.

In this case we have found the solution that is hiding and disabling the JavaScript on mobile device only. Obviously we have to use a conditional tag to do this. The tag is isMobileRequest which will help to hide JavaScript and widgets in mobile devices.

How to Find and Hide widgets?

For speeding up the Browser on mobile device we can hide widgets by using conditional tag. But before that we must find put the Widget ID. You can find the widget ID by following below tutorial link.

Recommended: 

First choose which widget you will disable. If you wish to disable recent post widget or News ticket widget on mobile device then you have to find out the widget ID first. I am assuming that you have found the widget ID.

For Example here we have found the widget ID which is HTML5. And now we will proceed to the next step. Where we will hide the widget on Mobile device whose ID is HTML5.

Disabling Widget by using Conditional Tag

After confirmation about widget ID we will have to add conditional tag from mobile device. The following tutorial might be helpful for disabling widget by using conditional tag only on mobile device.

Step 1 Log in to Your Blogger account and go to Blogger Dashboard

Step 2 From Blogger Dashboard click ->Template ->Edit HTML

Step 3 Now jump to the widget by using Jump to widget drop down option.  In my case widget ID is HTML5. You will see the widget code like below. If the widget code in compact position then expend it by clicking on left arrow. 

 
<b:widget id='HTML5' locked='false' title='MyMusic' type='HTML'>
<b:includable id='main'>
                    <!-- only display title if it's non-empty -->
                    <b:if cond='data:title != &quot;&quot;'>
                      <h2 class='title'> <data:title/>
                      </h2>
                    </b:if>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                    <b:include name='quickedit'/>
                   </b:includable>
                </b:widget>


Step 4 Now we will apply the conditional tag isMobileRequest inside the <b:includable> tag as shown below

 
<b:widget id='HTML5' locked='false' title='MyMusic ' type='HTML'>
                  <b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
                    <!-- only display title if it's non-empty -->
                    <b:if cond='data:title != &quot;&quot;'>
                      <h2 class='title'><data:title/>
                      </h2>
                    </b:if>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                    <b:include name='quickedit'/>
                    </b:if>
                  </b:includable>
                </b:widget>


I have added the conditional tag for mobile isMobileRequest and set its value to false. Which means it won’t show on mobile device. Here my widget name is MyMusic and it won’t load in any mobile devices.

Step 5 Finally click on orange color Save template button.  And you are done.

How to Disable Widget Scripts From begin Loading in Background?

It is true that by hiding the widget you can’t control the template loading speed completely. Because it will just hide the widget but eventually the JavaScript will load in background. As a result your site loading speed will affect.

Most of the JavaScript you will find used before closing head. You will find the JavaScript between <head> and </head> tag. Whenever a template load on browser then JavaScript and Widget load with it. Even if we use conditional tag then it will load in background but visitors won’t see on mobile device. So the solution is to disabling the widget’s JavaScript from responsive template.

Step 1 Log in to Your Blogger account and go to Blogger Dashboard

Step 2 From Blogger Dashboard click ->Template ->Edit HTML

Step 3 Now scroll down and find the JavaScript from your template. And wrap it up by using below conditional tag.

<b:if cond='data:blog.isMobileRequest == "false"'>
Your JavaScript Code
</b:if>

For example in template you have to wrap it up like below.

<b:if cond='data:blog.isMobileRequest == "false"'>
<script type='text/javascript'>.....</script>
</b:if>

Step 4 Finally click on orange color Save template button.  And you are done.

Now your JavaScript won’t load on mobile device.  So this is the way we can rapidly speed up our Blogger Responsive template. Because we are receiving a significant number of traffic from mobile device, so we must work for mobile based traffic. However more traffic means more popularity. And Google always love fast loading template. And by making your template faster for mobile device you will get higher rank on mobile search result.

We can conclude that though our main traffics are coming from Google search engine, for this reason we have to make our site compatible for Google search engine. And due to rapid increasing number of mobile user we have to think again. Because we can easily increase receiving traffic from Mobile search result by making our site lighter in loading speed. If you need any further help then feel free to leave a comment below.  

2 comments

  1. Thanks for this Article. ভাই Related posts উইজেট এ যে Related posts গুলো দেখায় এগুলোর Title গুলো কি ফুল show করানো যায় না? করা গেলে কিভাবে ? টেমপ্লেট - Blogger Lab
    • hmm kora jay.. but design all encoded version a ace.. only paid version a Decode kora. Karon free version a carle je keu name r code change kore nijer name publish kore tai..all template Encoded version a ace.
Go Up