AMP Components এবং Elements গাইড ও নোট

AMP (Accelerated Mobile Pages) এর কিছু প্রধান কম্পোনেন্টস (Components) এবং এলিমেন্টস (Elements) আছে যা AMP পেজের সঠিকভাবে কাজ করতে এবং দ্রুত লোড হতে সাহায্য করে। AMP পেজ তৈরির জন্য কিছু নির্দিষ্ট HTML, JavaScript এবং CSS উপাদান ব্যবহৃত হয় যা পেজের লোডিং সময় দ্রুত করে। AMP এর প্রধান কম্পোনেন্ট এবং এলিমেন্টস সম্পর্কে বিস্তারিত আলোচনা করা হলো।

AMP Components

AMP কম্পোনেন্টস হল AMP পেজের কিছু মূল অংশ যা পেজের কার্যক্ষমতা এবং পারফরম্যান্স উন্নত করে। AMP কম্পোনেন্টস পেজের দ্রুত লোডিং এবং অন্যান্য ফিচার সঠিকভাবে কাজ করার জন্য ব্যবহৃত হয়।

1. AMP HTML:
   • AMP HTML হল AMP পেজ তৈরির জন্য একটি বিশেষ HTML ফরম্যাট। এটি সাধারণ HTML এর তুলনায় কিছু নির্দিষ্ট সীমাবদ্ধতা এবং অপ্টিমাইজেশনের সাথে আসে, যা পেজের দ্রুত রেন্ডারিং এবং লোডিং নিশ্চিত করে।
   • AMP HTML এ কিছু নির্দিষ্ট ট্যাগ এবং স্টাইল ব্যবহার করা হয়, যেমন <amp-img>, <amp-video>, এবং <amp-iframe>।
2. AMP JavaScript (AMP JS):
   • AMP JS হল একটি JavaScript লাইব্রেরি যা AMP পেজের কার্যক্ষমতা উন্নত করার জন্য ব্যবহৃত হয়। এটি পেজের দ্রুত লোডিং নিশ্চিত করতে সাহায্য করে, এবং পেজের কম্পোনেন্টগুলোকে দ্রুত রেন্ডার করার জন্য অ্যাসিনক্রোনাস লোডিং ব্যবহার করে।
   • AMP JS ব্যবহার করে অ্যাসিনক্রোনাস স্ক্রিপ্টিংয়ের মাধ্যমে ওয়েব পেজের পেজ লোড টাইম কমানো যায় এবং পেজটি আরো দ্রুত রেন্ডার হয়।
3. AMP Cache:
   • AMP Cache গুগলের একটি পরিষেবা যা AMP পেজগুলোর ক্যাশ তৈরি করে রাখে, যাতে পেজগুলি দ্রুত লোড হয়। গুগল সার্ভার থেকে AMP পেজের কপি সরাসরি ক্যাশ থেকে ডেলিভারি করে।
   • এটি AMP পেজের লোডিং টাইম কমিয়ে দেয় এবং ব্যবহারকারীকে দ্রুত পেজ রেন্ডারিং প্রদান করে।
4. AMP Validator:
   • AMP Validator একটি টুল যা AMP পেজের কোডের সঠিকতা যাচাই করে। এটি নিশ্চিত করে যে পেজটি AMP স্ট্যান্ডার্ড অনুযায়ী নির্মিত হয়েছে, এবং কোনো ত্রুটি বা সমস্যা থাকলে তা প্রদর্শন করে।

AMP Elements

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

1. <amp-img>:
   • এই ট্যাগটি সাধারণ <img> ট্যাগের বিকল্প, তবে এটি AMP পেজের জন্য বিশেষভাবে অপ্টিমাইজড। এটি ইমেজ লোডিংকে দ্রুত করে এবং লোড হওয়ার সময় lazy loading সমর্থন করে।

   • উদাহরণ:

     <amp-img src="image.jpg" width="600" height="400" alt="Description" layout="responsive"></amp-img>

2. <amp-video>:
   • এই ট্যাগটি ভিডিও উপাদান প্রদর্শনের জন্য ব্যবহৃত হয়। AMP এ <amp-video> ট্যাগ দিয়ে ভিডিও ফাইল এম্বেড করা যায়।

   • উদাহরণ:

     <amp-video width="640" height="360" controls>
       <source src="video.mp4" type="video/mp4">
     </amp-video>

3. <amp-iframe>:
   • সাধারণ <iframe> ট্যাগের AMP ভার্সন। এটি সুরক্ষিতভাবে সাপোর্ট করে এবং দ্রুত লোড হয়। যেকোনো এক্সটার্নাল কন্টেন্ট যেমন থার্ড পার্টি অ্যাপ্লিকেশন ইন্টারফেস বা কন্টেন্ট এম্বেড করতে ব্যবহার করা হয়।

   • উদাহরণ:

     <amp-iframe width="300" height="200" layout="responsive" src="https://example.com"></amp-iframe>

