স্ট্যান্ডার্ডাইজড লোডিং অ্যাট্রিবিউট গ্রহণ করার জন্য লার্নিং
এই পোস্টের মাধ্যমে আমার লক্ষ্য হল CMS প্ল্যাটফর্ম ডেভেলপার ও কন্ট্রিবিউটরদের (অর্থাৎ, যারা CMS কোর ডেভেলপ করেন) বোঝানো যে এখনই সময় ব্রাউজার-লেভেল ইমেজ ধীরে ধীরে লোড করার ফিচার প্রয়োগ করার। এছাড়াও, আমি ব্যবহারকারীদের খুব ভালো কোয়ালিটির অভিজ্ঞতা নিশ্চিত করা এবং লেজি লোডিং প্রয়োগ করার সময় অন্যান্য ডেভেলপারদের দ্বারা কাস্টমাইজেশন চালু করা সংক্রান্ত সাজেশন শেয়ার করব। WordPress-এ সহায়তা যোগ করার পাশাপাশি Joomla, Drupal ও TYPO3-কে ফিচার প্রয়োগ করতে সাহায্য করার অভিজ্ঞতা থেকে এই নির্দেশিকা তৈরি করা হয়েছে।
আপনি CMS প্ল্যাটফর্ম ডেভেলপার বা CMS ব্যবহারকারী (অর্থাৎ, CMS-এর মাধ্যমে ওয়েবসাইট তৈরি করেন এমন ব্যক্তি) যাই হোন না কেন, আপনার CMS-এ ব্রাউজার-লেভেল ধীরে ধীরে লোড করার সুবিধা সম্পর্কে আরও জানতে এই পোস্টটি ব্যবহার করতে পারেন। আপনার CMS প্ল্যাটফর্মকে ধীরে ধীরে লোড করার পদ্ধতি প্রয়োগ করতে উৎসাহিত করার জন্য সাজেশন পেতে পরবর্তী ধাপ বিভাগটি দেখুন।
ব্যাকগ্রাউন্ড
গত এক বছর ধরে,
loading অ্যাট্রিবিউট ব্যবহার করে ধীরে ধীরে লোড হওয়া ছবি এবং iframe
WHATWG HTML স্ট্যান্ডার্ডের অংশ হয়ে উঠেছে
এবং
বিভিন্ন ব্রাউজার দ্বারা ক্রমবর্ধমানভাবে গৃহীত হয়েছে।
তবে, এই মাইলস্টোনগুলি শুধুমাত্র
আরও দ্রুত এবং আরও রিসোর্স-সেভিং ওয়েব-এর ভিত্তি স্থাপন করে।
loading অ্যাট্রিবিউট ব্যবহার করার জন্য এটি এখন ডিস্ট্রিবিউটেড ওয়েব ইকোসিস্টেমে রয়েছে।
কন্টেন্ট ম্যানেজমেন্ট সিস্টেম
প্রায় ৬০% ওয়েবসাইটকে শক্তি প্রদান করে,
তাই এই প্ল্যাটফর্মগুলি ওয়েবে আধুনিক ব্রাউজার ফিচার
গ্রহণ করার ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে। WordPress,
Joomla এবং
TYPO3-এর মতো কিছু জনপ্রিয় ওপেন-সোর্স CMS-এ
ইমেজের জন্য loading অ্যাট্রিবিউট সংক্রান্ত সহায়তা আগে থেকেই
প্রয়োগ করা হয়েছে। আসুন, তাদের পদ্ধতি এবং অন্যান্য CMS প্ল্যাটফর্মেও
ফিচারটি গ্রহণ করার জন্য প্রাসঙ্গিক টেকঅ্যাওয়েগুলি দেখে নেওয়া যাক। ধীরে ধীরে লোড হওয়া মিডিয়া হল একটি গুরুত্বপূর্ণ ওয়েব পারফর্ম্যান্স
ফিচার যা সাইটগুলিকে বড় স্কেলে সুবিধা প্রদান করে, তাই
CMS কোর লেভেলে এটি গ্রহণ করার জন্য সাজেস্ট করা হয়।
এখন ধীরে ধীরে লোড করার সুবিধা প্রয়োগ করার কারণ
স্ট্যান্ডার্ডাইজেশন
CMS-এ নন-স্ট্যান্ডার্ডাইজড ব্রাউজার ফিচার গ্রহণ করার ফলে ব্যাপকভাবে টেস্টিং করা সহজ হয় এবং উন্নতির সম্ভাব্য ক্ষেত্রগুলি সামনে আসতে পারে। তবে, CMS জুড়ে সাধারণ ঐকমত্য হল যে, যতক্ষণ না কোনও ব্রাউজার ফিচার স্ট্যান্ডার্ডাইজ করা হচ্ছে, ততক্ষণ সংশ্লিষ্ট প্ল্যাটফর্মের জন্য এক্সটেনশন বা প্লাগ-ইন হিসেবে এটি প্রয়োগ করা উচিত। কোনও ফিচার একবার স্ট্যান্ডার্ডাইজ করা হলে তবেই সেটি প্ল্যাটফর্মের কোরে ব্যবহারের জন্য বিবেচনা করা যেতে পারে।
ব্রাউজার সহায়তা
ফিচারের ব্রাউজার সাপোর্টও একই ধরনের উদ্বেগের বিষয়: CMS ব্যবহারকারীদের বেশিরভাগকেই ফিচার থেকে সুবিধা পেতে হবে। যদি এমন ব্রাউজারের শতাংশ উল্লেখযোগ্য হয় যেখানে ফিচারটি এখনও কাজ করে না, তাহলে ফিচারটিকে নিশ্চিত করতে হবে যে অন্ততপক্ষে সেইসব ব্রাউজারের ক্ষেত্রে যেন কোনও বিরূপ প্রভাব না পড়ে।
ভিউ-পোর্ট থেকে দূরত্বের থ্রেশহোল্ড
ধীরে ধীরে লোড করার ক্ষেত্রে একটি সাধারণ সমস্যা হল, ব্যবহারকারীর ভিউপোর্টে কোনও ছবি দৃশ্যমান হওয়ার পরেও সেটি লোড না হওয়ার সম্ভাবনা বেড়ে যায়, কারণ লোডিং চক্রটি পরে শুরু হয়। আগের জাভাস্ক্রিপ্ট-ভিত্তিক সমাধানের বিপরীতে, ব্রাউজারগুলি এটিকে রক্ষণশীলভাবে গ্রহণ করে এবং উপরন্তু বাস্তব-জগতের ব্যবহারকারীর অভিজ্ঞতা ডেটার উপর ভিত্তি করে তাদের পদ্ধতিকে ফাইন-টিউন করতে পারে, প্রভাব কমিয়ে দেয়, তাই ব্রাউজার-লেভেল ধীরে ধীরে লোড করা CMS প্ল্যাটফর্মের গ্রহণ করা নিরাপদ হওয়া উচিত।
ব্যবহারকারীর অভিজ্ঞতা সংক্রান্ত সাজেশন
এলিমেন্টে ডাইমেনশন অ্যাট্রিবিউট প্রয়োজন
লেআউট শিফ্ট এড়াতে,
দীর্ঘদিন ধরে এই সাজেশন দেওয়া হচ্ছে যে
ছবি বা iframe-এর মতো এম্বেড করা কন্টেন্টে সবসময় ডাইমেনশন অ্যাট্রিবিউট width ও height থাকতে হবে,
যাতে ব্রাউজার আসলে সেগুলি লোড করার আগে
সেইসব এলিমেন্টের অ্যাস্পেক্ট রেশিও অনুমান করতে পারে। কোনও এলিমেন্ট ধীরে ধীরে লোড করা হচ্ছে কিনা তা নির্বিশেষে এই সাজেশন প্রাসঙ্গিক। তবে,
ভিউ পোর্টে একবার কোনও ছবি সম্পূর্ণ লোড না হওয়ার সম্ভাবনা ০.১% বেশি
হওয়ার কারণে, ধীরে ধীরে লোড করার ক্ষেত্রে এটি কিছুটা বেশি প্রযোজ্য হয়।
CMS-এর উচিত সব ছবি ও iframe-এ ডাইমেনশন অ্যাট্রিবিউট প্রদান করা। এই ধরনের প্রতিটি এলিমেন্টের জন্য এটি করা সম্ভব না হলে, এই দুটি অ্যাট্রিবিউট প্রদান করে না এমন ধীরে ধীরে লোড করা ছবি এড়িয়ে যাওয়ার সাজেশন দেওয়া হয়।
অ্যাবাভ-দ্য-ফোল্ড এলিমেন্ট ধীরে ধীরে লোড করা এড়িয়ে চলুন
বর্তমানে CMS-কে শুধুমাত্র বিলো-দ্য-ফোল্ডে থাকা ছবি ও iframe-এ loading="lazy" অ্যাট্রিবিউট যোগ করার সাজেশন দেওয়া হয়, যাতে লার্জেস্ট কন্টেন্টফুল পেন্ট মেট্রিক্সে দেরি না হয়। কিছু ক্ষেত্রে এটি গুরুত্বপূর্ণ হতে পারে, যেমন জুলাই ২০২১-এ দেখা গেছে। তবে, এটি স্বীকার করতে হবে যে রেন্ডারিং প্রসেসের আগে ভিউপোর্টের সাপেক্ষে কোনও এলিমেন্টের পজিশন মূল্যায়ন করা জটিল। এটি বিশেষ করে প্রযোজ্য হয়
যদি CMS loading অ্যাট্রিবিউট যোগ করার জন্য অটোমেটেড পদ্ধতি ব্যবহার করে, তবে
ম্যানুয়াল হস্তক্ষেপের ভিত্তিতেও বিভিন্ন ভিউপোর্ট সাইজ এবং অ্যাস্পেক্ট রেশিওর মতো
বিভিন্ন বিষয় বিবেচনা করতে হবে। তবুও, অনেক বড় ছবি এবং অন্যান্য ছবি বা iframe যা ধীরে ধীরে লোড হওয়ার কারণে ফোল্ডের উপরে দেখা যেতে পারে, সেগুলি বাদ দেওয়ার জন্য বিশেষভাবে সাজেস্ট করা হয়।
জাভাস্ক্রিপ্ট ফলব্যাক এড়িয়ে চলুন
যদিও জাভাস্ক্রিপ্ট ব্যবহার করে
এমন ব্রাউজারে ধীরে ধীরে লোড করার সুবিধা প্রদান করা যায় যেগুলি (এখনও) loading অ্যাট্রিবিউট সাপোর্ট করে না,
এই ধরনের মেকানিজম সবসময় কোনও ছবি বা iframe-এর src অ্যাট্রিবিউট প্রাথমিকভাবে সরিয়ে দেওয়ার উপর নির্ভর করে,
যার ফলে যেসব ব্রাউজার অ্যাট্রিবিউট সাপোর্ট করে, সেগুলিতে দেরি হয়। এছাড়াও, বড় আকারের CMS-এর ফ্রন্টএন্ডে এই ধরনের জাভাস্ক্রিপ্ট-ভিত্তিক সমাধান রোল-আউট করলে,
সম্ভাব্য সমস্যার ক্ষেত্র বৃদ্ধি পায়।
এই কারণেই, ব্রাউজারের স্ট্যান্ডার্ড ফিচার হিসেবে ধীরে ধীরে লোড করার সুবিধা চালু হওয়ার আগে,
কোনও বড় CMS-এর মূল অংশে এই সুবিধা গ্রহণ করা হয়নি।
প্রযুক্তিগত সাজেশন
ডিফল্ট হিসেবে ধীরে ধীরে লোড করার সুবিধা চালু করুন
ব্রাউজার-লেভেল ধীরে ধীরে লোড করার সুবিধা প্রয়োগকারী CMS-এর জন্য সামগ্রিক সাজেশন হল
ডিফল্ট হিসেবে এটি চালু করা, অর্থাৎ loading="lazy" ছবি ও
iframe-এ যোগ করা উচিত, বিশেষত
শুধুমাত্র সেইসব এলিমেন্টের জন্য যেগুলিতে ডাইমেনশন অ্যাট্রিবিউট অন্তর্ভুক্ত থাকে।
ডিফল্ট হিসেবে ফিচারটি চালু করা থাকলে, ম্যানুয়ালি চালু করার তুলনায় নেটওয়ার্ক রিসোর্স
আরও বেশি সাশ্রয় হবে, যেমন প্রতিটি ছবির
ক্ষেত্রে।
যতটা সম্ভব, loading="lazy"
শুধুমাত্র সেইসব এলিমেন্টে যোগ করা উচিত যেগুলি সম্ভবত ফোল্ডের নিচে দেখা যায়।
ক্লায়েন্ট-সাইড সচেতনতা এবং বিভিন্ন ভিউপোর্ট সাইজের অভাবের কারণে CMS-এর জন্য এই প্রয়োজনীয়তা প্রয়োগ করা জটিল হতে পারে, তবে অন্তত অনেক বড় ছবির মতো এলিমেন্ট বাদ দেওয়ার জন্য আনুমানিক হিউরিস্টিক ব্যবহার করার সাজেশন দেওয়া হয়, যা সম্ভবত ধীরে ধীরে লোড হওয়া থেকে অ্যাবাভ-দ্য-ফোল্ডে দেখা যাবে।
প্রতিটি এলিমেন্ট পরিবর্তন করার অনুমতি দিন
ডিফল্ট হিসেবে ছবি ও iframe-এ loading="lazy" যোগ করা উচিত, তবে কিছু ছবিতে অ্যাট্রিবিউট বাদ দেওয়ার অনুমতি দেওয়া
গুরুত্বপূর্ণ, যেমন LCP-এর জন্য
অপ্টিমাইজ করা। CMS-এর দর্শক যদি
গড়ে প্রযুক্তি-দক্ষ হন, তাহলে প্রতিটি ছবি ও iframe-এর জন্য UI কন্ট্রোল দেখানো যেতে পারে, যাতে সেই এলিমেন্টের জন্য ধীরে ধীরে লোড করার বিকল্প থেকে বেরিয়ে আসা যায়।
বিকল্প হিসেবে বা এর সাথে, থার্ড-পার্টি ডেভেলপারদের জন্য API প্রকাশ করা যেতে পারে
যাতে তারা কোডের মাধ্যমে একই ধরনের পরিবর্তন করতে পারে।
যেমন, WordPress-এ loading অ্যাট্রিবিউট এড়িয়ে যাওয়ার অনুমতি দেওয়া হয়, হয়
পুরো HTML ট্যাগ বা প্রসঙ্গের
জন্য অথবা
কন্টেন্টে নির্দিষ্ট HTML এলিমেন্টের জন্য।
আগে থেকে থাকা কন্টেন্ট রেট্রোফিট করা
CMS-এ HTML এলিমেন্টে loading অ্যাট্রিবিউট যোগ করার জন্য
দুটি পদ্ধতি আছে:
- ব্যাকএন্ডে কন্টেন্ট এডিটরের মধ্যে থেকে অ্যাট্রিবিউট যোগ করুন, ডেটাবেসে এটি স্থায়ীভাবে সেভ করুন।
- ফ্রন্টএন্ডে ডেটাবেস থেকে কন্টেন্ট রেন্ডার করার সময় অ্যাট্রিবিউট যোগ করুন।
CMS-এর জন্য সাজেস্ট করা হয় যে রেন্ডার করার সময় অ্যাট্রিবিউট যোগ করার বিকল্প বেছে নিন, যাতে আগে থেকে থাকা যেকোনও কন্টেন্টের ক্ষেত্রেও ধীরে ধীরে লোড করার সুবিধা পাওয়া যায়। অ্যাট্রিবিউটটি যদি শুধুমাত্র এডিটরের মাধ্যমে যোগ করা যেত, তাহলে শুধুমাত্র নতুন বা সম্প্রতি পরিবর্তিত কন্টেন্টই সুবিধা পেত, যার ফলে নেটওয়ার্ক রিসোর্স বাঁচানোর ক্ষেত্রে CMS-এর প্রভাব ব্যাপকভাবে কমে যেত। এছাড়াও, ফ্লাইতে অ্যাট্রিবিউট যোগ করলে ভবিষ্যতে সহজেই পরিবর্তন করা যাবে, যদি ব্রাউজার-লেভেল ধীরে ধীরে লোড করার ক্ষমতা আরও বাড়ানো হয়।
অ্যাট্রিবিউট যোগ করার সময়, এলিমেন্টে আগে থেকে থাকা loading অ্যাট্রিবিউটকে
অগ্রাধিকার দিতে হবে। এইভাবে, CMS বা এর জন্য কোনও এক্সটেনশনও ডুপ্লিকেট অ্যাট্রিবিউটের সাথে কোনও বিরোধ না ঘটিয়ে
এডিটর-চালিত পদ্ধতি প্রয়োগ করতে পারে।
সার্ভার-সাইড পারফর্ম্যান্স অপ্টিমাইজ করা
সার্ভার-সাইড মিডলওয়্যার ব্যবহার করে কন্টেন্টে loading অ্যাট্রিবিউট যোগ করার সময়, স্পিড একটি গুরুত্বপূর্ণ বিষয়। CMS-এর উপর নির্ভর করে, অ্যাট্রিবিউটটি DOM ট্রাভার্সাল বা রেগুলার এক্সপ্রেশনের মাধ্যমে যোগ করা যেতে পারে, যার মধ্যে পারফর্ম্যান্সের জন্য পরেরটি সাজেস্ট করা হয়।
রেগুলার এক্সপ্রেশনের ব্যবহার যতটা সম্ভব কম করা উচিত, যেমন একটি রেগুলার এক্সপ্রেশন
যা কন্টেন্টের সব img এবং iframe ট্যাগ এবং তাদের অ্যাট্রিবিউট সংগ্রহ করে
এবং তারপর প্রতিটি ট্যাগ স্ট্রিংয়ে প্রযোজ্য হলে loading অ্যাট্রিবিউট
যোগ করে। উদাহরণস্বরূপ, WordPress-এর ক্ষেত্রে
নির্দিষ্ট এলিমেন্টে বিভিন্ন অন-দ্য-ফ্লাই অপারেশন করার জন্য একটি সাধারণ রেগুলার এক্সপ্রেশন থাকে,
যার মধ্যে loading="lazy" যোগ করা হল একটি, একাধিক ফিচার সহজ করার জন্য
একটি রেগুলার এক্সপ্রেশন ব্যবহার করা হয়। এই ধরনের অপ্টিমাইজেশন হল আরও একটি কারণ যার জন্য CMS-এর কোরে এক্সটেনশনের পরিবর্তে ধীরে ধীরে লোড করার পদ্ধতি ব্যবহার করার সাজেশন দেওয়া হয় - এটি সার্ভার-সাইড পারফর্ম্যান্স আরও ভালোভাবে অপ্টিমাইজ করতে সাহায্য করে।
পরবর্তী ধাপ
আপনার CMS-এ ফিচারটির জন্য সহায়তা যোগ করতে কোনও বিদ্যমান ফিচার অনুরোধ টিকিট আছে কিনা তা দেখুন, অথবা এখনও পর্যন্ত কোনও টিকিট না থাকলে একটি নতুন টিকিট খুলুন। আপনার প্রস্তাবের সমর্থনে প্রয়োজন অনুযায়ী এই পোস্টের রেফারেন্স ব্যবহার করুন।
প্রশ্ন বা কমেন্টের জন্য আমাকে টুইট (felixarntz@) করুন অথবা ব্রাউজার-লেভেল ধীরে ধীরে লোড করার জন্য সহায়তা যোগ করা হলে, এই পৃষ্ঠায় আপনার CMS তালিকাভুক্ত করার জন্য টুইট করুন। আপনি অন্য কোনও সমস্যার সম্মুখীন হলে, আমি সেগুলির ব্যাপারেও আরও জানতে আগ্রহী যাতে আশা করি কোনও সমাধান খুঁজে পাওয়া যায়।
আপনি CMS প্ল্যাটফর্ম ডেভেলপার হলে, অন্যান্য CMS কীভাবে ধীরে ধীরে লোড করার পদ্ধতি প্রয়োগ করেছে তা ভালোভাবে দেখুন:
আপনার রিসার্চ থেকে পাওয়া শিক্ষা এবং এই পোস্ট থেকে পাওয়া টেকনিক্যাল সাজেশন ব্যবহার করে আপনার CMS-এ কোড কন্ট্রিবিউট করা শুরু করতে পারেন, যেমন প্যাচ বা পুল-রিকোয়েস্টের ফর্মে।