AMP HTML একটি বিশেষ HTML ফরম্যাট যা Google AMP প্রকল্পের অংশ হিসেবে তৈরি হয়েছে। এটি ওয়েব পেজগুলোর লোডিং টাইম দ্রুত করার জন্য অপ্টিমাইজড এবং মোবাইল ডিভাইসের জন্য প্রস্তুত। AMP HTML মূলত কিছু নির্দিষ্ট নিয়ম এবং কনভেনশন অনুসরণ করে, যার মাধ্যমে পেজের রেন্ডারিং প্রক্রিয়া দ্রুত হয় এবং পেজে লোড হওয়া উপাদানগুলোর কার্যক্ষমতা বৃদ্ধি পায়।
AMP HTML এর মৌলিক ধারণা
- সীমিত HTML ব্যবহার:
- AMP HTML সাধারণ HTML এর তুলনায় সীমিত এবং অপ্টিমাইজড হয়। এতে কিছু ট্যাগ এবং বৈশিষ্ট্য ব্যবহারের মাধ্যমে পেজের লোডিং টাইম কমানো হয়। সাধারণ HTML এর তুলনায় কিছু ট্যাগ যেমন
<amp-img>,<amp-video>ইত্যাদি ব্যবহার করা হয়।
- AMP HTML সাধারণ HTML এর তুলনায় সীমিত এবং অপ্টিমাইজড হয়। এতে কিছু ট্যাগ এবং বৈশিষ্ট্য ব্যবহারের মাধ্যমে পেজের লোডিং টাইম কমানো হয়। সাধারণ HTML এর তুলনায় কিছু ট্যাগ যেমন
- কাস্টম ট্যাগ এবং উপাদান:
- AMP HTML কিছু কাস্টম ট্যাগ এবং উপাদান সমর্থন করে, যা শুধুমাত্র AMP পেজে ব্যবহৃত হয়। উদাহরণস্বরূপ:
<amp-img>: ইমেজ প্রদর্শনের জন্য ব্যবহার করা হয়।<amp-video>: ভিডিও রেন্ডার করার জন্য ব্যবহার করা হয়।<amp-carousel>: ক্যারোসেল (slideshow) তৈরি করার জন্য ব্যবহার করা হয়।
- AMP HTML কিছু কাস্টম ট্যাগ এবং উপাদান সমর্থন করে, যা শুধুমাত্র AMP পেজে ব্যবহৃত হয়। উদাহরণস্বরূপ:
- JavaScript সীমাবদ্ধতা:
- AMP HTML এ JavaScript ব্যবহার করতে কিছু সীমাবদ্ধতা রয়েছে। শুধুমাত্র AMP JS লাইব্রেরি ব্যবহার করা যেতে পারে, যা পেজের লোডিং টাইম কমায় এবং রেন্ডারিং আরও দ্রুত করে। এটি সাধারণ JavaScript ফাইল এবং লাইব্রেরির তুলনায় অনেক বেশি অপ্টিমাইজড।
- CSS স্টাইলিং সীমাবদ্ধতা:
- AMP HTML এ CSS ব্যবহার করতে কিছু সীমাবদ্ধতা রয়েছে। CSS স্টাইলশিটের আকার ৫০ কিলোবাইটের মধ্যে থাকতে হবে। এর ফলে সাইটটি দ্রুত লোড হয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।
- গুগল AMP Cache:
- AMP HTML পেজগুলি গুগল AMP Cache সার্ভারে ক্যাশে করা হয়, যা পেজের রেন্ডারিং প্রক্রিয়াকে দ্রুত করে তোলে। গুগল AMP Cache গুগলের নিজস্ব সার্ভার থেকে পেজটি লোড করে, যাতে লোডিং টাইম কমে যায়।
- পেজ লোডিং দ্রুত করার কৌশল:
- AMP HTML পেজের জন্য নির্দিষ্ট বিধি রয়েছে, যার মাধ্যমে পেজের লোডিং প্রক্রিয়া দ্রুত হয়। এগুলির মধ্যে রয়েছে:
- Lazy loading: ইমেজ এবং ভিডিও লোড হবে যখন তা ব্যবহারকারীর স্ক্রীনে দৃশ্যমান হবে।
- Asynchronous loading: সমস্ত স্ক্রিপ্ট এবং স্টাইলশিট গুলি অ্যাসিনক্রোনাসভাবে লোড হয়, যাতে পেজের অন্যান্য উপাদান দ্রুত রেন্ডার হয়।
- AMP HTML পেজের জন্য নির্দিষ্ট বিধি রয়েছে, যার মাধ্যমে পেজের লোডিং প্রক্রিয়া দ্রুত হয়। এগুলির মধ্যে রয়েছে:
- সিম্পল স্ট্রাকচার:
- AMP HTML পেজগুলোর গঠন সাধারণত সরল এবং পরিষ্কার থাকে। এতে অতিরিক্ত কোড, স্ক্রিপ্ট, এবং স্টাইল সীমিত থাকে, যা পেজ লোডিং প্রক্রিয়াকে দ্রুত এবং দক্ষ করে তোলে।
- রেসপন্সিভ ডিজাইন:
- AMP HTML স্বয়ংক্রিয়ভাবে রেসপন্সিভ হয়, যার মাধ্যমে পেজটি সমস্ত ডিভাইসে, বিশেষত মোবাইল ডিভাইসে, সুন্দরভাবে প্রদর্শিত হয়। এটি মোবাইল ডিভাইসে উপযুক্ত আকার এবং ডিজাইনে রেন্ডার হয়।
AMP HTML এর উদাহরণ
এখানে একটি AMP HTML পেজের উদাহরণ দেওয়া হল:
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
/* Custom styles go here */
</style>
<title>AMP Example</title>
</head>
<body>
<h1>Welcome to AMP</h1>
<amp-img src="image.jpg" width="600" height="400" alt="AMP Image"></amp-img>
<p>This is an AMP HTML page.</p>
</body>
</html>AMP HTML এর সুবিধা
- দ্রুত লোডিং: AMP HTML পেজ দ্রুত লোড হয়, যা ব্যবহারকারীদের অভিজ্ঞতা উন্নত করে। এটি বিশেষভাবে মোবাইল ডিভাইসের জন্য উপকারী।
- এএসও (SEO): AMP পেজগুলি গুগল সার্চে উচ্চ র্যাঙ্কিং পেতে সহায়তা করে, কারণ গুগল মোবাইল-ফ্রেন্ডলি এবং দ্রুত লোড হওয়া পেজগুলোকে অগ্রাধিকার দেয়।
- গুগল AMP Cache: গুগলের নিজস্ব AMP Cache ব্যবস্থার মাধ্যমে পেজ দ্রুত লোড হয়, যেহেতু এটি গুগলের সার্ভার থেকে সরাসরি রেন্ডার হয়।
- মোবাইল ডিভাইসের জন্য উপযোগী: AMP HTML মূলত মোবাইল ডিভাইসের জন্য তৈরি, তাই এটি মোবাইল ব্যবহারকারীদের জন্য উপযুক্ত এবং একটি চমৎকার অভিজ্ঞতা প্রদান করে।
AMP HTML এর সীমাবদ্ধতা
- কাস্টমাইজেশন সীমিত: AMP HTML কাস্টম ফিচার এবং জটিল ডিজাইন সমর্থন করে না, যেহেতু এটি সীমিত CSS এবং JavaScript ব্যবহারের উপর নির্ভরশীল।
- JavaScript সীমাবদ্ধতা: কেবলমাত্র AMP JS লাইব্রেরি ব্যবহার করা যায়, যা সাধারণ JavaScript ফিচার বা কাস্টম স্ক্রিপ্ট ব্যবহারকে সীমিত করে।
- কনটেন্ট নিয়ন্ত্রণ: গুগলের AMP Cache ব্যবহারের ফলে কিছু কনটেন্টের মালিকানা গুগলের কাছে চলে যেতে পারে, যা কিছু ওয়েবসাইটের জন্য অস্বস্তিকর হতে পারে।
AMP HTML দ্রুত লোডিং, উন্নত SEO এবং মোবাইল ডিভাইসের জন্য একটি উপযুক্ত পদ্ধতি হিসেবে কাজ করে, তবে এর কিছু সীমাবদ্ধতা রয়েছে যা বিবেচনা করা প্রয়োজন।
AMP HTML হল Accelerated Mobile Pages (AMP) প্রকল্পের একটি বিশেষ সংস্করণ যা গুগল তৈরি করেছে, এবং এটি মোবাইল ডিভাইসে দ্রুত লোড হওয়া ওয়েব পেজ তৈরি করতে ব্যবহৃত হয়। AMP HTML একটি হালকা ও দ্রুত-লোডিং HTML ফরম্যাট যা বিশেষভাবে ডিজাইন করা হয়েছে যাতে ওয়েব পেজগুলো দ্রুত রেন্ডার হয় এবং মোবাইল ব্যবহারকারীদের জন্য উন্নত অভিজ্ঞতা তৈরি হয়।
AMP HTML কী?
AMP HTML হল একটি স্বতন্ত্র HTML ফরম্যাট যা সাধারণ HTML থেকে কিছু সীমাবদ্ধতা নিয়ে তৈরি করা হয়। এর মধ্যে কিছু নির্দিষ্ট ট্যাগ, নিয়ম এবং কনফিগারেশন রয়েছে যা পেজের লোডিং টাইম কমায় এবং মোবাইল-ফ্রেন্ডলি করে। এটি ওয়েব পেজের কার্যকারিতা, গতি এবং অপটিমাইজেশন নিশ্চিত করতে সহায়তা করে।
AMP HTML পেজের জন্য মূল উপাদানগুলো হলো:
- বিশেষ ট্যাগ (Custom Tags):
- AMP HTML-এ কিছু বিশেষ ট্যাগ রয়েছে যা সাধারণ HTML এ ব্যবহৃত হয় না। উদাহরণস্বরূপ,
<amp-img>ট্যাগ ইমেজ লোডিংকে অপ্টিমাইজ করতে ব্যবহৃত হয়, যা সাধারণ<img>ট্যাগের তুলনায় অনেক দ্রুত লোড হয়।
- AMP HTML-এ কিছু বিশেষ ট্যাগ রয়েছে যা সাধারণ HTML এ ব্যবহৃত হয় না। উদাহরণস্বরূপ,
- কাস্টমাইজড CSS:
- AMP HTML পেজে ব্যবহৃত CSS কোড সীমিত এবং সংক্ষিপ্ত। এটি ৫০ কিলোবাইটের মধ্যে থাকতে হয়, যাতে পেজের লোড টাইম কমানো যায়।
- JavaScript সীমাবদ্ধতা:
- AMP HTML পেজে সাধারণ JavaScript ব্যবহারের অনুমতি নেই। AMP JS (JavaScript লাইব্রেরি) ব্যবহৃত হয়, যা পেজের পারফরম্যান্স অপ্টিমাইজ করে এবং দ্রুত লোড নিশ্চিত করে। সাধারণ JavaScript কোডের মাধ্যমে যেকোনো ফিচার বা কার্যক্রম ব্যবহার করা নিষেধ।
- AMP-সাপোর্টেড কম্পোনেন্টস:
- AMP HTML পেজে কিছু নির্দিষ্ট কম্পোনেন্ট রয়েছে যা স্বয়ংক্রিয়ভাবে দ্রুত লোড হয়। উদাহরণস্বরূপ,
<amp-analytics>,<amp-carousel>,<amp-video>ইত্যাদি, যা পেজের লোডিং টাইম কমায় এবং ইন্টারেক্টিভ উপাদানগুলো দ্রুত রেন্ডার করে।
- AMP HTML পেজে কিছু নির্দিষ্ট কম্পোনেন্ট রয়েছে যা স্বয়ংক্রিয়ভাবে দ্রুত লোড হয়। উদাহরণস্বরূপ,
- AMP Cache:
- গুগলের AMP Cache-এ AMP পেজগুলো ক্যাশ করে রাখা হয়, যা পেজ রেন্ডারিং আরও দ্রুত করে তোলে।
AMP HTML কেন ব্যবহৃত হয়?
- দ্রুত লোডিং:
- AMP HTML পেজগুলি মোবাইল ডিভাইসে দ্রুত লোড হয়, কারণ এটি শুধুমাত্র প্রয়োজনীয় উপাদান ব্যবহার করে এবং সিম্পল কনটেন্ট রেন্ডার করে। এটি পেজের লোডিং টাইম দ্রুত করে, যা মোবাইল ব্যবহারকারীদের জন্য অত্যন্ত গুরুত্বপূর্ণ।
- ব্যবহারকারী অভিজ্ঞতা উন্নত করা:
- AMP HTML ব্যবহারকারীদের জন্য আরও মসৃণ এবং দ্রুত অভিজ্ঞতা প্রদান করে। এটি মোবাইল ইন্টারনেটের ধীর গতির পরিস্থিতিতেও ওয়েব পেজকে দ্রুত প্রদর্শন করে, ফলে ব্যবহারকারীরা দীর্ঘসময় অপেক্ষা না করেই তাদের প্রয়োজনীয় কন্টেন্ট দেখতে পারেন।
- SEO (Search Engine Optimization):
- গুগল AMP HTML পেজগুলোকে মোবাইল-ফ্রেন্ডলি হিসেবে চিহ্নিত করে এবং এগুলোর জন্য আরও উচ্চ র্যাঙ্কিং দেয়। এতে ওয়েবসাইটের ভিজিটর সংখ্যা বৃদ্ধি পায় এবং SEO উন্নত হয়।
- মোবাইল-ফ্রেন্ডলি ওয়েবসাইট:
- মোবাইল ডিভাইসে ইন্টারনেট ব্রাউজিং জনপ্রিয়তার কারণে মোবাইল-ফ্রেন্ডলি ওয়েবসাইটের চাহিদা বেড়েছে। AMP HTML মোবাইলের জন্য বিশেষভাবে তৈরি, যা ওয়েব পেজগুলোর পারফরম্যান্স উন্নত করে।
- রেসপন্সিভ ডিজাইন:
- AMP HTML পেজগুলি স্বয়ংক্রিয়ভাবে রেসপন্সিভ হয়, অর্থাৎ বিভিন্ন স্ক্রীন সাইজে এবং ডিভাইসে সঠিকভাবে কাজ করে। এটি ডেভেলপারদের জন্য একটি সুবিধা, কারণ তাদের আলাদাভাবে ডিজাইন করতে হয় না।
- এডভার্টাইজিং অপ্টিমাইজেশন:
- AMP HTML এর মাধ্যমে বিজ্ঞাপন দ্রুত লোড হয় এবং এটি বিজ্ঞাপনদাতাদের জন্য উপকারী। কারণ পেজের লোডিং সময় কমাতে বিজ্ঞাপনগুলো আরও দ্রুত প্রদর্শিত হয়।
- গুগল AMP Cache:
- গুগল AMP Cache ব্যবহারের মাধ্যমে পেজগুলি দ্রুত লোড করা যায়, কারণ গুগল সার্ভারে পেজগুলো ক্যাশে থাকে এবং ব্যবহারকারীরা এই ক্যাশ থেকে দ্রুত পেজ দেখতে পারে।
AMP HTML এর সুবিধা
- দ্রুত লোডিং: পেজের লোডিং টাইম কমানো হয়।
- SEO উন্নতি: গুগল সার্চ র্যাঙ্কিং বৃদ্ধি পায়।
- ব্যবহারকারী অভিজ্ঞতা: মোবাইল ব্যবহারকারীদের জন্য উন্নত অভিজ্ঞতা প্রদান।
- সহজ অপটিমাইজেশন: ওয়েব পেজগুলো দ্রুত এবং সহজে অপ্টিমাইজ করা যায়।
- অ্যাডভার্টাইজিং সুবিধা: বিজ্ঞাপন দ্রুত লোড হয় এবং প্রদর্শিত হয়।
এভাবে, AMP HTML মোবাইল ওয়েবসাইটের জন্য একটি শক্তিশালী প্রযুক্তি, যা দ্রুত লোডিং নিশ্চিত করতে এবং মোবাইল ব্যবহারকারীদের জন্য উন্নত অভিজ্ঞতা প্রদান করতে সাহায্য করে।
AMP (Accelerated Mobile Pages) পেজ তৈরির জন্য কিছু নির্দিষ্ট ট্যাগ এবং কাঠামো রয়েছে, যা অবশ্যই ব্যবহার করতে হয়। এগুলি AMP পেজের ফাংশনালিটি এবং পারফরম্যান্স নিশ্চিত করতে সহায়ক। এখানে AMP পেজ তৈরির জন্য প্রয়োজনীয় কিছু মূল ট্যাগের আলোচনা করা হল:
1. <!DOCTYPE html>
- ডকটাইপ (DOCTYPE): AMP পেজের জন্য HTML ডকটাইপ অবশ্যই
<!DOCTYPE html>হওয়া উচিত, যাতে ব্রাউজার বুঝতে পারে যে এটি একটি HTML5 পেজ এবং AMP প্রযুক্তি ব্যবহার করা হচ্ছে।
<!DOCTYPE html>2. <html ⚡>
- AMP HTML রুট ট্যাগ: AMP পেজের প্রধান HTML ট্যাগে
⚡(থান্ডারবোল্ট চিহ্ন) চিহ্নটি থাকতে হবে, যা AMP প্রযুক্তি ব্যবহৃত হচ্ছে তা ব্রাউজারকে জানায়। এটি AMP পেজের একটি বিশেষ বৈশিষ্ট্য।
<html ⚡ lang="en">- এখানে
lang="en"প্যারামিটার ব্যবহার করে পেজের ভাষা নির্ধারণ করা হয়। আপনি এটি আপনার পেজের ভাষা অনুসারে পরিবর্তন করতে পারেন (যেমন:lang="bn"বাংলা ভাষার জন্য)।
3. <head>
- হেড সেকশন: AMP পেজের হেড সেকশনটি অন্যান্য HTML পেজের মতোই থাকে, তবে এখানে কিছু নির্দিষ্ট নিয়ম মেনে কাজ করতে হয়।
- একটি AMP পেজের হেডে কিছু অতিরিক্ত ট্যাগ থাকতে হবে যেমন
amp-font,metaট্যাগ, এবং AMP সাপোর্টেড স্ক্রিপ্ট।
প্রয়োজনীয় হেড ট্যাগগুলির মধ্যে কিছু:
<meta charset="utf-8">: পেজের ক্যারেক্টার এনকোডিং সেট করার জন্য।<meta name="viewport" content="width=device-width, initial-scale=1">: মোবাইল ডিভাইসে রেসপন্সিভ ডিজাইন নিশ্চিত করতে।<script async src="https://cdn.ampproject.org/v0.js"></script>: AMP JS লাইব্রেরি লোড করতে।
উদাহরণ:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Page Example</title>
</head>4. <body>
- বডি সেকশন: AMP পেজের বডি সেকশন সাধারণ HTML পেজের মতো থাকে, তবে এতে কিছু নির্দিষ্ট বিধি রয়েছে।
- AMP পেজে শুধুমাত্র অনুমোদিত HTML ট্যাগ এবং উপাদান ব্যবহার করা যাবে, যেমন:
<amp-img>,<amp-video>,<amp-ad>, ইত্যাদি। সাধারণ<img>,<script>,<iframe>এর মতো ট্যাগগুলো ব্যবহার করা যাবে না।
প্রয়োজনীয় ট্যাগগুলির মধ্যে কিছু:
<amp-img>: ইমেজ ডিসপ্লে করতে।<amp-video>: ভিডিও কন্টেন্ট প্রদর্শন করতে।<amp-ad>: বিজ্ঞাপন প্লেসমেন্টের জন্য।
উদাহরণ:
<body>
<h1>Welcome to AMP Page</h1>
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>AMP পেজের একটি সাধারণ উদাহরণ:
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Example</title>
</head>
<body>
<h1>Welcome to AMP!</h1>
<amp-img src="https://example.com/image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>সংক্ষেপে:
<!DOCTYPE html>: HTML ডকটাইপ ডিফাইন করা।<html ⚡>: AMP HTML পেজের রুট ট্যাগ (⚡ চিহ্ন দিয়ে AMP প্রযুক্তি চিহ্নিত করা)।<head>: মেটা, স্ক্রিপ্ট এবং অন্যান্য ট্যাগ যা পেজের মেটাডেটা ধারণ করে।<body>: পেজের মূল কনটেন্ট যেখানে উপাদানগুলি যেমন ইমেজ, ভিডিও, টেক্সট থাকে।
এগুলো AMP পেজ তৈরির জন্য প্রাথমিক ও গুরুত্বপূর্ণ ট্যাগ, যা AMP পেজের দ্রুত লোডিং এবং ফাংশনালিটি নিশ্চিত করতে সহায়ক।
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>- অটো lazy loading:
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 এর সুবিধা
- দ্রুত লোডিং:
- AMP Custom Elements যেমন
<amp-img>,<amp-video>, এবং<amp-iframe>বিশেষভাবে ডিজাইন করা হয়েছে যাতে এগুলি কম সময়ের মধ্যে লোড হয় এবং পেজের পারফরম্যান্স উন্নত হয়।
- AMP Custom Elements যেমন
- Lazy Loading:
- এই উপাদানগুলো lazy loading সাপোর্ট করে, অর্থাৎ যখন ব্যবহারকারীর স্ক্রীনে উপাদানটি আসে তখনই তা লোড হয়। এর ফলে ওয়েব পেজের প্রাথমিক লোডিং সময় কমে যায়।
- প্রি-ডিফাইন্ড সাইজ:
- এগুলির জন্য সাইজ প্রি-ডিফাইন্ড থাকে, যার ফলে পেজের লেআউট সঠিকভাবে রেন্ডার হয় এবং উপাদানগুলো দ্রুত লোড হয়।
- পারফরম্যান্স অপ্টিমাইজেশন:
- AMP এই উপাদানগুলোকে দ্রুত লোড এবং অপ্টিমাইজড রেন্ডারিংয়ের জন্য বিশেষভাবে ডিজাইন করেছে, যাতে ওয়েবসাইটের পারফরম্যান্স আরও ভাল হয়, বিশেষ করে মোবাইল ডিভাইসের জন্য।
- SEO ফ্রেন্ডলি:
- AMP পেজগুলো গুগল সার্চ ইঞ্জিনে উচ্চ র্যাঙ্কিং পায়, কারণ এটি মোবাইল ফ্রেন্ডলি এবং দ্রুত লোড হয়।
সারাংশ
AMP-এর Custom Elements যেমন <amp-img>, <amp-video>, এবং <amp-iframe> মোবাইল ওয়েবসাইটের পারফরম্যান্স এবং লোডিং গতি উন্নত করতে সাহায্য করে। এগুলি ওয়েব পেজে দ্রুত লোড, সঠিক সাইজ এবং ইন্টারঅ্যাকটিভ কনটেন্ট যোগ করার জন্য অপ্টিমাইজড।
AMP (Accelerated Mobile Pages) এর Style এবং Layout Attributes বিশেষভাবে ডিজাইন করা হয় যাতে ওয়েব পেজগুলো দ্রুত লোড হয় এবং মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত হয়। AMP এর Style এবং Layout সম্পর্কে কিছু নির্দিষ্ট নিয়ম এবং নির্দেশিকা রয়েছে, যা ডেভেলপারদের দ্বারা অনুসরণ করা হয়।
AMP এর Style
AMP পেজের স্টাইলিং (CSS) এর জন্য কিছু নির্দিষ্ট বিধি এবং সীমাবদ্ধতা আছে। এর উদ্দেশ্য হল পেজের লোডিং টাইম কমানো এবং রেন্ডারিং প্রক্রিয়াকে দ্রুত করা।
সীমিত CSS আকার:
- AMP পেজের জন্য CSS কোডের আকার ৫০ KB-এর বেশি হতে পারে না। এর ফলে পেজের লোডিং টাইম কমানো যায় এবং পেজ দ্রুত রেন্ডার হয়।
- CSS কোডটি
<style amp-custom>ট্যাগের মধ্যে থাকা উচিত, যা পেজের হেড সেকশনে রাখতে হবে।
<style amp-custom> /* CSS কোড এখানে */ </style>- CSS ব্যবহার সীমিত:
- AMP সাইটে কিছু CSS প্রোপার্টি বা নিয়ম ব্যবহার করতে নিষেধ করা হয়, যেমন
@import(যে কোনও CSS ফাইল ইম্পোর্ট করা) বাposition: fixed(ফিক্সড পজিশন ব্যবহার করা)। - এছাড়া, বাইন্ডিং বা ডায়নামিক স্টাইলিং সিস্টেম (যেমন jQuery দিয়ে স্টাইল পরিবর্তন করা) গ্রহণযোগ্য নয়।
- AMP সাইটে কিছু CSS প্রোপার্টি বা নিয়ম ব্যবহার করতে নিষেধ করা হয়, যেমন
- AMP CSS বৈশিষ্ট্য:
- AMP তে আপনাকে ব্যবহার করতে হবে শুধুমাত্র নির্দিষ্ট CSS প্রোপার্টি এবং উপাদানগুলি, যাতে পেজের লোডিং দ্রুত হয়।
উদাহরণস্বরূপ,
amp-img(ইমেজ ট্যাগ) ব্যবহার করতে হলে কিছু নির্দিষ্ট স্টাইল নিয়ম অনুসরণ করতে হবে:<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
AMP এর Layout Attributes
AMP তে লেআউটের জন্য নির্দিষ্ট Layout Attributes ব্যবহার করা হয়, যা পেজের ডিজাইন এবং স্টাইলিং নির্ধারণ করে। এই লেআউট অ্যাট্রিবিউটগুলি AMP উপাদানগুলির জন্য বাধ্যতামূলক এবং এগুলি ব্যবহার করে পেজের ডিসপ্লে দ্রুত রেন্ডার করা হয়।
১. Layout Attributes এর ধরন
layout="fixed":- এই অ্যাট্রিবিউটটি ব্যবহার করা হয় যখন কোনো উপাদান (যেমন, ইমেজ) নির্দিষ্ট আকারে প্রদর্শিত হতে হবে।
- এটি উপাদানের আকার স্থির করে এবং কোনো প্রোপোরশনাল রূপে রেন্ডার হয় না।
<amp-img src="image.jpg" width="300" height="200" layout="fixed"></amp-img>layout="responsive":- এই অ্যাট্রিবিউটটি উপাদানকে রেসপন্সিভ আকারে তৈরি করে। অর্থাৎ, এটি ভিউপোর্টের আকার অনুযায়ী উপাদানের আকার অটো-স্কেল করবে।
- এটি সাধারণত ইমেজ, ভিডিও বা অন্যান্য মাল্টিমিডিয়া উপাদানের জন্য ব্যবহৃত হয়।
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>layout="intrinsic":- এই অ্যাট্রিবিউটটি উপাদানের প্রকৃত প্রোপোরশন অনুযায়ী আকার নির্ধারণ করে। এতে উপাদানটির স্বাভাবিক আকার বজায় থাকে, এবং এটি রেসপন্সিভ প্রক্রিয়ায় কাজ করে।
<amp-img src="image.jpg" width="600" height="400" layout="intrinsic"></amp-img>layout="fill":- এটি উপাদানটির আকার পূর্ণভাবে তার প্যারেন্ট কন্টেইনারের সঙ্গে মিলিয়ে দেয়। অর্থাৎ, কন্টেইনারের পুরো এলাকা ফিল করা হয়।
- এটি সাধারণত ব্যাকগ্রাউন্ড ইমেজ বা অন্যান্য পূর্ণ কভার উপাদানের জন্য ব্যবহৃত হয়।
<amp-img src="image.jpg" layout="fill"></amp-img>
২. কাস্টম লেআউট সিস্টেম
AMP প্রাথমিকভাবে পূর্বনির্ধারিত লেআউটের জন্য কয়েকটি আর্কিটেকচার ডিফাইন করেছে, যেমন <amp-layout> (যা সাধারণত কাস্টম লেআউট তৈরির জন্য ব্যবহার হয়)। তবে, এটি স্ট্যান্ডার্ড অ্যাট্রিবিউটগুলির উপর নির্ভরশীল এবং আপনাকে কাস্টম ডিজাইনের জন্য অতিরিক্ত CSS ব্যবহার করতে হবে।
৩. amp-iframe এর Layout
<amp-iframe> উপাদানটি সাধারণত অন্য ওয়েব পেজ বা কন্টেন্ট এমবেড করার জন্য ব্যবহৃত হয়। এটি কিছু নির্দিষ্ট লেআউট অ্যাট্রিবিউটের সঙ্গে আসে:
<amp-iframe src="https://example.com" width="600" height="400" layout="responsive"></amp-iframe>AMP এর Layout ট্যাগ ব্যবহার করা
AMP পেজে বিভিন্ন layout অ্যাট্রিবিউটের মধ্যে সঠিক নির্বাচন করা গুরুত্বপূর্ণ, কারণ এটি পেজের উপাদানগুলো কিভাবে রেন্ডার হবে তা নির্ধারণ করে। যেহেতু AMP পেজগুলো দ্রুত লোড হওয়ার জন্য ডিজাইন করা হয়েছে, তাই এই লেআউট অ্যাট্রিবিউটগুলো অ্যাডজাস্ট করা হয় যাতে পেজ দ্রুত প্রদর্শিত হয়।
AMP Style এবং Layout-এ গুরুত্বপূর্ণ পয়েন্ট
- CSS সীমাবদ্ধতা: AMP পেজের জন্য CSS কোড সীমিত থাকতে হয় এবং ৫০ KB-এর বেশি হতে পারে না।
- স্টাইল প্রোপার্টি: CSS স্টাইলের অনেক সাধারণ প্রোপার্টি AMP তে ব্যবহার করা যায় না, যেমন
position: fixed,@import, এবংfloat। - লেআউট অ্যাট্রিবিউট: AMP সাইটে পেজের লেআউট দ্রুত রেন্ডার করতে বিভিন্ন অ্যাট্রিবিউট ব্যবহার করা হয়, যেমন
layout="fixed",layout="responsive",layout="fill"।
AMP এর স্টাইল এবং লেআউট অ্যাট্রিবিউটগুলির সঠিক ব্যবহার ওয়েব পেজের পারফরম্যান্স উন্নত করতে সাহায্য করে এবং দ্রুত রেন্ডারিং নিশ্চিত করে।
Read more