4. <amp-analytics>:
   • AMP পেজের জন্য এটি ব্যবহার করা হয় ওয়েবসাইটের ট্র্যাকিং এবং অ্যানালিটিক্স ডেটা সংগ্রহ করতে। Google Analytics বা অন্য অ্যানালিটিক্স প্ল্যাটফর্মগুলির সাথে কাজ করার জন্য এটি ব্যবহৃত হয়।

   • উদাহরণ:

     <amp-analytics type="googleanalytics">
       <script type="application/json">
         {
           "vars": {
             "account": "UA-XXXXXX-X"
           },
           "triggers": {
             "trackPageview": {
               "on": "visible",
               "request": "pageview"
             }
           }
         }
       </script>
     </amp-analytics>

5. <amp-form>:
   • এই ট্যাগটি AMP পেজে ফর্ম তৈরি করার জন্য ব্যবহৃত হয়। AMP ফর্মগুলির মধ্যে কিছু নির্দিষ্ট সীমাবদ্ধতা রয়েছে, তবে এগুলি দ্রুত লোড এবং কার্যকরী।

   • উদাহরণ:

     <amp-form method="post" action-xhr="/submit">
       <form>
         <input type="email" name="email" required>
         <button type="submit">Submit</button>
       </form>
     </amp-form>

6. <amp-carousel>:
   • এটি একটি AMP কনটেন্ট ক্যারোসেল (অথবা স্লাইডার) তৈরি করার জন্য ব্যবহৃত হয়। এটি ইমেজ, ভিডিও বা অন্য কন্টেন্টের স্লাইডার তৈরির জন্য ব্যবহার করা হয়।

   • উদাহরণ:

     <amp-carousel width="300" height="200" layout="responsive" type="slides">
       <amp-img src="image1.jpg" width="300" height="200" alt="Slide 1"></amp-img>
       <amp-img src="image2.jpg" width="300" height="200" alt="Slide 2"></amp-img>
     </amp-carousel>

7. <amp-social-share>:
   • এই ট্যাগটি সোশ্যাল মিডিয়ায় পেজ শেয়ার করার জন্য ব্যবহৃত হয়। এটি বিভিন্ন সোশ্যাল মিডিয়া প্ল্যাটফর্মে শেয়ার করার বাটন তৈরি করে।

   • উদাহরণ:

     <amp-social-share type="twitter" width="60" height="44" data-param-text="Check this out!"></amp-social-share>

8. <amp-lightbox>:
   • এই ট্যাগটি পেজে একটি লাইটবক্স ইফেক্ট তৈরির জন্য ব্যবহৃত হয়, যেখানে ব্যবহারকারী একটি ইমেজ বা কন্টেন্ট ক্লিক করলে তা লাইটবক্সের মাধ্যমে প্রদর্শিত হয়।

   • উদাহরণ:

     <amp-lightbox id="lightbox" layout="nodisplay">
       <div class="lightbox-content">This is the content</div>
     </amp-lightbox>

AMP পেজের জন্য HTML স্ট্যান্ডার্ডs

AMP পেজ তৈরির জন্য কিছু নির্দিষ্ট স্ট্যান্ডার্ড এবং ট্যাগ রয়েছে যা সঠিকভাবে কাজ করতে এবং দ্রুত লোড হতে সাহায্য করে:

• AMP পেজের হেড সেকশনে <script async src="https://cdn.ampproject.org/v0.js"></script> ট্যাগটি যুক্ত করতে হয়।
• CSS ফাইলের আকার ৫০ KB এর মধ্যে রাখতে হয়।
• কিছু নির্দিষ্ট ফিচারের জন্য বিশেষভাবে তৈরি AMP কম্পোনেন্ট ব্যবহার করতে হয়, যেমন AMP ইমেজ, ভিডিও, এবং ফর্ম।

AMP কম্পোনেন্টস ও এলিমেন্টস এর ভূমিকা

AMP কম্পোনেন্টস এবং এলিমেন্টস ওয়েব পেজের পারফরম্যান্স ও ব্যবহারের গতি দ্রুত করার জন্য গুরুত্বপূর্ণ। এগুলি ডিজাইন করা হয়েছে যাতে পেজগুলি দ্রুত লোড হয় এবং মোবাইল ব্যবহারকারীদের জন্য একটি মসৃণ অভিজ্ঞতা নিশ্চিত করতে পারে।

AMP (Accelerated Mobile Pages) একটি ওয়েব প্রযুক্তি যা মূলত মোবাইল ডিভাইসে দ্রুত ওয়েব পেজ লোড করতে সহায়তা করে। AMP পেজ তৈরি করতে কয়েকটি গুরুত্বপূর্ণ উপাদান বা Components ব্যবহৃত হয়। এই উপাদানগুলি নির্দিষ্টভাবে ডিজাইন করা হয়েছে যাতে পেজটি দ্রুত রেন্ডার হয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়। চলুন, AMP এর মূল কম্পোনেন্ট এবং তার প্রয়োজনীয়তা সম্পর্কে বিস্তারিত জানি।

AMP Components

