প্রোগ্রেসিভ এনহ্যান্সমেন্ট হল একটি ওয়েব ডেভেলপমেন্ট কৌশল যা নিশ্চিত করে যে আপনার সাইট সর্বাধিক সম্ভাব্য দর্শকদের কাছে অ্যাক্সেসযোগ্য। মূল নীতি হল মৌলিক বিষয়বস্তু এবং পৃষ্ঠা কার্যকারিতা শুধুমাত্র সবচেয়ে মৌলিক ওয়েব প্রযুক্তির উপর নির্ভর করা উচিত। উন্নত অভিজ্ঞতা, যেমন CSS ব্যবহার করে অত্যাধুনিক স্টাইলিং বা জাভাস্ক্রিপ্ট ব্যবহার করে ইন্টারঅ্যাকটিভিটি, সেই প্রযুক্তিগুলিকে সমর্থন করে এমন ব্রাউজারগুলির জন্য উপরে স্তরযুক্ত করা যেতে পারে। কিন্তু মৌলিক বিষয়বস্তু এবং পৃষ্ঠা কার্যকারিতা CSS বা JavaScript এর উপর নির্ভর করা উচিত নয়।
কিভাবে Lighthouse ফলব্যাক বিষয়বস্তু অডিট ব্যর্থ হয়
জাভাস্ক্রিপ্ট অনুপলব্ধ হলে লাইটহাউস পৃষ্ঠাগুলিকে পতাকা দেয় যাতে কিছু বিষয়বস্তু থাকে না:
লাইটহাউস পৃষ্ঠায় জাভাস্ক্রিপ্ট অক্ষম করে এবং তারপর পৃষ্ঠার HTML পরিদর্শন করে। HTML খালি থাকলে, অডিট ব্যর্থ হয়।
জাভাস্ক্রিপ্ট ছাড়া আপনার পৃষ্ঠায় সামগ্রী রয়েছে তা কীভাবে নিশ্চিত করবেন
প্রগতিশীল বর্ধন একটি বড় এবং বিতর্কিত বিষয়। একটি শিবির বলে যে, প্রগতিশীল বর্ধনের কৌশল মেনে চলার জন্য, পৃষ্ঠাগুলিকে স্তরযুক্ত করা উচিত যাতে মৌলিক বিষয়বস্তু এবং পৃষ্ঠা কার্যকারিতা শুধুমাত্র HTML এর প্রয়োজন হয়৷ স্ম্যাশিং ম্যাগাজিনের প্রগতিশীল বর্ধন দেখুন: এটি কী, এবং এই পদ্ধতির উদাহরণের জন্য এটি কীভাবে ব্যবহার করবেন ।
আরেকটি শিবির বিশ্বাস করে যে এই কঠোর পদ্ধতিটি অনেক আধুনিক, বড় আকারের ওয়েব অ্যাপ্লিকেশনের জন্য অপ্রয়োজনীয় বা অপ্রয়োজনীয় এবং একেবারে সমালোচনামূলক পৃষ্ঠা শৈলীর জন্য নথিতে <head> ইনলাইন ক্রিটিক্যাল-পাথ CSS ব্যবহার করার পরামর্শ দেয়।
এই বিবেচনার পরিপ্রেক্ষিতে, এই লাইটহাউস অডিটটি নিশ্চিত করার জন্য একটি সহজ পরীক্ষা করে যে জাভাস্ক্রিপ্ট অক্ষম থাকা অবস্থায় আপনার পৃষ্ঠাটি ফাঁকা নয়। আপনার অ্যাপটি প্রগতিশীল বর্ধনের সাথে কতটা কঠোরভাবে মেনে চলে তা বিতর্কের বিষয়, কিন্তু ব্যাপক চুক্তি রয়েছে যে জাভাস্ক্রিপ্ট অক্ষম করা হলে সমস্ত পৃষ্ঠায় অন্তত কিছু তথ্য প্রদর্শন করা উচিত, এমনকি যদি বিষয়বস্তুটি ব্যবহারকারীর কাছে শুধুমাত্র একটি সতর্কতা হয় যে জাভাস্ক্রিপ্ট ব্যবহার করার জন্য প্রয়োজনীয় পৃষ্ঠা
যে পৃষ্ঠাগুলিকে অবশ্যই জাভাস্ক্রিপ্টের উপর নির্ভর করতে হবে, একটি পদ্ধতি হল একটি <noscript> উপাদান ব্যবহার করে ব্যবহারকারীকে সতর্ক করা যে পৃষ্ঠাটির জন্য JavaScript প্রয়োজন। এটি একটি ফাঁকা পৃষ্ঠার চেয়ে ভাল কারণ ফাঁকা পৃষ্ঠাটি ব্যবহারকারীদের পৃষ্ঠা, তাদের ব্রাউজার বা তাদের কম্পিউটারে সমস্যা আছে কিনা তা নিয়ে অনিশ্চিত রাখে।
JavaScript অক্ষম থাকলে আপনার সাইটটি কেমন দেখায় এবং কার্য সম্পাদন করে তা দেখতে Chrome DevTools-এর অক্ষম জাভাস্ক্রিপ্ট বৈশিষ্ট্য ব্যবহার করুন।
সম্পদ
- জাভাস্ক্রিপ্ট অডিট উপলব্ধ না হলে এর জন্য উত্স কোড ফলব্যাক সামগ্রী প্রদান করে না
- প্রগতিশীল বর্ধন: এটি কি, এবং এটি কিভাবে ব্যবহার করতে হয়
- সমালোচনামূলক রেন্ডারিং পাথ
- Chrome DevTools দিয়ে জাভাস্ক্রিপ্ট অক্ষম করুন
প্রোগ্রেসিভ এনহ্যান্সমেন্ট হল একটি ওয়েব ডেভেলপমেন্ট কৌশল যা নিশ্চিত করে যে আপনার সাইটটি সর্বাধিক সম্ভাব্য দর্শকদের কাছে অ্যাক্সেসযোগ্য। মূল নীতি হল মৌলিক বিষয়বস্তু এবং পৃষ্ঠা কার্যকারিতা শুধুমাত্র সবচেয়ে মৌলিক ওয়েব প্রযুক্তির উপর নির্ভর করা উচিত। উন্নত অভিজ্ঞতা, যেমন CSS ব্যবহার করে অত্যাধুনিক স্টাইলিং বা জাভাস্ক্রিপ্ট ব্যবহার করে ইন্টারঅ্যাকটিভিটি, সেই প্রযুক্তিগুলিকে সমর্থন করে এমন ব্রাউজারগুলির জন্য উপরে স্তরযুক্ত করা যেতে পারে। কিন্তু মৌলিক বিষয়বস্তু এবং পৃষ্ঠা কার্যকারিতা CSS বা JavaScript এর উপর নির্ভর করা উচিত নয়।
কিভাবে Lighthouse ফলব্যাক বিষয়বস্তু অডিট ব্যর্থ হয়
জাভাস্ক্রিপ্ট অনুপলব্ধ হলে লাইটহাউস পৃষ্ঠাগুলিকে পতাকা দেয় যাতে কিছু বিষয়বস্তু থাকে না:
লাইটহাউস পৃষ্ঠায় জাভাস্ক্রিপ্ট অক্ষম করে এবং তারপর পৃষ্ঠার HTML পরিদর্শন করে। HTML খালি থাকলে, অডিট ব্যর্থ হয়।
জাভাস্ক্রিপ্ট ছাড়া আপনার পৃষ্ঠায় সামগ্রী রয়েছে তা কীভাবে নিশ্চিত করবেন
প্রগতিশীল বর্ধন একটি বড় এবং বিতর্কিত বিষয়। একটি শিবির বলে যে, প্রগতিশীল বর্ধনের কৌশল মেনে চলার জন্য, পৃষ্ঠাগুলিকে স্তরযুক্ত করা উচিত যাতে মৌলিক বিষয়বস্তু এবং পৃষ্ঠা কার্যকারিতা শুধুমাত্র HTML এর প্রয়োজন হয়৷ স্ম্যাশিং ম্যাগাজিনের প্রগতিশীল বর্ধন দেখুন: এটি কী, এবং এই পদ্ধতির উদাহরণের জন্য এটি কীভাবে ব্যবহার করবেন ।
আরেকটি শিবির বিশ্বাস করে যে এই কঠোর পদ্ধতিটি অনেক আধুনিক, বড় আকারের ওয়েব অ্যাপ্লিকেশনের জন্য অপ্রয়োজনীয় বা অপ্রয়োজনীয় এবং একেবারে সমালোচনামূলক পৃষ্ঠা শৈলীর জন্য নথিতে <head> ইনলাইন ক্রিটিক্যাল-পাথ CSS ব্যবহার করার পরামর্শ দেয়।
এই বিবেচনার পরিপ্রেক্ষিতে, এই লাইটহাউস অডিটটি নিশ্চিত করার জন্য একটি সহজ পরীক্ষা করে যে জাভাস্ক্রিপ্ট অক্ষম থাকা অবস্থায় আপনার পৃষ্ঠাটি ফাঁকা নয়। আপনার অ্যাপটি প্রগতিশীল বর্ধনের সাথে কতটা কঠোরভাবে মেনে চলে তা বিতর্কের বিষয়, কিন্তু ব্যাপক চুক্তি রয়েছে যে জাভাস্ক্রিপ্ট অক্ষম করা হলে সমস্ত পৃষ্ঠায় অন্তত কিছু তথ্য প্রদর্শন করা উচিত, এমনকি যদি বিষয়বস্তুটি ব্যবহারকারীর কাছে শুধুমাত্র একটি সতর্কতা হয় যে জাভাস্ক্রিপ্ট ব্যবহার করার জন্য প্রয়োজনীয় পৃষ্ঠা
যে পৃষ্ঠাগুলিকে অবশ্যই জাভাস্ক্রিপ্টের উপর নির্ভর করতে হবে, একটি পদ্ধতি হল একটি <noscript> উপাদান ব্যবহার করে ব্যবহারকারীকে সতর্ক করা যে পৃষ্ঠাটির জন্য JavaScript প্রয়োজন। এটি একটি ফাঁকা পৃষ্ঠার চেয়ে ভাল কারণ ফাঁকা পৃষ্ঠাটি ব্যবহারকারীদের পৃষ্ঠা, তাদের ব্রাউজার বা তাদের কম্পিউটারে সমস্যা আছে কিনা তা নিয়ে অনিশ্চিত রাখে।
JavaScript অক্ষম থাকলে আপনার সাইটটি কেমন দেখায় এবং কার্য সম্পাদন করে তা দেখতে Chrome DevTools-এর অক্ষম জাভাস্ক্রিপ্ট বৈশিষ্ট্য ব্যবহার করুন।