CMS-এর জন্য ব্রাউজার-স্তরের অলস লোডিং

প্রমিত লোডিং বৈশিষ্ট্য গ্রহণের জন্য শিক্ষা

ফেলিক্স আর্ন্টজ

এই পোস্টের সাথে আমার লক্ষ্য হল CMS প্ল্যাটফর্ম ডেভেলপার এবং অবদানকারীদের (অর্থাৎ যারা CMS কোর তৈরি করে) রাজি করানো যে এখন ব্রাউজার-লেভেল ইমেজ অলস লোডিং বৈশিষ্ট্যের জন্য সমর্থন বাস্তবায়নের সময় । আমি কীভাবে উচ্চ-মানের ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করতে পারি এবং অলস লোডিং বাস্তবায়নের সময় অন্যান্য বিকাশকারীদের দ্বারা কাস্টমাইজেশন সক্ষম করতে পারি সে সম্পর্কে সুপারিশগুলিও ভাগ করব৷ এই নির্দেশিকাগুলি ওয়ার্ডপ্রেসে সমর্থন যোগ করার পাশাপাশি জুমলা, ড্রুপাল এবং TYPO3 বৈশিষ্ট্যটি বাস্তবায়নে সহায়তা করার অভিজ্ঞতা থেকে এসেছে।

আপনি একজন সিএমএস প্ল্যাটফর্ম ডেভেলপার বা একজন সিএমএস ব্যবহারকারী (যেমন একজন ব্যক্তি যিনি একটি সিএমএস দিয়ে ওয়েবসাইট তৈরি করেন) তা নির্বিশেষে, আপনি আপনার সিএমএসে ব্রাউজার-স্তরের অলস লোডিংয়ের সুবিধাগুলি সম্পর্কে আরও জানতে এই পোস্টটি ব্যবহার করতে পারেন। আপনি কীভাবে আপনার CMS প্ল্যাটফর্মকে অলস লোডিং কার্যকর করতে উত্সাহিত করতে পারেন সে সম্পর্কে পরামর্শের জন্য পরবর্তী পদক্ষেপ বিভাগটি দেখুন।

পটভূমি

গত এক বছরে, loading অ্যাট্রিবিউট ব্যবহার করে অলস লোডিং ইমেজ এবং আইফ্রেমগুলি WHATWG HTML স্ট্যান্ডার্ডের অংশ হয়ে উঠেছে এবং বিভিন্ন ব্রাউজার দ্বারা ক্রমবর্ধমান গ্রহণ করা হয়েছে । তবে এই মাইলফলকগুলি শুধুমাত্র একটি দ্রুত এবং আরও সম্পদ-সঞ্চয়কারী ওয়েবের ভিত্তি স্থাপন করে৷ loading অ্যাট্রিবিউট ব্যবহার করার জন্য এটি এখন বিতরণ করা ওয়েব ইকোসিস্টেমে রয়েছে।

কন্টেন্ট ম্যানেজমেন্ট সিস্টেমগুলি প্রায় 60% ওয়েবসাইটগুলিকে শক্তিশালী করে , তাই এই প্ল্যাটফর্মগুলি ওয়েবে আধুনিক ব্রাউজার বৈশিষ্ট্যগুলি গ্রহণ করার ক্ষেত্রে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে৷ কিছু জনপ্রিয় ওপেন-সোর্স সিএমএস যেমন WordPress , জুমলা , এবং TYPO3 ইতিমধ্যে ইমেজগুলিতে loading অ্যাট্রিবিউটের জন্য সমর্থন প্রয়োগ করেছে, আসুন তাদের পন্থাগুলি এবং অন্যান্য CMS প্ল্যাটফর্মগুলিতেও বৈশিষ্ট্যটি গ্রহণ করার জন্য প্রাসঙ্গিক উপায়গুলি দেখে নেওয়া যাক . অলস লোডিং মিডিয়া হল একটি মূল ওয়েব পারফরম্যান্স বৈশিষ্ট্য যা সাইটগুলিকে বৃহৎ পরিসরে উপকৃত হওয়া উচিত, তাই এটিকে CMS কোর স্তরে গ্রহণ করার পরামর্শ দেওয়া হয়।