1. AMP HTML:
   • AMP HTML হলো HTML এর একটি বিশেষ সংস্করণ যা AMP পেজের জন্য অপ্টিমাইজড। এটি সাধারণ HTML-এর কিছু ট্যাগ এবং বৈশিষ্ট্যগুলিকে সীমিত করে এবং বিশেষভাবে দ্রুত লোড হওয়ার জন্য ডিজাইন করা হয়।
   • AMP HTML পেজ তৈরির জন্য কিছু নির্দিষ্ট বিধি রয়েছে যেমন, <amp-img>, <amp-video>, <amp-carousel>, এবং আরও অনেক বিশেষ ট্যাগ ব্যবহার করতে হয় যা মোবাইল-ফ্রেন্ডলি এবং দ্রুত রেন্ডার হয়।
2. AMP JS (JavaScript):
   • AMP JS একটি JavaScript লাইব্রেরি যা পেজের উপাদানগুলোকে দ্রুত রেন্ডার করার জন্য ব্যবহৃত হয়। এটি নিশ্চিত করে যে ওয়েব পেজের JavaScript কোড কার্যকরভাবে ও দ্রুত লোড হবে। AMP JS-এ কিছু বিধিনিষেধ আছে, যেমন সাধারণ JavaScript কাস্টম কোড ব্যবহারের উপর সীমাবদ্ধতা, যা পেজের লোড টাইম কমানোর জন্য নির্ধারিত।
   • AMP JS পেজের স্ক্রিপ্টকে এমনভাবে অপ্টিমাইজ করে যাতে এটি নির্দিষ্ট পদ্ধতি অনুসরণ করে এবং ব্লকিং রিসোর্সগুলিকে এড়িয়ে চলতে পারে।
3. AMP Cache:
   • AMP Cache হল গুগলের একটি বিশেষ ক্যাশিং সিস্টেম যা AMP পেজগুলিকে গুগল সার্ভারে ক্যাশ করে রাখে। এর মাধ্যমে পেজের কন্টেন্ট দ্রুত লোড করা হয়, কারণ এটি সরাসরি গুগলের সার্ভার থেকে নেওয়া হয়।
   • AMP Cache গুগলের সার্ভার থেকে পেজ দ্রুত সার্ভ করে, যা মোবাইল ডিভাইসের জন্য আরও দ্রুত রেন্ডারিং এবং লোডিং নিশ্চিত করে।
4. AMP Validator:
   • AMP Validator হলো একটি টুল যা AMP পেজের কোড চেক করে এবং নিশ্চিত করে যে এটি AMP স্ট্যান্ডার্ড অনুযায়ী তৈরি হয়েছে। এটি ডেভেলপারদের সাহায্য করে যাতে তারা সঠিক AMP HTML এবং JavaScript ব্যবহার করছেন এবং পেজটি AMP স্ট্যান্ডার্ডে সঠিকভাবে চলে কিনা।
5. AMP Components (Extensions):
   • AMP প্রকল্পে বিভিন্ন AMP Extensions রয়েছে যা ওয়েবসাইটের ফিচার এবং কার্যক্ষমতা বাড়াতে সহায়তা করে। যেমন:
     • AMP Ads: AMP পেজে বিজ্ঞাপন দ্রুত লোড করতে সাহায্য করে।
     • AMP Analytics: পেজের এনালিটিক্স ট্র্যাকিং দ্রুত এবং কার্যকরভাবে করা যায়।
     • AMP Forms: ফর্ম সাবমিশনকে দ্রুত এবং নির্ভুলভাবে সম্পন্ন করতে সহায়তা করে।
     • AMP Lightbox: ইমেজ এবং ভিডিও দেখার জন্য একটি উন্নত সিস্টেম প্রদান করে।

AMP Components এর প্রয়োজনীয়তা

1. দ্রুত লোডিং:
   • AMP কম্পোনেন্টগুলো দ্রুত লোডিংয়ের জন্য ডিজাইন করা হয়েছে। এটি ব্যবহারকারীদের জন্য একটি মসৃণ অভিজ্ঞতা তৈরি করে, বিশেষ করে মোবাইল ডিভাইসে যেখানে ইন্টারনেটের গতি কখনো কখনো ধীর হতে পারে। AMP HTML এবং AMP JS পেজের লোড টাইম কমিয়ে দেয় এবং মোবাইল ডিভাইসে দ্রুত রেন্ডারিং নিশ্চিত করে।
2. SEO উন্নতি:
   • গুগল AMP পেজগুলোকে সঠিকভাবে র‌্যাঙ্কিং দেয়, কারণ এটি দ্রুত লোড হয় এবং মোবাইল-ফ্রেন্ডলি। AMP পেজের মাধ্যমে সার্চ ইঞ্জিনে আরও ভালো র‌্যাঙ্কিং পাওয়া যায়, যা ওয়েবসাইটের ট্র্যাফিক বাড়ায়। AMP Cache এবং Validator পেজের সঠিকতা নিশ্চিত করতে সাহায্য করে।
