সঠিক উপায়ে Mobile Template থেকে অপ্রয়োজনীয় HTML Hide করুন

Responsive Blogger Template ডিজাইন সম্পর্কিত সিরিজ টিউটরিয়াল শেয়ার করার জন্য কিছু দিন আগে আমরা ঘোষনা করেছিলাম। সেই ঘোষনা অনুযায়ী আজ তার ২য় পোষ্ট শেয়ার করতে যাচ্ছি। উল্লেখ্য যে, আমরা ইতিপুর্বে প্রফেশনাল ব্লগার টেমপ্লেট তৈরি ০৮ টি ধারাবাহিক টিউটরিয়াল শেয়ার করেছি। পোষ্টগুলি অবশ্যই এক পলক দেখে নেবেন।

গত ২০১৫ সালের এপ্রিল মাসে Google's Mobile Friendly Update Algorithm এর নতুন নিয়ম আপডেট করে। যার ফলে অনেক ভালমানের ব্লগের মোবাইলের মাধ্যমে ভিজিটর পাওয়ার পরিমান কমে গেছে। কারণ অনেক ওয়েব ডেভেলপাররা বুঝতে পারেনি যে, ব্লগার টেমপ্লেটের ডিজাইন শুধুমাত্র মোবাইল উপযোগী হলে হবে না, পাশাপাশি মোবাইল Browsers গুলির স্পীড এর উপযোগীও হতে হবে। মোবাইল টেমপ্লেটের স্পীড নরমালি যে কোন কম্পিউটার Browsers টেমপ্লেটের চাইতে অনেক কম হয়ে থাকে। তাছাড়াও মোবাইলের মাধ্যমে বেশীরভাগ লোক 2G ও 3G নেটওয়ার্কের মাধ্যমে Internet ব্যবহার করে থাকেন। যার গতি যে কোন Broad Band ইন্টারনেটের চাইতে অনেকগুন কম হয়ে থাকে। কাজেই আপনার ব্লগের মোবাইল টেমপ্লেটকে ঐ সব আনুষাঙ্গিক বিষয় মাথায় রেখে সাজাতে হবে। শুধুমাত্র মোবাইল উপযোগী স্টাইল করলেই হবে না। কারণ যখন কোন ভিজিটর ব্লগ ভিজিট করার সময় বেশী সময় নেবে সে ঐ ব্লগ ভিজিট না করে তার বিষয়টি অন্যত্র খোঁজার চেষ্টা করবে।

আমি অনেক ভালমানের ব্লগার টেমপ্লেট রিসার্চ করেছি এবং দেখেছি যে, বেশীরভাগ ডেভেলপাররা তাদের ব্লগের মোবাইল টেমপ্লেট হতে কোন HTML অংশ Hide করার জন্য শুধুমাত্র "Display:none" Property ব্যবহার করেছেন। এভাবে যদিও কোন HTML Element Hide করা সম্ভব, তবুও এটি মোবাইল টেমপ্লেটের ক্ষেত্রে ১০০% নিরাপদ নয়। 

Responsive Templates এ কেন "Display:none" ব্যবহার করা উচিত নয়?

• "Display:none" Property শুধুমাত্র Images, Iframes এবং Div Section -কে Hide করার ক্ষেত্রে অবশ্যই ব্যবহার করবেন। তবে আপনি যদি এ ভাবে সকল ধরনের HTML অংশ মোবাইল টেমপ্লেট থেকে Hide করেন তাহলে যদিও এটি মোবাইল টেমপ্লেটের Out Put থেকে Hide হবে তবে Input এ ঠিকই কাজ করবে। ফলে দেখা যাবে ঐ সমস্ত HTML অংশ Rendered করার পাশাপাশি প্রত্যেকটি লিংক Search Robot Crawl করতে থাকবে। এতেকরে আপনার টেমপ্লেট সার্চ ইঞ্জিন অপটিমাইজেশনে বড় সমস্যার সম্মুখিন হবে।
• অধীকন্তু আপনি যদি মোবাইল টেমপ্লেট থেকে "Display:none" Property ব্যবহার করে কোন আর্টিকেল Hide করেন তাহলে সেটিও সার্চ Robot -দের Visible করে রাখবে। যারফলে সার্চ রোবট আপনার ব্লগের বিভিন্ন কনটেন্ট এর ব্যাপারে Confused এ পড়ে যাবে। এটিও সার্চ ইঞ্জিন অপটিমাইজেশনে অনেক ব্যাঘাত ঘটাবে। 
• সবচেয়ে বড় সমস্যা হচ্ছে এটি ব্যবহার করে কোন অংশ Hide করার ফলে যদি আপাতত ঐ সমস্ত কনটেন্ট বাহ্যিক ‍দৃষ্টিতে দেখা যাবে না তবে সেগুলি Input এ ঠিকই কাজ করতে থাকবে। যার ফলে আপনার টেমপ্লেটের Speed কমতে থাকবে।