এখন অলস লোডিং বাস্তবায়নের জন্য মামলা

প্রমিতকরণ

সিএমএস-এ অ-প্রমিত ব্রাউজার বৈশিষ্ট্যগুলি গ্রহণ করা ব্যাপক পরীক্ষার সুবিধা দেয় এবং উন্নতির সম্ভাব্য ক্ষেত্রগুলিকে সামনে আনতে পারে। যাইহোক, CMS জুড়ে সাধারণ ঐকমত্য হল, যতক্ষণ পর্যন্ত একটি ব্রাউজার বৈশিষ্ট্য মানসম্মত না হয়, ততক্ষণ এটি সংশ্লিষ্ট প্ল্যাটফর্মের জন্য একটি এক্সটেনশন বা প্লাগইন আকারে প্রয়োগ করা উচিত। শুধুমাত্র একবার মানসম্মত হলেই প্ল্যাটফর্ম কোরে একটি বৈশিষ্ট্য গ্রহণের জন্য বিবেচনা করা যেতে পারে।

ব্রাউজার সমর্থন

বৈশিষ্ট্যটির ব্রাউজার সমর্থন একটি অনুরূপ উদ্বেগের বিষয়: সিএমএস ব্যবহারকারীদের বেশিরভাগই বৈশিষ্ট্যটি থেকে উপকৃত হতে সক্ষম হওয়া উচিত। যদি এমন একটি উল্লেখযোগ্য শতাংশ ব্রাউজার থাকে যেখানে বৈশিষ্ট্যটি এখনও সমর্থিত নয়, তবে বৈশিষ্ট্যটিকে নিশ্চিত করতে হবে যে এটি তাদের জন্য অন্তত কোনও বিরূপ প্রভাব ফেলবে না।

ভিউপোর্ট থ্রেশহোল্ড থেকে দূরত্ব

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

ব্যবহারকারীর অভিজ্ঞতার সুপারিশ

উপাদানগুলিতে মাত্রা বৈশিষ্ট্য প্রয়োজন

লেআউট পরিবর্তন এড়াতে, এটি একটি দীর্ঘস্থায়ী সুপারিশ ছিল যে এমবেড করা সামগ্রী যেমন চিত্র বা আইফ্রেমগুলিতে সর্বদা মাত্রা বৈশিষ্ট্যগুলি width এবং height অন্তর্ভুক্ত করা উচিত , যাতে ব্রাউজার প্রকৃতপক্ষে সেগুলি লোড করার আগে সেই উপাদানগুলির আকৃতির অনুপাত অনুমান করতে পারে৷ একটি উপাদান অলস-লোড হচ্ছে কিনা তা নির্বিশেষে এই সুপারিশটি প্রাসঙ্গিক। যাইহোক, ভিউপোর্টে একবার ইমেজ সম্পূর্ণ লোড না হওয়ার 0.1% বেশি সম্ভাবনার কারণে এটি অলস লোডিংয়ের সাথে কিছুটা বেশি প্রযোজ্য হয়ে ওঠে।

সিএমএসগুলিকে সবকটি ছবি এবং আইফ্রেমে মাত্রার বৈশিষ্ট্য প্রদান করা উচিত। যদি এই ধরনের প্রতিটি উপাদানের জন্য এটি সম্ভব না হয়, তবে তাদের অলস লোডিং চিত্রগুলি এড়িয়ে যাওয়ার সুপারিশ করা হয় যা এই দুটি বৈশিষ্ট্য প্রদান করে না।

অলস লোডিং এড়িয়ে চলুন উপরে-ভাঁজ উপাদান

