Mobile App Development Custom Elements এর ধারণা (amp-img, amp-video, amp-iframe) গাইড ও নোট

Custom Elements হল এমন HTML উপাদান (elements) যা একটি নতুন এবং বিশেষ উপাদান হিসেবে তৈরি করা হয় এবং এটি ওয়েবপেজে প্রি-ডিফাইন্ড ট্যাগগুলির বাইরে একটি নির্দিষ্ট ফিচার বা ফাংশনালিটি প্রদান করে। AMP (Accelerated Mobile Pages) প্রকল্পে কিছু বিশেষ Custom Elements তৈরি করা হয়েছে, যেগুলি পেজের লোডিং গতি উন্নত করতে এবং মোবাইল ব্যবহারকারীদের জন্য অভিজ্ঞতা আরও উন্নত করতে সাহায্য করে। এগুলি হল amp-img, amp-video, এবং amp-iframe, যা HTML এর সাধারণ উপাদানের পরিবর্তে ব্যবহৃত হয়।

AMP Custom Elements এর ধারণা

AMP Custom Elements হল এমন উপাদান যা AMP প্রজেক্টে ব্যবহৃত হয় এবং এগুলি সাধারণ HTML উপাদানের মতোই ব্যবহার করা হয়, তবে তাদের মধ্যে কিছু নির্দিষ্ট নিয়ম এবং বৈশিষ্ট্য থাকে যা পারফরম্যান্স এবং অপ্টিমাইজেশনকে উন্নত করতে সহায়তা করে।

এই Custom Elements গুলি সাধারণ HTML উপাদানগুলির তুলনায় কিছু ফিচার যেমন দ্রুত লোডিং, lazy loading, ইন্টারঅ্যাকটিভ ইউআই উপাদান এবং কিছু নির্দিষ্ট কাজের জন্য অপ্টিমাইজড।

1. amp-img

<amp-img> হল AMP-এর একটি Custom Element যা সাধারণ HTML <img> ট্যাগের পরিবর্তে ব্যবহার করা হয়। এটি ইমেজ লোডিংকে অপ্টিমাইজড করে এবং AMP পেজের দ্রুত লোডিং নিশ্চিত করে।

• ব্যবহার: এটি ইমেজ যুক্ত করার জন্য ব্যবহার করা হয়, তবে <amp-img> HTML <img> ট্যাগের তুলনায় কিছু ফিচার এবং সীমাবদ্ধতা রয়েছে।

• কী ফিচার:

  • অটো lazy loading: <amp-img> শুধুমাত্র তখনই লোড হবে যখন এটি ভিউপোর্টে চলে আসবে।
  • প্রাক-ডিফাইনড সাইজ: ইমেজের প্রস্থ এবং উচ্চতা নির্ধারণ করা আবশ্যক।
  • ওপটিমাইজড রেন্ডারিং: ইমেজের লোডিং সময় কমানোর জন্য AMP অতিরিক্ত কিছু অপ্টিমাইজেশন এবং টেকনিক ব্যবহার করে।

  উদাহরণ:

  <amp-img src="image.jpg" width="600" height="400" alt="Example Image"></amp-img>

2. amp-video

<amp-video> হল AMP-এর একটি Custom Element যা HTML <video> ট্যাগের পরিবর্তে ব্যবহৃত হয় ভিডিও উপাদান যোগ করতে। এটি ভিডিও ফাইলের জন্য অপ্টিমাইজড এবং মোবাইল ডিভাইসে ভিডিও দ্রুত লোড ও স্ট্রিম করার জন্য ডিজাইন করা হয়েছে।

• ব্যবহার: এটি ভিডিও যুক্ত করার জন্য ব্যবহার করা হয়, এবং ভিডিও পেজের পারফরম্যান্স উন্নত করতে সাহায্য করে।