সঠিক উপায়ে Mobile Template থেকে অপ্রয়োজনীয় HTML Hide করাঃ

Blogger Templates XHTML ফরমেটে তৈরি করা হয়েছে, যার জন্য এটি অনেক ধরনের Conditional Tag Support করে। মোবাইল টেমপ্লেটের জন্য isMobileRequest অত্যন্ত গুরুত্বপূর্ণ একটি Conditional Tag যেটি যে কোন HTML DOM এর ক্ষেত্রে ব্যবহার করতে পারবেন। এই isMobileRequest এর True ও False দুটি Condition রয়েছে। নিচে আমাদের ব্লগের User Experience দেখুন, যেখানে গুগল আমাদের ব্লগের জন্য 100/100 Score প্রদান করছে। আপনার ব্লগের User Experience গুগল ডেভেলপার পেজ এর লিংক থেকে চেক করে নিতে পারেন।

কিভাবে Conditional Tag ব্যবহার করবেন?

• আপনার ব্লগে লগইন করুন।
• ব্লগের কোন অংশ শুধুমাত্র মোবাইল টেমপ্লেটে দেখানোর জন্য নিচের Conditional Tag টি ব্যবহার করুন।

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

HTML To Show Only in Mobile Devices

</b:if>

• অথবা আপনার ব্লগের কোন অংশ যদি শুধুমাত্র কম্পিউটার টেমপ্লেটে দেখাতে চান তাহলে নিচের Conditional Tag টি ব্যবহার করতে হবে।

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

HTML To Show Only in Desktop Devices

</b:if>

• উপরের এই Conditional Tag দুটি HTML Element-কে শুধুমাত্র প্রয়োজনীয় জায়গাতে Active করে রাখবে এবং অপ্রয়োজনীয় ক্ষেত্রে Disable করে রাখবে।

সাহায্য জিজ্ঞাসাঃ আশা করছি উপরের কোন বিষয় আপনাদের বুঝতে অসুবিধা হবে না। তারপরও যদি কোন অংশ সম্পর্কে দ্বিধা থাকে তাহলে আমাদের জানাতে পারেন। আমাদের পরবর্তী পোষ্টে শেয়ার করব কিভাবে isMobileRequest ব্যবহার করে ব্লগের JavaScript ও Widget Disable করে মোবাইল টেমপ্লেটের Speed বৃদ্ধি করবেন।

JavaScript ও Widgets এর Rendering Disable:

মোবাইল Template থেকে কিভাবে অপ্রয়োজনীয় HTML ট্যাগ Remove করতে হয় তা নিয়ে আমরা গত পোষ্টে বিস্তারিত আলোচনা করেছি। এখন আমরা শিখব কিভাবে অপ্রয়োজনীয় JavaScript ও Widgets এর Rendering Disable করতে হয়। মোবাইল টেমপ্লেটের Load Time Fast করার জন্য অপ্রয়োজনীয় JavaScript ও Widgets এর Rendering Disable করা প্রয়োজন।

ব্লগার টেমপ্লেটের সাইডবারসহ বিভিন্ন জায়গাতে অনেক ধরনের Widget ব্যবহার করা হয়ে থাকে, যেগুলি মোবাইল টেমপ্লেটে ব্যবহার করার প্রয়োজন পড়ে না। যদি সকল ধরনের Widget মোবাইল টেমপ্লেটে ব্যবহার করেন তাহলে আপনার ব্লগটি মোবাইল ভার্সনে অত্যন্ত স্লো গতির হবে। ইতিপূর্বে আমরা জেনেছি যে, কম্পিউটার ভার্সনের চাইতে মোবাইল ভার্সন খুবই স্লো গতির হয়ে থাকে। কাজেই সব ধরনের অপশন মোবাইল ভার্সনে ব্যবহার না করে শুধুমাত্র প্রয়োজনীয়গুলি মোবাইলে ব্যবহার করা উচিত। আমাদের ব্লগ মোবাইল থেকে ভিজিট করলে দেখতে পাবেন অনেক উইজেট Disable করে রাখা হয়েছে, শুধুমাত্র Hide করা হয়নি। সুতরাং অপ্রয়োজনীয় JavaScript ও Widgets এর Rendering Disable করার জন্য প্রয়োজন সঠিকভাবে Conditional Tag ব্যবহার করা।