এই মুহুর্তে সিএমএসগুলিকে সুপারিশ করা হচ্ছে শুধুমাত্র loading="lazy" বৈশিষ্ট্যগুলি যোগ করার জন্য ইমেজ এবং আইফ্রেমগুলিতে যেগুলি ভাঁজের নীচে অবস্থান করা হয়েছে, সবচেয়ে বড় বিষয়বস্তুযুক্ত পেইন্ট মেট্রিকে বিলম্ব এড়াতে, যা কিছু ক্ষেত্রে তাত্পর্যপূর্ণ হতে পারে যেমনটি জুলাইতে আবিষ্কৃত হয়েছিল। 2021 । যাইহোক, এটা স্বীকার করতে হবে যে রেন্ডারিং প্রক্রিয়ার আগে ভিউপোর্টের সাপেক্ষে একটি উপাদানের অবস্থান মূল্যায়ন করা জটিল। এটি বিশেষত প্রযোজ্য হয় যদি CMS loading বৈশিষ্ট্যগুলি যোগ করার জন্য একটি স্বয়ংক্রিয় পদ্ধতি ব্যবহার করে, তবে এমনকি ম্যানুয়াল হস্তক্ষেপের উপর ভিত্তি করে বিভিন্ন বিষয় যেমন বিভিন্ন ভিউপোর্টের আকার এবং আকৃতির অনুপাত বিবেচনা করতে হবে। তবুও, নায়কের ছবি এবং অন্যান্য ছবি বা আইফ্রেমগুলি বাদ দেওয়ার জন্য দৃঢ়ভাবে সুপারিশ করা হয় যেগুলি অলস-লোড হওয়া থেকে ভাঁজের উপরে প্রদর্শিত হতে পারে।

একটি জাভাস্ক্রিপ্ট ফলব্যাক এড়িয়ে চলুন

যদিও জাভাস্ক্রিপ্ট ব্যবহার করা যেতে পারে এমন ব্রাউজারগুলিতে অলস লোডিং প্রদান করতে যা (এখনও) loading বৈশিষ্ট্য সমর্থন করে না , এই ধরনের প্রক্রিয়াগুলি সর্বদা প্রাথমিকভাবে একটি চিত্র বা আইফ্রেমের src অ্যাট্রিবিউট অপসারণের উপর নির্ভর করে, যা ব্রাউজারগুলির জন্য বিলম্বের কারণ হয় যা বৈশিষ্ট্য সমর্থন করে । . উপরন্তু, একটি বৃহৎ-স্কেল CMS-এর ফ্রন্টএন্ডে এই ধরনের একটি জাভাস্ক্রিপ্ট-ভিত্তিক সমাধান রোল আউট করার ফলে সম্ভাব্য সমস্যাগুলির জন্য পৃষ্ঠের ক্ষেত্রফল বৃদ্ধি পায়, যেটির একটি অংশ কেন কোনো প্রধান CMS প্রমিত ব্রাউজার বৈশিষ্ট্যের আগে তার মূল অংশে অলস লোডিং গ্রহণ করেনি।

প্রযুক্তিগত সুপারিশ

ডিফল্টরূপে অলস লোডিং সক্ষম করুন৷

ব্রাউজার-স্তরের অলস লোডিং বাস্তবায়নকারী CMS-এর জন্য সামগ্রিক সুপারিশ হল এটিকে ডিফল্টরূপে সক্রিয় করা, যেমন loading="lazy" ছবি এবং iframes-এ যোগ করা উচিত, বিশেষত শুধুমাত্র সেই উপাদানগুলির জন্য যাতে মাত্রা বৈশিষ্ট্য অন্তর্ভুক্ত থাকে । বৈশিষ্ট্যটি ডিফল্টরূপে সক্ষম করার ফলে এটি ম্যানুয়ালি সক্ষম করার চেয়ে বেশি নেটওয়ার্ক সংস্থান সঞ্চয় হবে, উদাহরণস্বরূপ প্রতি-চিত্রের ভিত্তিতে।

যতটা সম্ভব, loading="lazy" শুধুমাত্র সেই উপাদানগুলিতে যোগ করা উচিত যা সম্ভবত ভাঁজের নীচে প্রদর্শিত হবে । যদিও ক্লায়েন্ট-সাইড সচেতনতা এবং বিভিন্ন ভিউপোর্ট আকারের অভাবের কারণে একটি CMS-এর জন্য এই প্রয়োজনীয়তাটি বাস্তবায়ন করা জটিল হতে পারে, তবে হিরো ইমেজের মতো উপাদানগুলি বাদ দেওয়ার জন্য অন্তত আনুমানিক হিউরিস্টিক ব্যবহার করার পরামর্শ দেওয়া হচ্ছে যা সম্ভবত থেকে ভাঁজের উপরে প্রদর্শিত হবে। অলস-লোড হচ্ছে