• কী ফিচার:

  • Lazy Loading: ভিডিও লোড হবে না যতক্ষণ না এটি স্ক্রীনে দৃশ্যমান হয়।
  • Autoplay: ভিডিওটির অটোপ্লে এবং অন্যান্য নিয়ন্ত্রণ সহজে কনফিগার করা যায়।
  • Multiple Video Formats: বিভিন্ন ভিডিও ফর্ম্যাট সাপোর্ট করে যেমন .mp4, .webm, ইত্যাদি।

  উদাহরণ:

  <amp-video src="video.mp4" width="600" height="400" layout="responsive" controls>
    Your browser does not support the video tag.
  </amp-video>

3. amp-iframe

<amp-iframe> হল AMP-এর একটি Custom Element যা সাধারণ HTML <iframe> এর পরিবর্তে ব্যবহৃত হয়। এটি সাধারণত অন্যান্য ওয়েব পেজ, ইউটিউব ভিডিও, বা তৃতীয় পক্ষের কনটেন্ট এম্বেড করতে ব্যবহার করা হয়।

• ব্যবহার: সাধারণ <iframe> এর মতো, তবে এটি AMP-এ নির্দিষ্ট নিয়ম অনুসারে অপ্টিমাইজড করা হয়েছে।

• কী ফিচার:

  • Lazy Loading: এই iframe শুধুমাত্র তখন লোড হবে যখন এটি স্ক্রীনে দৃশ্যমান হবে।
  • ফিক্সড সাইজ বা রেসপন্সিভ সাইজ: আপনি width এবং height এর মান নির্ধারণ করতে পারবেন অথবা রেসপন্সিভ লেআউট ব্যবহার করতে পারবেন।
  • অপ্টিমাইজড পারফরম্যান্স: এটি AMP ক্যাশে ব্যবহৃত কনটেন্টগুলো দ্রুত লোড করার জন্য কনফিগার করা।

  উদাহরণ:

  <amp-iframe width="600" height="400" src="https://example.com" frameborder="0" sandbox="allow-scripts allow-same-origin">
    <p>Your browser does not support iframes.</p>
  </amp-iframe>

AMP Custom Elements এর সুবিধা

1. দ্রুত লোডিং:
   • AMP Custom Elements যেমন <amp-img>, <amp-video>, এবং <amp-iframe> বিশেষভাবে ডিজাইন করা হয়েছে যাতে এগুলি কম সময়ের মধ্যে লোড হয় এবং পেজের পারফরম্যান্স উন্নত হয়।
2. Lazy Loading:
   • এই উপাদানগুলো lazy loading সাপোর্ট করে, অর্থাৎ যখন ব্যবহারকারীর স্ক্রীনে উপাদানটি আসে তখনই তা লোড হয়। এর ফলে ওয়েব পেজের প্রাথমিক লোডিং সময় কমে যায়।
3. প্রি-ডিফাইন্ড সাইজ:
   • এগুলির জন্য সাইজ প্রি-ডিফাইন্ড থাকে, যার ফলে পেজের লেআউট সঠিকভাবে রেন্ডার হয় এবং উপাদানগুলো দ্রুত লোড হয়।
4. পারফরম্যান্স অপ্টিমাইজেশন:
   • AMP এই উপাদানগুলোকে দ্রুত লোড এবং অপ্টিমাইজড রেন্ডারিংয়ের জন্য বিশেষভাবে ডিজাইন করেছে, যাতে ওয়েবসাইটের পারফরম্যান্স আরও ভাল হয়, বিশেষ করে মোবাইল ডিভাইসের জন্য।
5. SEO ফ্রেন্ডলি:
   • AMP পেজগুলো গুগল সার্চ ইঞ্জিনে উচ্চ র‌্যাঙ্কিং পায়, কারণ এটি মোবাইল ফ্রেন্ডলি এবং দ্রুত লোড হয়।

সারাংশ

AMP-এর Custom Elements যেমন <amp-img>, <amp-video>, এবং <amp-iframe> মোবাইল ওয়েবসাইটের পারফরম্যান্স এবং লোডিং গতি উন্নত করতে সাহায্য করে। এগুলি ওয়েব পেজে দ্রুত লোড, সঠিক সাইজ এবং ইন্টারঅ্যাকটিভ কনটেন্ট যোগ করার জন্য অপ্টিমাইজড।