কিভাবে Responsive Templates থেকে Widgets Disable করবেন?

• প্রথমে ব্লগে লগইন করুন।
• তারপর Template > Edit Html এ ক্লিক করুন।
• এখন আপনি যে Widget টি Disable করতে চান সেটি খোঁজে বের করতে হবে। কিভাবে খোঁজতে হয় তা এই লিংক থেকে দেখে নিতে পারেন।
• যে কোন উইজেট এর কোডগুলি সাধারনত নিচেরমত হবে।

<b:widget id='HTML3' locked='false' title='Most Commented' 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>

• সঠিকভাবে বন্ধ করার করার জন্য নিচের Conditional Tag টি ব্যবহার করতে হবে।

<b:widget id='HTML3' locked='false' title='Most Commented' 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>

• এখানে আমরা isMobileRequest Boolean Value টি False করে দিয়েছি। যার কারনে উইজেটটি শুধুমাত্র ডেস্কটপ ব্রাউজারে দেখাবে এবং মোবাইর টেমপ্লেট হতে Disable করে রাখবে।
• আপনি যদি কোন উইজেট শুধুমাত্র মোবাইল টেমপ্লেটে দেখাতে চান তাহলে isMobileRequest Boolean Value টি True লিখে দিতে পারেন।
• সব কিছু করার পর অবশ্যই Template Save করে নিবেন।

কিভাবে Responsive Templates থেকে JavaScript Disable করবেন?

ব্লগের বেশীরভাগ Widget গুলিতে আমরা বিভিন্ন ধরনের Scripts ব্যবহার করে থাকি। যদিও উপরের পদ্ধতিতে শুধুমাত্র Widget Disable হবে কিন্তু Widget এর জন্য যে Scripts আপনার টেমপ্লেটের ব্যবহার করছেন সেগুলি ঠিকই কাজ করতে থাকবে। শুধুমাত্র Widget Disable করলেই হবে না, Widget এর সাথে যে সকল Scripts রয়েছে সেগুলিও Disable করতে হবে। তবেই Scripts গুলি আপনার ব্লগকে অযথা Render করতে পারবে না।

ব্লগার টেমপ্লেটের JavaScript গুলি সাধারনত টেমপ্লেটের <head>......</head> এর ভীতরে ব্যবহার করা হয়ে থাকে। সুতরাং আপনি নিজেই জানেন আপনার কাঙ্খিত Widget গুলির Scripts কোথায় আছে। সেগুলি খোঁজে তারপর নিচের পদ্ধতি অনুসরণ করুন।

• JavaScript Disable করার জন্য নিচের Conditional Tag টি আপনার ব্লগের Scripts আগে ও পরে ব্যবহার করতে হবে।

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

JavaScript to Hide

</b:if>

• JavaScript to Hide অংশটিতে অপ্রয়োজনীয় Scripts ব্যবহার করবেন। তাহলে এটি মোবাইল ভার্সন হতে Disable হয়ে থাকবে। 
• অপরদিকে যদি শুধুমাত্র মোবাইলে দেখাতে চান তাহলে False এর স্থলে True লিখে দিন।

সাহায্য জিজ্ঞাসাঃ এই পদ্ধতিতে সবগুলি অপ্রয়োজনীয় HTML, Widgets ও JavaScript Disable করে রাখলে আপনার ব্লগটির Load Time অনেকাংশে বৃদ্ধি পাবে। আশা করছি উপরের সহজ টিপসটি আপনাদের বুঝতে কোন অসুবিধা হবে না। এরপরও যদি বুঝতে কোন অসুবিধা হয় তাহলে আমাদের জানাতে পারেন।

পোস্ট রেটিং করুন

আরও নতুন পোস্ট পুরানো পোস্ট