প্রতি-উপাদান পরিবর্তনের অনুমতি দিন

ডিফল্টরূপে ইমেজ এবং আইফ্রেমে loading="lazy" যোগ করা উচিত, কিছু ইমেজে অ্যাট্রিবিউট বাদ দেওয়ার অনুমতি দেওয়া অত্যন্ত গুরুত্বপূর্ণ, যেমন LCP- এর জন্য অপ্টিমাইজ করা। যদি CMS-এর শ্রোতাদের গড়ে আরও বেশি প্রযুক্তি-স্যাভি হিসেবে বিবেচনা করা হয়, তাহলে এটি একটি UI কন্ট্রোল হতে পারে যা প্রতিটি ইমেজ এবং iframe-এর জন্য উন্মোচিত হতে পারে যা সেই উপাদানটির জন্য অলস লোডিং থেকে অপ্ট আউট করার অনুমতি দেয়। বিকল্পভাবে বা অতিরিক্তভাবে, একটি API তৃতীয় পক্ষের বিকাশকারীদের কাছে প্রকাশ করা যেতে পারে যাতে তারা কোডের মাধ্যমে অনুরূপ পরিবর্তন করতে পারে।

উদাহরণস্বরূপ ওয়ার্ডপ্রেস সম্পূর্ণ HTML ট্যাগ বা প্রসঙ্গ বা বিষয়বস্তুর একটি নির্দিষ্ট HTML উপাদানের জন্য loading বৈশিষ্ট্যটি এড়িয়ে যেতে দেয়।

বিদ্যমান সামগ্রী পুনরুদ্ধার করুন

একটি উচ্চ স্তরে, একটি CMS এ HTML উপাদানগুলিতে loading বৈশিষ্ট্য যোগ করার জন্য দুটি পদ্ধতি রয়েছে:

  • হয় ব্যাকএন্ডে বিষয়বস্তু সম্পাদকের মধ্যে থেকে অ্যাট্রিবিউট যোগ করুন, অবিরামভাবে ডাটাবেসে সংরক্ষণ করুন।
  • ফ্রন্টএন্ডে ডাটাবেস থেকে বিষয়বস্তু রেন্ডার করার সময় ফ্লাইতে অ্যাট্রিবিউট যোগ করুন।

যেকোন বিদ্যমান সামগ্রীতেও অলস লোডিং সুবিধাগুলি আনার জন্য রেন্ডারিং করার সময় ফ্লাইতে অ্যাট্রিবিউট যোগ করার জন্য সিএমএস-এর জন্য সুপারিশ করা হয়। যদি অ্যাট্রিবিউটটি শুধুমাত্র সম্পাদকের মাধ্যমে যোগ করা যেতে পারে, তবে শুধুমাত্র নতুন বা সম্প্রতি পরিবর্তিত বিষয়বস্তুর অংশগুলি সুবিধা পাবে, যা নেটওয়ার্ক সংস্থানগুলি সংরক্ষণে CMS-এর প্রভাবকে ব্যাপকভাবে হ্রাস করবে। উপরন্তু, ফ্লাইতে অ্যাট্রিবিউট যোগ করা সহজেই ভবিষ্যতের পরিবর্তনের জন্য অনুমতি দেবে, যদি ব্রাউজার-স্তরের অলস লোডিংয়ের ক্ষমতা আরও প্রসারিত করা হয়।

ফ্লাইতে অ্যাট্রিবিউট যোগ করলে একটি এলিমেন্টে সম্ভাব্য বিদ্যমান loading অ্যাট্রিবিউট পূরণ করা উচিত এবং এই ধরনের অ্যাট্রিবিউটকে প্রাধান্য দেওয়া উচিত। এইভাবে, সিএমএস বা এটির জন্য একটি এক্সটেনশন ডুপ্লিকেট বৈশিষ্ট্যগুলির সাথে বিরোধ সৃষ্টি না করে সম্পাদক-চালিত পদ্ধতির প্রয়োগ করতে পারে।

