Disable rendering of JavaScript and Widgets Using isMobileRequest [2]

Disable Javascript in Mobile Blogger TemplatesNow that you have learnt how to hide HTML content in Blogspot blogs using the conditional tag "isMobileRequest", Its time to learn how to prevent blogger Widgets from loading inside Mobile devices for Responsive Blogger Templates. It is really important that your mobile site may load as faster as possible due to slow internet speed of Mobile browsers. In order to achieve this purpose, we need to hide some widgets that makes no sense in small screen devices. These Sidebar widgets could include your Fancy Subscription boxes, search boxes, Labels, Archives, PopularPosts, Blog ROLL, Recent comments and so on. Most of these widgets use jQuery or JavaScript that really slows down the site. Therefor we will not just hide the Widget HTML content but would also disable its javaScript. You can continue showing them in Desktop/Laptop devices but it is really advisable that you hide such widgets for mobile devices in order to speed up your Page load time as much as possible in order to rank higher on Mobile Search results. We have experienced a tremendous positive impact of this technique on our Blogger blog (mbt) and it has really helped increasing our mobile traffic a lot. Lets get started!

UPDATE: isMobileRequest is applicable only to smartphone devices and it does not apply to tablets, iPads etc. Just a correction to this post.

Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

How to Find and Hide Widgets?

Before hiding widgets first learn how to find Widget ID. We published a post yesterday solely to help you out.

After you have explored how to locate widgets inside Template, you are ready to learn how to disable them in mobile devices so that they may not load in background and may not slow down your blog speed in smartphones and tablets, thus giving a speedy mobile experience to your readers.

Disable Widgets in Responsive Templates

In order to understand how it is done, we will assume that our widgetid is HTML3, which is the 'Back at Home' widget on our blog and we will discuss it throughout this tutorial.

Hiding this widget in Mobile devices

1 Go To Blogger > Template > Backup your template

2 Click Edit HTML

3 From the drop down menu locate your widget through the widget ID. In our case it is HTML3

locate widget by ID

4 You will be taken to the widget code. Expand/Collapse the code by clicking the black-pointed arrow towards its left. Click it once more when you see the second sub-arrow

expand the code

5 The code will now look something like this,

<b:widget id='HTML3' locked='false' title='Back at Home' 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>

We will apply the conditional isMobileRequest expression right inside the <b:includable> tag as shown below

<b:widget id='HTML3' locked='false' title='Back at Home' 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>

  • We have set the isMobileRequest Boolean value to false, so that the widget may load only in Desktop devices and it must be kept hidden in Mobile devices. If you visit our blog using a Mobile browser (not a desktop simulator), you will observe that the 'Back at home' widget is not loaded at all.
  • If you want the widget to display only in Mobile devices but not desktop then set the Boolean value to true
  • This Slideshow widget contains up to 12 images which could have really slowed down our blog in mobile devices but thanks to this conditional tag, things are much neater now.

6 Save your template and you are all done!

Disable Widget Scripts From Loading in Background

Almost every widget that you install on your blog has a JavaScript or jQuery attached to it to bring about the dynamic front-end fancy effects. Just by hiding the widget HTML content wont help you speed up your blog unless you also hide/disable the scripts that make them work. If you hide a widget but forget to disable the script, then the JavaScript will still be loaded and rendered in background thus slowing down your site.

JavaScript of your widgets in blogger is either located above </head> tag or below <head> tag.

You must know where you widget script is located because you installed it yourself! Normally officially blogger widgets scripts load only when the HTML loads so you don't need to worry about most of blogger official widgets like PopularPosts, archives, Poll, Comments, Label List etc.

The Slideshow widget HTML3 that we hide earlier has a script that needs to be disabled also. Lets do that now!

1 Inside your template locate the script by searching it near <head> opening and </head> closing tags.

2 Once you find it then enclose the entire script code using isMobileRequest conditional expression as shown below

Disabing Javascript

 

Use the following syntax:

<b:if cond='data:blog.isMobileRequest == "false"'>

JavaScript to Hide

</b:if>

  • The condition is set to false which means the script will not be loaded in Mobile devices but it will load in Desktop and Laptops.
  • If you want the opposite then set the condition to true

3 Save your template and you are all done! That simple!

Need Help?

Let me know if you could not understand any part of the tutorial by leaving your comments below. I hope this rarely used yet recommended technique may help you better optimize your blogger blogs for mobile.

Wish you peace and love buddies! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

13 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Very informative post. Thanks Brother....

    ReplyDelete
  2. My question is related to this, but slightly out of the locus. I tried finding a solution on your forum as well. I have a blogger blog with blogger's own default custom mobile display on. But, I need a mobile responsive related posts widget. The one which had been posted on your forum is not working. It would be nice if you could share something like you you guys are using.

    Being not tech savvy, your blog has a saviour. I would highly appreciate if you could note this request.

    ReplyDelete
    Replies
    1. Hi Nivedita,

      You can install responsive widgets and follow the above tutorial only if you are using Custom Responsive Template and not using the blogger default mobile display.

      If you have a custom responsive template then you can install the "Related Posts" widget we have shared in this blog else you may follow this tutorial series until you have setup a fully Responsive Custom Blogger template

      Delete
  3. Hi, Good Job, Mustafa Bahi
    if i "Disable rendering of JavaScript and Widgets" to my blog, is this helpful to good mobile display result. i am using blogger mobile friendly settings. plz tell me what i do to set my template like you. because your blog fully show on mobile device and this is good for SEO etc... i hop you publish full tutorial about this topic. because every one your blog reader waiting for this :)

    Best Wishes

    ReplyDelete
    Replies
    1. Once the above tutorial series is complete you will get answers to all your questions. It is the only thing needed to create a custom responsive blogger template :)

      I am trying my best to complete it the sooner possible

      Delete
  4. pls help i change my blog template to a premium template and now i can no longer hide widget on mobile view using

    ReplyDelete
  5. Thank you very much for such a nice tip...i was able to disable/hid some widgets from the sidebar which actually were slowing down the page. On Google Page Speed Insights, mobile score increased to 61(from 54) which is actually not too bad. You can find my blog here http://www.windowshive.com

    ReplyDelete
  6. Before my site very slow in android devices i do with your instructions it loads very fast thanks for sharing with us. Thank You Very Much i need this one for my site very helpful to me www.atozDj.in

    ReplyDelete
  7. How should I use @media tags? I mean, which codes should I place in it to adjust sizes of devices? These posts are helpful. But, I'm in fix on this issue.

    ReplyDelete
  8. "official blogger widget scripts load only when the HTML loads so you don't need to worry about widgets like PopularPosts, archives, Poll, Comments, Label List etc." -------- does this mean that to disable rendering of an official blogger widget I only need to disable its widget without worrying about disabling its script code?

    ReplyDelete
  9. Sir i don't find between head tag a script slide show wodget script on my template

    ReplyDelete
  10. hi i have put this code on my site but not working show widget on mobile true but it not shown on mobile as well desktop site.

    ReplyDelete