3. কাস্টম কোডের সীমাবদ্ধতা:
   • AMP JS এর মধ্যে কিছু সীমাবদ্ধতা থাকলেও, এটি দ্রুত লোডিং এবং রেন্ডারিং নিশ্চিত করার জন্য প্রয়োজনীয়। এর মাধ্যমে পেজের কোড দ্রুত কার্যকর হয় এবং ব্যবহারকারীর জন্য কোন সমস্যা সৃষ্টি না হয়ে পেজ দ্রুত প্রদর্শিত হয়।
4. সহজ ডেভেলপমেন্ট:
   • AMP কম্পোনেন্টগুলোর ব্যবহার ওয়েব ডেভেলপারদের জন্য সহজ এবং প্রফেশনাল ডিজাইন তৈরি করতে সহায়ক। AMP HTML এবং AMP Extensions ডেভেলপমেন্টের জন্য প্রয়োজনীয় টুলস সরবরাহ করে, যাতে ডেভেলপাররা দ্রুত এবং সহজভাবে AMP পেজ তৈরি করতে পারেন।
5. বিজ্ঞাপন এবং কনটেন্ট অপ্টিমাইজেশন:
   • AMP Ads এবং AMP Analytics এর মাধ্যমে বিজ্ঞাপন এবং কনটেন্ট ট্র্যাকিংয়ের দ্রুততা নিশ্চিত করা যায়। এর ফলে ওয়েবসাইট মালিকরা দ্রুত বিজ্ঞাপন লোড করতে এবং এনালিটিক্স সঠিকভাবে ট্র্যাক করতে সক্ষম হন।
6. ব্যবহারকারীর অভিজ্ঞতা:
   • AMP কম্পোনেন্টগুলির মাধ্যমে পেজ লোডের গতি বৃদ্ধি পায় এবং ব্যবহারকারীরা দ্রুত প্রয়োজনীয় কন্টেন্ট খুঁজে পায়। এটি ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে এবং সাইটে থাকার সময় বাড়ায়।

উপসংহার

AMP কম্পোনেন্টগুলো মোবাইল ডিভাইসে দ্রুত ওয়েব পেজ লোডিং নিশ্চিত করতে অত্যন্ত গুরুত্বপূর্ণ। এটি ওয়েব পেজের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে। AMP HTML, AMP JS, AMP Cache এবং AMP Extensions-এর সঠিক ব্যবহার ওয়েবসাইটগুলোকে দ্রুত এবং মসৃণভাবে লোড হতে সাহায্য করে, যা SEO, বিজ্ঞাপন আয় এবং ওয়েবসাইট ট্র্যাফিক বৃদ্ধিতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

AMP Image Component (amp-img) হল AMP (Accelerated Mobile Pages) প্রযুক্তির একটি বিশেষ উপাদান যা ইমেজগুলোকে দ্রুত লোড করার জন্য ডিজাইন করা হয়েছে। এটি AMP HTML ফ্রেমওয়ার্কের অংশ হিসেবে ব্যবহৃত হয় এবং ওয়েব পেজের ইমেজগুলোকে অপ্টিমাইজ করে যাতে তারা দ্রুত এবং সঠিকভাবে রেন্ডার হয়। amp-img কম্পোনেন্টটি ইমেজ লোডিং এবং রেসপন্সিভ ডিজাইনকে সহজ এবং দ্রুত করার জন্য ব্যবহৃত হয়।

amp-img এর বৈশিষ্ট্যসমূহ

1. রেসপন্সিভ ডিজাইন:
   • amp-img স্বয়ংক্রিয়ভাবে ইমেজের আকার এবং স্কেলিং অ্যাডজাস্ট করে, এটি বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজের জন্য উপযোগী। এটি ব্যবহারকারীর স্ক্রীন সাইজ অনুযায়ী ইমেজের আকার পরিবর্তন করে, যা মোবাইল ডিভাইসে দ্রুত লোড হতে সাহায্য করে।
2. লেইজি লোডিং:
   • amp-img ট্যাগ ইমেজগুলো লেইজি লোডিং করতে সহায়তা করে, অর্থাৎ, ইমেজ শুধুমাত্র তখনই লোড হয় যখন তা ব্যবহারকারীর পর্দায় দৃশ্যমান হয়। এটি ওয়েব পেজের প্রথম লোডিং টাইম কমাতে সাহায্য করে।
3. প্রতিস্থাপনযোগ্য আকার:
   • ইমেজের আকার নির্দিষ্ট করা যায়। এটিতে width এবং height অ্যাট্রিবিউট থাকা বাধ্যতামূলক। amp-img ইমেজের সঠিক আকারের মাধ্যমে পেজের লে-আউট শিফট বা সরে যাওয়ার সমস্যা প্রতিরোধ করে।
4. ফর্ম্যাট এবং অপটিমাইজেশন:
   • AMP ইমেজ কম্পোনেন্ট স্বয়ংক্রিয়ভাবে ইমেজ ফরম্যাট নির্বাচন এবং কম্প্রেস করে, যেমন JPEG, PNG, বা WebP ইমেজ ফরম্যাট, যা দ্রুত লোডিং এবং কম ব্যান্ডউইথ ব্যবহার নিশ্চিত করে।