সার্ভার-সাইড কর্মক্ষমতা অপ্টিমাইজ করুন

একটি সার্ভার-সাইড মিডলওয়্যার ব্যবহার করে (উদাহরণস্বরূপ) ফ্লাইতে সামগ্রীতে loading বৈশিষ্ট্য যোগ করার সময়, গতি একটি বিবেচ্য বিষয়। CMS-এর উপর নির্ভর করে, বৈশিষ্ট্যটি DOM ট্রাভার্সাল বা রেগুলার এক্সপ্রেশনের মাধ্যমে যোগ করা যেতে পারে, পরবর্তীটি পারফরম্যান্সের জন্য সুপারিশ করা হয়।

রেগুলার এক্সপ্রেশনের ব্যবহার ন্যূনতম রাখা উচিত, উদাহরণস্বরূপ একটি একক রেজেক্স যা তাদের বৈশিষ্ট্য সহ সামগ্রীতে সমস্ত img এবং iframe ট্যাগ সংগ্রহ করে এবং তারপর প্রযোজ্য হিসাবে প্রতিটি ট্যাগ স্ট্রিংয়ে loading বৈশিষ্ট্য যুক্ত করে। উদাহরণস্বরূপ, ওয়ার্ডপ্রেস নির্দিষ্ট কিছু উপাদানে বিভিন্ন অন-দ্য-ফ্লাই অপারেশন করার জন্য একটি সাধারণ রেগুলার এক্সপ্রেশন থাকা পর্যন্ত যায়, যার মধ্যে loading="lazy" যোগ করা মাত্র একটি, একাধিক বৈশিষ্ট্যের সুবিধার্থে একটি একক রেগুলার এক্সপ্রেশন ব্যবহার করে। অপ্টিমাইজেশানের এই ফর্মটি আরও একটি কারণ হল যে একটি এক্সটেনশনের জন্য একটি সিএমএস-এর কোরে অলস লোডিং গ্রহণ করার পরামর্শ দেওয়া হয় - এটি সার্ভার-সাইড পারফরম্যান্স অপ্টিমাইজেশানের জন্য অনুমতি দেয়৷

পরবর্তী পদক্ষেপ

আপনার CMS-এ বৈশিষ্ট্যটির জন্য সমর্থন যোগ করার জন্য একটি বিদ্যমান বৈশিষ্ট্য অনুরোধের টিকিট আছে কিনা তা দেখুন, অথবা যদি এখনও কোনোটি না থাকে তবে একটি নতুন খুলুন। আপনার প্রস্তাব সমর্থন করার জন্য প্রয়োজন হিসাবে এই পোস্টের রেফারেন্স ব্যবহার করুন.

প্রশ্ন বা মন্তব্যের জন্য আমাকে ( felixarntz@ ) টুইট করুন, অথবা ব্রাউজার-স্তরের অলস লোডিংয়ের জন্য সমর্থন যোগ করা থাকলে এই পৃষ্ঠায় আপনার CMS তালিকাভুক্ত করতে। আপনি যদি অন্যান্য চ্যালেঞ্জের সম্মুখীন হন, আমি আশা করি একটি সমাধান খুঁজে পেতে তাদের সম্পর্কে আরও জানতে আগ্রহী।

আপনি যদি একজন CMS প্ল্যাটফর্ম ডেভেলপার হন, তাহলে অন্যান্য CMS কিভাবে অলস লোডিং বাস্তবায়ন করেছে তা অধ্যয়ন করুন:

আপনি আপনার গবেষণা থেকে শেখা এবং এই পোস্টের প্রযুক্তিগত সুপারিশগুলি ব্যবহার করে আপনার CMS-এ কোড অবদান শুরু করতে পারেন, উদাহরণস্বরূপ একটি প্যাচ বা পুল-অনুরোধের আকারে।

আনস্প্ল্যাশে কলিন ওয়াটসের হিরো ছবি।