AMP (Accelerated Mobile Pages) Framework ডাউনলোড এবং ইনস্টলেশন প্রক্রিয়া বেশ সোজা এবং ডেভেলপাররা এর জন্য একটি নির্দিষ্ট ফ্রেমওয়ার্ক ব্যবহার করে AMP পেজ তৈরি করতে পারেন। AMP প্রকল্পটি গুগল কর্তৃক ওপেন সোর্স হিসেবে তৈরি হওয়ায় এটি ব্যবহার করা এবং ইনস্টল করা বেশ সহজ। নিচে AMP ফ্রেমওয়ার্ক ডাউনলোড এবং ইনস্টল করার ধাপগুলি দেওয়া হল।
AMP Framework ডাউনলোড এবং ইনস্টলেশন
১. AMP HTML ফ্রেমওয়ার্ক ডাউনলোড করা
AMP পেজ তৈরি করতে আপনি AMP HTML ব্যবহার করবেন। AMP HTML একটি নির্দিষ্ট HTML ফরম্যাট যা AMP পেজ তৈরি করতে সাহায্য করে। AMP HTML কোডের জন্য বিশেষভাবে নির্দিষ্ট কিছু ট্যাগ ব্যবহার করা হয়।
- ডাউনলোড না করেও কাজ করা যাবে: আপনি AMP ফ্রেমওয়ার্কের ফাইলগুলো ডাউনলোড করার প্রয়োজন নেই। AMP পেজ তৈরি করতে আপনাকে শুধুমাত্র AMP HTML ফরম্যাট এবং AMP JS লাইব্রেরি ব্যবহার করতে হবে।
- জাভাস্ক্রিপ্ট ফাইল লোড করুন: AMP পেজ তৈরির জন্য আপনাকে AMP JS লাইব্রেরি লোড করতে হবে, যা পেজের উপাদানগুলো দ্রুত রেন্ডার করতে সহায়তা করবে।
<script async src="https://cdn.ampproject.org/v0.js"></script>২. AMP পেজ তৈরি করা
AMP পেজ তৈরি করার জন্য সাধারণ HTML ডকুমেন্টের মতো একটি HTML ফাইল তৈরি করুন, তবে এটি অবশ্যই AMP নির্দিষ্ট HTML ট্যাগ ব্যবহার করবে।
AMP HTML টেমপ্লেট:
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>AMP Page Example</title>
<link rel="canonical" href="self.html">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
/* Custom Styles Here */
body { font-family: Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to AMP Page</h1>
<amp-img src="example.jpg" width="600" height="400" layout="responsive" alt="Image Example"></amp-img>
</body>
</html>৩. AMP JS লোড করা
AMP পেজে JavaScript এর ব্যবহার সীমিত থাকে, তবে আপনাকে অবশ্যই AMP JS লাইব্রেরি লোড করতে হবে। এটি পেজের দ্রুত রেন্ডারিং নিশ্চিত করবে। যেমন:
<script async src="https://cdn.ampproject.org/v0.js"></script>এটি HTML ডকুমেন্টের <head> সেকশনে যোগ করতে হবে।
৪. AMP CSS লিমিটেশন
AMP পেজের জন্য স্টাইল শীট (CSS) ছোট এবং অপ্টিমাইজড হতে হবে। AMP-এ CSS এর আকার ৫০ KB এর বেশি হতে পারবে না। তাই আপনাকে কোডের আকার ছোট রাখতে হবে।
<style amp-custom>
body { font-family: Arial, sans-serif; }
h1 { color: blue; }
</style>৫. AMP Cache এবং ক্যাশিং সিস্টেম
গুগল AMP Cache ব্যবহার করে পেজগুলো দ্রুত লোড হয়। পেজগুলো গুগলের সার্ভারে ক্যাশ করে রাখা হয়, যার ফলে ব্যবহারকারীরা যখন AMP পেজে প্রবেশ করে, তখন এটি দ্রুত লোড হয়।
৬. প্রয়োজনীয় টুলস এবং লাইব্রেরি
AMP ফ্রেমওয়ার্ক ব্যবহার করার জন্য আপনি কিছু বিশেষ টুল এবং লাইব্রেরি ব্যবহার করতে পারেন:
- AMP Validator: AMP পেজের সঠিকতা পরীক্ষা করার জন্য AMP Validator ব্যবহার করা হয়। এটি নিশ্চিত করবে যে পেজটি AMP স্ট্যান্ডার্ড অনুসরণ করছে।
- AMP Validator টুল: AMP Validator
- AMP Boilerplate Code: AMP প্রকল্পের অফিসিয়াল ওয়েবসাইটে অনেক টেমপ্লেট এবং বয়লারপ্লেট কোড সরবরাহ করা হয়, যা আপনি ব্যবহার করতে পারেন।
- অফিসিয়াল AMP ডকুমেন্টেশন: AMP Docs
৭. AMP পেজ ডেভেলপমেন্ট লাইফসাইকেল
AMP পেজ তৈরি করার পর, ডেভেলপারদের একটি নির্দিষ্ট পদ্ধতিতে সেগুলিকে তৈরি ও পরীক্ষা করতে হয়:
- পেজের গঠন চেক করা: HTML, CSS এবং JavaScript ফাইলের আকার এবং কোডের সঠিকতা নিশ্চিত করা।
- AMP সাইটের পারফরম্যান্স পরীক্ষা: আপনি Google PageSpeed Insights ব্যবহার করে AMP পেজের পারফরম্যান্স পরীক্ষা করতে পারেন এবং যেখানে প্রয়োজন সেখানে অপ্টিমাইজেশন করতে পারেন।
৮. AMP ইনস্টল করা:
AMP পেজ তৈরির জন্য আপনার সিস্টেমে কোনো নির্দিষ্ট ইনস্টলেশন প্রক্রিয়া নেই, তবে আপনি যদি AMP CLI বা AMP DevTools ব্যবহার করতে চান, তাহলে আপনাকে Node.js ইনস্টল করতে হতে পারে।
AMP CLI ইনস্টল করা (Optional):
AMP ডেভেলপমেন্টের জন্য আপনি AMP CLI ব্যবহার করতে পারেন যা Node.js ভিত্তিক। এই টুলটি ইনস্টল করতে হলে নিচের কমান্ড ব্যবহার করুন:
npm install -g @ampproject/toolbox-cliএটি আপনার প্রজেক্টে AMP পেজগুলি দ্রুত তৈরি এবং পরীক্ষা করতে সাহায্য করবে।
সারাংশ
AMP ফ্রেমওয়ার্কের মাধ্যমে মোবাইল-ফ্রেন্ডলি ওয়েব পেজ দ্রুত লোড করা যায়। ইনস্টলেশন প্রক্রিয়া সহজ, তবে ডেভেলপারদের AMP HTML ট্যাগ এবং AMP JS লাইব্রেরি ব্যবহার করে পেজ তৈরি করতে হয়। আপনি AMP পেজ ডেভেলপ করার জন্য কোনো নির্দিষ্ট টুল বা লাইব্রেরি ডাউনলোড না করেও কাজ করতে পারেন, কিন্তু AMP CLI এবং Validator টুল ব্যবহার করলে ডেভেলপমেন্ট আরো সহজ হবে।
Read more