5. অটো ফিটিং:
   • amp-img ওয়েব পেজের লেআউটে ইমেজগুলোর গঠন ঠিক রেখে দ্রুত লোড হয় এবং এটি ইমেজের চারপাশের কনটেন্টের সাথে মানানসই হয়।

amp-img এর ব্যবহার

amp-img ইমেজ কম্পোনেন্ট ব্যবহার করতে হলে আপনাকে সঠিক সিঙ্কট্যাক্সে HTML কোড লিখতে হবে, যেমন:

<amp-img src="image-url.jpg" width="600" height="400" layout="responsive" alt="Image description"></amp-img>

অ্যাট্রিবিউট সমূহ:

1. src:
   • ইমেজের উৎস URL।
   • উদাহরণ: src="image.jpg"
2. width এবং height:
   • ইমেজের প্রস্থ এবং উচ্চতা সন্নিবেশিত করা বাধ্যতামূলক।
   • উদাহরণ: width="600" height="400"
3. layout:
   • ইমেজের লেআউট কিভাবে হবে তা নির্ধারণ করে। সাধারণত, layout="responsive" ব্যবহার করা হয় যাতে ইমেজটি রেসপন্সিভভাবে সাইজ অ্যাডজাস্ট করে।
   • অন্যান্য অপশনগুলির মধ্যে রয়েছে fixed, intrinsic, এবং fill।
4. alt:
   • ইমেজের বিকল্প টেক্সট। এটি SEO এবং অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।
   • উদাহরণ: alt="A beautiful sunset"
5. sizes:
   • এই অ্যাট্রিবিউটটি ডিভাইসের স্ক্রীন সাইজ অনুযায়ী ইমেজের সাইজ নির্ধারণ করতে ব্যবহৃত হয়।
   • উদাহরণ: sizes="(max-width: 600px) 100vw, 600px"

amp-img এর উদাহরণ:

<amp-img src="https://example.com/image.jpg" width="600" height="400" layout="responsive" alt="Beautiful Mountain"></amp-img>

এখানে:

• src: ইমেজের URL, যা আপনার ওয়েব পেজে প্রদর্শিত হবে।
• width এবং height: ইমেজের নির্দিষ্ট আকার, যা AMP পেজ রেন্ডারিং সময় ব্যবহৃত হবে।
• layout="responsive": ইমেজ রেসপন্সিভভাবে প্রদর্শিত হবে, যার মানে এটি স্ক্রীন সাইজ অনুসারে আকার পরিবর্তন করবে।
• alt: ইমেজের বর্ণনা, যা অ্যাক্সেসিবিলিটি এবং SEO এর জন্য গুরুত্বপূর্ণ।

amp-img এর সুবিধা:

1. দ্রুত লোডিং:
   • amp-img দ্রুত লোড হতে সহায়তা করে, বিশেষত মোবাইল ডিভাইসে, কারণ এটি ইমেজ লোডিং অপটিমাইজড থাকে এবং লেইজি লোডিংয়ের মাধ্যমে পেজের মোট লোড টাইম কমায়।
2. রেসপন্সিভ ডিজাইন:
   • এটি বিভিন্ন স্ক্রীনে উপযুক্তভাবে প্রদর্শিত হয়, কারণ layout="responsive" সেট করা থাকে। এটি ইমেজের আকারের সাথে পেজের অন্যান্য উপাদানকে সঙ্গতিপূর্ণ রাখতে সাহায্য করে।
3. ব্যান্ডউইথ সাশ্রয়:
   • amp-img ইমেজ কম্প্রেশন এবং উপযুক্ত ফরম্যাট নির্বাচন করে, ফলে কম ব্যান্ডউইথ ব্যবহার হয় এবং পেজ দ্রুত লোড হয়।
4. SEO এবং অ্যাক্সেসিবিলিটি:
   • ইমেজে alt টেক্সট সহ ইমেজের বর্ণনা প্রদান করে, যা SEO এবং অ্যাক্সেসিবিলিটি উন্নত করতে সহায়ক।

সীমাবদ্ধতা:

• ইমেজের আকার: amp-img এ ইমেজের আকারের জন্য width এবং height অ্যাট্রিবিউট দেওয়া বাধ্যতামূলক, যা কিছু ক্ষেত্রে কাস্টম ডিজাইন সীমাবদ্ধ করতে পারে।
• JavaScript সীমাবদ্ধতা: AMP পেজে সাধারণ JavaScript ব্যবহার করা সীমিত, তাই কিছু উন্নত কার্যকারিতা এই কম্পোনেন্টে ব্যবহার করা যাবে না।

এভাবে, amp-img কম্পোনেন্টটি মোবাইল ডিভাইসে দ্রুত ইমেজ লোড করার জন্য একটি কার্যকরী উপাদান, যা ওয়েব পেজের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।

