জাভাস্ক্রিপ্ট বাদ দিয়ে নেটিভ HTML-এর মাধ্যমে ওয়েবসাইটের গতি বৃদ্ধি

হাসনাইন রেজা | তৃণমূলের কথা

বহু বছর ধরে ইন্টারঅ্যাক্টিভ ওয়েব অভিজ্ঞতার প্রধান ইঞ্জিন হিসেবে জাভাস্ক্রিপ্ট (JS) ব্যবহৃত হয়ে আসছে [১, ৭]। JS একটি শক্তিশালী টুল হলেও এটি ডাউনলোড, ডিকম্প্রেস এবং প্রসেস করতে প্রচুর রিসোর্স এবং মেমোরির প্রয়োজন হয় [১, ৮]। বর্তমানে HTML এবং CSS-এর সক্ষমতা বৃদ্ধি পাওয়ায় অনেক সাধারণ কাজ এখন সরাসরি ব্রাউজারের নেটিভ ফিচারের মাধ্যমেই করা সম্ভব। এর ফলে ব্যবহারকারীদের কম ডেটা ডাউনলোড করতে হয় এবং JS-কে আরও জটিল কাজের জন্য ব্যবহার করা যায় [১, ৮]।

নিচে এমন কিছু ফিচারের বর্ণনা দেওয়া হলো যেখানে আপনি জাভাস্ক্রিপ্টের পরিবর্তে সরাসরি HTML ব্যবহার করতে পারেন:

১. নেটিভ HTML কেন ব্যবহার করবেন?

জাভাস্ক্রিপ্ট মেথডের তুলনায় নেটিভ HTML ব্যবহার করলে ডিভাইসের মেমোরি এবং CPU-এর ওপর চাপ কম পড়ে [২]। জাভাস্ক্রিপ্ট ফাইল লোড হওয়ার জন্য অপেক্ষা করতে হলেও নেটিভ HTML পেজ লোড হওয়ার সাথে সাথেই কাজ শুরু করে [২]। এছাড়া, এখানে কোনো স্টেট ম্যানেজমেন্ট কোড লেখার প্রয়োজন হয় না, সাধারণ ট্যাগ দিয়েই কাজ চালানো যায় [২]।

২. অ্যাকর্ডিয়ন এবং কন্টেন্ট প্যানেল

জটিল JS স্ক্রিপ্ট ছাড়াই এখন <details> এবং <summary> এলিমেন্ট ব্যবহার করে অ্যাকর্ডিয়ন তৈরি করা সম্ভব [২, ৯]।

• ব্যবহার: <details> ট্যাগের ভেতরে আপনার কন্টেন্ট এবং <summary> ট্যাগের ভেতরে ক্লিকযোগ্য হেডারটি রাখুন [৩, ৯]।

• ডিফল্ট অবস্থা: কোনো প্যানেল আগে থেকেই খোলা রাখতে চাইলে তাতে open অ্যাট্রিবিউট যুক্ত করুন [৩, ১০]।

• এক্সক্লুসিভ অ্যাকর্ডিয়ন: যদি চান যে একটি প্যানেল খুললে অন্যগুলো স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাক, তবে রেডিও বাটনের মতো সবগুলোতে একই name অ্যাট্রিবিউট ব্যবহার করুন [৩, ১০]।

৩. অটোফিল্টার সাজেশন্স ড্রপডাউন

HTML-এর <input> এবং <datalist> এলিমেন্টের সমন্বয়ে এমন একটি সার্চ বক্স তৈরি করা যায় যা টাইপ করার সাথে সাথে অপশনগুলো ফিল্টার করে দেখায় [৩, ১১]। এটি সাইট সার্চ বা প্রোডাক্ট ফিল্টারের জন্য অত্যন্ত কার্যকর [১২]। এটি শুধুমাত্র টেক্সট নয়, বরং সংখ্যা এবং সময়ের ক্ষেত্রেও কাজ করে, যদিও বর্তমানে ফায়ারফক্স (Firefox)-এর মতো কিছু ব্রাউজারে টেক্সট ছাড়া অন্য টাইপের ক্ষেত্রে কিছু সীমাবদ্ধতা রয়েছে [১৩, ১৪]।

৪. মোডাল এবং পপওভার (Popovers)

ঐতিহ্যবাহী JS-চালিত ওভারলে বা মোডালের আধুনিক বিকল্প হলো popover এবং popovertarget অ্যাট্রিবিউট [৪, ১৪]। এর প্রধানত তিনটি ধরন রয়েছে [৪, ১৫, ১৬]:

• Auto (ডিফল্ট): পপওভারের বাইরে ক্লিক করলে বা Esc চাপলে এটি বন্ধ হয়ে যায়। একটি ‘Auto’ পপওভার খুললে অন্যগুলো স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।

• Hint: এটিও বাইরে ক্লিক করলে বন্ধ হয়, তবে একসাথে একাধিক পপওভার খোলা রাখা যায় (ফায়ারফক্স এবং আইওএস-এ এটি এখনো পুরোপুরি সাপোর্ট করে না)।

• Manual: এটি নিজে থেকে বন্ধ হয় না; বন্ধ করার জন্য বাটনে ক্লিক করতে হয়।

৫. অফস্ক্রিন নেভিগেশন মেনু

Popover API ব্যবহার করে কোনো JS ছাড়াই সাইড মেনু তৈরি করা যায় [১৭]।

• প্রক্রিয়া: একটি <nav> এলিমেন্টে popover অ্যাট্রিবিউট ব্যবহার করে এবং CSS-এর মাধ্যমে এর পজিশন নিয়ন্ত্রণ করা যায় [১৮]। ডিফল্টভাবে এটি স্ক্রিনের বাইরে (translate: -100vw) থাকে এবং যখন পপওভারটি ওপেন হয়, তখন এটি স্ক্রিনে (translate: 0) চলে আসে [৫, ১৮]।

• ব্যাকড্রপ স্টাইলিং: মেনু ওপেন থাকা অবস্থায় ব্যাকগ্রাউন্ড আবছা করার জন্য ::backdrop ছদ্ম-এলিমেন্ট (pseudo-element) ব্যবহার করা যেতে পারে [৫, ১৯]।

জাভাস্ক্রিপ্ট ওয়েবের একটি গুরুত্বপূর্ণ অংশ হলেও, যেখানে প্রয়োজন নেই সেখানে এর ব্যবহার সীমিত রাখাই শ্রেয় [১৯]। HTML-এর নেটিভ এলিমেন্টগুলো ব্যবহারের মাধ্যমে আপনি ব্যবহারকারীদের জন্য আরও দ্রুত, লাইট ওয়েট এবং সহজলভ্য একটি ওয়েব অভিজ্ঞতা নিশ্চিত করতে পারেন [৬]।