AMP Video এবং AMP Audio হল গুগল AMP প্রযুক্তির মধ্যে এমন দুটি উপাদান যা ভিডিও এবং অডিও কন্টেন্ট সাইটে অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়। এগুলি বিশেষভাবে মোবাইল ওয়েব পেজের জন্য ডিজাইন করা হয়েছে যাতে ভিডিও এবং অডিও কন্টেন্ট দ্রুত লোড হতে পারে এবং মোবাইল ডিভাইসে মসৃণ অভিজ্ঞতা প্রদান করতে সাহায্য করে।

AMP Video (amp-video)

amp-video হল একটি AMP কম্পোনেন্ট যা ভিডিও কন্টেন্ট ইন্টিগ্রেট করার জন্য ব্যবহৃত হয়। এটি HTML5 ভিডিও ট্যাগের মতো কাজ করে, কিন্তু কিছু নির্দিষ্ট বিধি এবং অপ্টিমাইজেশন রয়েছে যাতে ভিডিওটি দ্রুত লোড হয় এবং পারফরম্যান্স বৃদ্ধি পায়।

amp-video কম্পোনেন্টের বৈশিষ্ট্য:

• দ্রুত লোডিং: amp-video কম্পোনেন্টের মাধ্যমে ভিডিও কন্টেন্ট দ্রুত লোড হয়, কারণ এটি AMP প্ল্যাটফর্মের মধ্যে সম্পূর্ণভাবে অপ্টিমাইজড।
• Lazy Loading: ভিডিওগুলো Lazy load হয়, অর্থাৎ কেবল তখনই ভিডিওটি লোড হয় যখন ব্যবহারকারী তা দেখার জন্য স্ক্রল করে।
• সমর্থিত ফরম্যাট: এটি ভিডিও ফরম্যাট যেমন MP4, WebM, এবং Ogg ফরম্যাট সমর্থন করে।
• অটো-প্লে, মিউট এবং কন্ট্রোলস: amp-video কম্পোনেন্টে অটো-প্লে, মিউট এবং অন্যান্য ভিডিও কন্ট্রোল অ্যাট্রিবিউট যোগ করা সম্ভব।
• প্লে-ব্যাক কন্ট্রোলস: ভিডিও কন্ট্রোল যেমন প্লে, পজ, থামানো, এবং ভলিউম কন্ট্রোল প্রদর্শিত হতে পারে।
• বিশেষ নকশা: amp-video কম্পোনেন্ট সাধারণত কনটেন্টে একটি নির্দিষ্ট আকারের ভিডিও প্রদান করে, যাতে সাইটের পারফরম্যান্সে কোনো ব্যাঘাত না ঘটে।

amp-video ব্যবহার উদাহরণ:

<amp-video width="640" height="360" layout="responsive" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video.</p>
</amp-video>

এই উদাহরণে:

• width এবং height: ভিডিওর আকার নির্ধারণ করে।
• layout="responsive": ভিডিওকে রেসপন্সিভ মোডে প্রদর্শন করতে ব্যবহৃত।
• controls: ভিডিও কন্ট্রোল (প্লে, পজ, ভলিউম) দেখায়।

AMP Audio (amp-audio)

amp-audio হল একটি AMP কম্পোনেন্ট যা অডিও ফাইল অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের ওয়েব পেজে অডিও কন্টেন্টের অভিজ্ঞতা প্রদান করে, যা বিশেষভাবে দ্রুত লোড হতে এবং মোবাইল ডিভাইসে অপটিমাইজডভাবে কাজ করে।

amp-audio কম্পোনেন্টের বৈশিষ্ট্য:

• দ্রুত লোডিং: amp-audio কম্পোনেন্টের মাধ্যমে অডিও কন্টেন্ট দ্রুত লোড হয়, যা ওয়েবসাইটের দ্রুত পারফরম্যান্সে সহায়তা করে।
• Lazy Loading: অডিও ফাইলগুলো Lazy load হয়, অর্থাৎ ব্যবহারকারী সাইটে স্ক্রল করার পর এটি লোড হতে শুরু করে।
• অডিও ফরম্যাট: এটি MP3, Ogg, এবং WAV ফরম্যাট সমর্থন করে।
• বেসিক কন্ট্রোলস: amp-audio কম্পোনেন্টে সাধারণ অডিও কন্ট্রোল যেমন প্লে, পজ, এবং ভলিউম কন্ট্রোল রয়েছে।
• স্ট্রিমিং: amp-audio স্ট্রিমিং অডিওর জন্য উপযোগী হতে পারে।

amp-audio ব্যবহার উদাহরণ:

<amp-audio width="auto" height="50" controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio.</p>
</amp-audio>

এই উদাহরণে:

• width="auto": অডিও প্লেয়ারটি প্রস্থ অনুযায়ী অটোমেটিক্সি আকার নেবে।
• controls: অডিও কন্ট্রোল (প্লে, পজ, ভলিউম) দেখাবে।

AMP Video এবং Audio এর সুবিধা

1. দ্রুত লোডিং:
   • AMP ভিডিও এবং অডিও উপাদানগুলি বিশেষভাবে অপ্টিমাইজড থাকে যাতে এগুলি দ্রুত লোড হয় এবং মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।
2. পেজ পারফরম্যান্স:
   • AMP ভিডিও এবং অডিও কম্পোনেন্টগুলি পেজের অন্যান্য উপাদানগুলোর সাথে পারফরম্যান্সে ব্যাঘাত সৃষ্টি না করে ভিডিও এবং অডিও কন্টেন্ট প্রদর্শন করে।
3. Responsive Design:
   • AMP ভিডিও এবং অডিও কম্পোনেন্টগুলি রেসপন্সিভভাবে কাজ করে, অর্থাৎ এগুলি যেকোনো স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়।
4. Lazy Loading:
   • AMP ভিডিও এবং অডিও Lazy loading এর মাধ্যমে কেবল তখনই লোড হয় যখন ব্যবহারকারী সেগুলোর দিকে স্ক্রল করে। এটি ওয়েব পেজের লোডিং সময় কমায় এবং প্রাথমিক লোডিং পেজটি দ্রুত করা সম্ভব হয়।
5. SEO Friendly:
   • AMP পেজগুলি গুগলে ভালো র‌্যাঙ্ক পেতে সহায়তা করে, এবং ভিডিও এবং অডিও কন্টেন্টের সঠিক প্রস্থ এবং উচ্চতা নির্ধারণের মাধ্যমে আরো উন্নত পারফরম্যান্স তৈরি করা যায়।

উপসংহার

AMP ভিডিও এবং অডিও কম্পোনেন্টগুলি বিশেষভাবে ডিজাইন করা হয়েছে যাতে মোবাইল ডিভাইসে ভিডিও এবং অডিও কন্টেন্ট দ্রুত এবং অপ্টিমাইজডভাবে লোড হয়। এগুলি ওয়েব পেজের দ্রুত লোডিং এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

AMP Iframe বা Embedding Content (amp-iframe) হল একটি AMP (Accelerated Mobile Pages) প্রযুক্তির অংশ যা ওয়েব পেজে অন্যান্য কন্টেন্ট, যেমন: ভিন্ন ওয়েবসাইট বা কন্টেন্ট এম্বেড করতে ব্যবহৃত হয়। AMP-iframe এর মাধ্যমে আপনি একাধিক কন্টেন্ট সোর্স যেমন, ভিডিও, ম্যাপ, এবং অন্যান্য ওয়েব পেজ ইনলাইনভাবে আপনার AMP পেজে এম্বেড করতে পারেন, এবং এটি অ্যাপ্লিকেশনের পারফরম্যান্সে সমস্যা সৃষ্টি না করে দ্রুত লোড হয়।

AMP Iframe (amp-iframe) কী?

<amp-iframe> হল একটি বিশেষ ট্যাগ যা AMP পেজে ইফ্রেম বা ইনলাইন এম্বেডেড কন্টেন্ট যোগ করার জন্য ব্যবহৃত হয়। এটি AMP সাইটের জন্য বিশেষভাবে ডিজাইন করা হয়েছে, যাতে অন্য সাইটের কন্টেন্ট বা মিডিয়া দ্রুত লোড হয় এবং ব্যবহারকারীর অভিজ্ঞতা ভালো থাকে।

AMP Iframe ট্যাগের মূল বৈশিষ্ট্য

1. অটো সাইজিং: AMP-iframe একটি নির্দিষ্ট সাইজ ধরে রাখে এবং এটি স্বয়ংক্রিয়ভাবে বিভিন্ন ডিভাইসে সঠিকভাবে ফিট করে, যেমন মোবাইল, ট্যাবলেট এবং ডেস্কটপ।
2. ব্রাউজার পারফরম্যান্স অপ্টিমাইজেশন: AMP iframe ট্যাগ একটি বিশেষ AMP লাইব্রেরি ব্যবহার করে, যার মাধ্যমে ইফ্রেমের কন্টেন্ট দ্রুত লোড হয়।
3. স্ক্রলিং এবং কন্ট্রোল: AMP iframe কন্টেন্ট স্ক্রল করতে সক্ষম, তবে এটিতে কিছু সীমাবদ্ধতা থাকে। সাধারণ HTML iframe এর তুলনায় AMP iframe আরো অপ্টিমাইজড থাকে।

AMP Iframe (amp-iframe) ট্যাগ ব্যবহার করার নিয়ম

AMP পেজে iframe এম্বেড করতে, আপনাকে amp-iframe ট্যাগ ব্যবহার করতে হবে, যা সাধারণ HTML iframe ট্যাগের পরিবর্তে ব্যবহৃত হয়। নীচে একটি উদাহরণ দেওয়া হলো:

উদাহরণ: AMP Iframe (Embedding Content)

<amp-iframe width="600" height="400" layout="responsive" sandbox frameborder="0" scrolling="no" src="https://www.example.com"></amp-iframe>

বিশদ বর্ণনা:

1. width: এটি iframe এর প্রস্থ নির্ধারণ করে।
2. height: এটি iframe এর উচ্চতা নির্ধারণ করে।
3. layout="responsive": এটি iframe এর রেসপন্সিভ ডিজাইন নিশ্চিত করে, যাতে এটি বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শিত হয়।
4. sandbox: এটি iframe এর নিরাপত্তা বাড়ানোর জন্য ব্যবহৃত হয়। এই অ্যাট্রিবিউটটি iframe এর মধ্যে স্ক্রিপ্ট বা ফর্ম সাবমিটিং আটকাতে সাহায্য করে।
5. frameborder="0": iframe এর চারপাশে বর্ডার না দেখানোর জন্য ব্যবহৃত হয়।
6. scrolling="no": স্ক্রল বার বন্ধ করে দেয়।
7. src: এটি iframe এর উৎস URL নির্দেশ করে, যেখানে আপনি যে কন্টেন্ট বা ওয়েব পেজ এম্বেড করতে চান তা থাকবে।

AMP Iframe এর উদাহরণ: ভিডিও এম্বেড করা

যদি আপনি কোনো ভিডিও বা মিডিয়া প্ল্যাটফর্মের কন্টেন্ট AMP পেজে এম্বেড করতে চান, তবে নিম্নলিখিত উদাহরণ অনুসরণ করতে পারেন।

<amp-iframe width="560" height="315" layout="responsive" sandbox frameborder="0" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></amp-iframe>

এখানে YouTube ভিডিও এম্বেড করা হয়েছে এবং layout="responsive" অ্যাট্রিবিউটটি ভিডিওর আকার রেসপন্সিভ রাখার জন্য ব্যবহার করা হয়েছে।

AMP Iframe ব্যবহারের সীমাবদ্ধতা

1. JavaScript সীমাবদ্ধতা: AMP-iframe ট্যাগের মধ্যে JavaScript ব্যবহার সীমিত, কারণ AMP পেজে JavaScript কে সাধারণত নিষিদ্ধ করা হয়। তবে, sandbox অ্যাট্রিবিউটটি ব্যবহারের মাধ্যমে iframe এর মধ্যে JavaScript নিষ্ক্রিয় করা যেতে পারে।
2. কনটেন্টের ডোমেইন: কিছু ক্ষেত্রে, src অ্যাট্রিবিউটে যেসব URL দেয়া হয়, সেগুলি AMP পেজের জন্য কনফিগার করা থাকতে পারে। অন্যথায়, বাইরের ডোমেইন বা কন্টেন্ট ইফ্রেমে লোড হতে পারে না।
3. কাস্টমাইজেশন সীমাবদ্ধতা: AMP-iframe ট্যাগের কিছু স্টাইলিং এবং কাস্টমাইজেশন সীমিত। যেহেতু এটি AMP এর একটি অংশ, আপনি কিছু কাস্টম কোড বা ফিচার যোগ করতে পারবেন না যা সাধারণ HTML iframe এর মাধ্যমে করা যায়।

AMP Iframe (Embedding Content) এর সুবিধা

• দ্রুত লোডিং: AMP-iframe ট্যাগটি অন্যান্য iframe এর তুলনায় দ্রুত লোড হয় কারণ এটি AMP লাইব্রেরির সাহায্যে অপ্টিমাইজড হয়।
• রেসপন্সিভ ডিজাইন: AMP iframe মোবাইল এবং ডেস্কটপে সঠিকভাবে ফিট করে, যা ব্যবহারকারীদের জন্য একটি উন্নত অভিজ্ঞতা তৈরি করে।
• নিরাপত্তা: sandbox অ্যাট্রিবিউটের মাধ্যমে iframe এর কন্টেন্ট নিরাপদ করা যায় এবং এটি অপ্রত্যাশিত স্ক্রিপ্ট কার্যকলাপ রোধ করে।

AMP Iframe এর ব্যবহার কেস

AMP-iframe বিশেষত যে পরিস্থিতিতে ব্যবহার করা হয়, সেগুলি অন্তর্ভুক্ত:

1. ভিডিও এম্বেডিং: YouTube বা Vimeo এর মতো ভিডিও প্ল্যাটফর্ম থেকে ভিডিও এম্বেড করতে।
2. ম্যাপ এম্বেডিং: Google Maps বা অন্যান্য ম্যাপ সার্ভিস এম্বেড করতে।
3. কাস্টম কন্টেন্ট: অন্যান্য ওয়েব পেজের কন্টেন্ট অথবা কাস্টম ডিজাইন করা কন্টেন্ট এম্বেড করতে।

AMP Iframe বা embedding content ব্যবহার করে আপনি আপনার AMP পেজে তৃতীয় পক্ষের কন্টেন্ট সহজে এবং দ্রুত লোড করে প্রদর্শন করতে পারেন, যা মোবাইল ব্যবহারকারীদের জন্য একটি দ্রুত এবং নিরাপদ অভিজ্ঞতা প্রদান করে।