ইনপুট ডিলে কী তা জানুন এবং আরও দ্রুত ইন্টার্যাক্টিভিটির জন্য এটি কমানোর কৌশল শিখুন।
ওয়েবে ইন্টার্যাকশন করা জটিল বিষয়, ব্রাউজারে সব ধরনের অ্যাক্টিভিটি হয় যা ইন্টার্যাকশনকে চালিত করে। তবে, তাদের সকলের মধ্যে যা মিল রয়েছে তা হল তাদের ইভেন্ট কলব্যাকগুলি চলতে শুরু করার আগে তারা কিছু ইনপুট বিলম্ব করে। এই গাইডে, আপনি ইনপুট ডিলে কী এবং এটি কমানোর জন্য আপনি কী করতে পারেন তা জানতে পারবেন যাতে আপনার ওয়েবসাইটের ইন্টার্যাকশন আরও দ্রুত চলে।
ইনপুট সংক্রান্ত দেরি কী?
ইনপুট ডিলে হল সেই সময়কাল যা ব্যবহারকারী কোনও পৃষ্ঠার সাথে প্রথমবার ইন্টার্যাক্ট করার সময় থেকে শুরু হয়—যেমন, স্ক্রিনে ট্যাপ করা, মাউস দিয়ে ক্লিক করা বা কোনও কী প্রেস করা—ইন্টার্যাকশনের জন্য ইভেন্ট কলব্যাক রান করা শুরু হওয়া পর্যন্ত। প্রতিটি ইন্টার্যাকশন শুরু হতে কিছুটা ইনপুট ডিলে হয়।
ইনপুট বিলম্বের কিছু অংশ এড়ানো যায় না: অপারেটিং সিস্টেমের জন্য একটি ইনপুট ইভেন্ট শনাক্ত করতে এবং ব্রাউজারে পাস করতে সবসময় কিছুটা সময় লাগে। তবে, ইনপুট বিলম্বের সেই অংশটি প্রায়শই লক্ষ্য করা যায় না এবং পৃষ্ঠায় অন্যান্য জিনিস ঘটে যা ইনপুট বিলম্বকে যথেষ্ট দীর্ঘ করতে পারে এবং সমস্যা সৃষ্টি করতে পারে।
ইনপুট সংক্রান্ত দেরি কীভাবে বিবেচনা করবেন
সাধারণত, আপনি ইন্টার্যাকশনের প্রতিটি অংশ যতটা সম্ভব ছোট রাখতে চান যাতে আপনার ওয়েবসাইট ব্যবহারকারীর ডিভাইস নির্বিশেষে Interaction to Next Paint (INP) মেট্রিকের "ভালো" থ্রেশহোল্ড পূরণ করার সেরা সুযোগ পায়। ইনপুট ডিলে চেক করা হল থ্রেশহোল্ড পূরণ করার একটি অংশ মাত্র।
তাই, INP-এর "ভালো" থ্রেশহোল্ড পূরণ করার জন্য আপনাকে ইনপুট ডিলে যতটা সম্ভব কম করার চেষ্টা করতে হবে। তবে, আপনাকে মনে রাখতে হবে যে ইনপুট বিলম্ব সম্পূর্ণভাবে দূর করা সম্ভব নয়। ব্যবহারকারীরা আপনার পৃষ্ঠার সাথে ইন্টার্যাক্ট করার চেষ্টা করার সময় আপনি যতক্ষণ পর্যন্ত অতিরিক্ত প্রধান থ্রেড কাজ এড়িয়ে চলছেন, ততক্ষণ পর্যন্ত সমস্যা এড়ানোর জন্য আপনার ইনপুট বিলম্ব যথেষ্ট কম হওয়া উচিত।
ইনপুট সংক্রান্ত দেরি কীভাবে কমানো যায়
আগে যেমন বলা হয়েছে, কিছু ইনপুট ডিলে এড়ানো যায় না, তবে অন্যদিকে কিছু ইনপুট ডিলে এড়ানো যায়। ইনপুট দিতে অনেক দেরি হলে, এখানে কিছু বিষয় উল্লেখ করা হল যা আপনি বিবেচনা করতে পারেন।
অতিরিক্ত প্রধান থ্রেড কাজ শুরু করে এমন রেকারিং টাইমার এড়িয়ে চলুন
জাভাস্ক্রিপ্টে সাধারণত ব্যবহৃত দুটি টাইমার ফাংশন আছে যা ইনপুট ডিলেতে অবদান রাখতে পারে: setTimeout এবং setInterval। দুটির মধ্যে পার্থক্য হল, setTimeout নির্দিষ্ট সময়ের পরে রান করার জন্য কলব্যাক শিডিউল করে। অন্যদিকে, setInterval, চিরকালের জন্য বা clearInterval-এর মাধ্যমে টাইমার বন্ধ না করা পর্যন্ত, প্রতি n মিলিসেকেন্ডে রান করার জন্য একটি কলব্যাক শিডিউল করে।
setTimeout-এর ক্ষেত্রে কোনও সমস্যা নেই—আসলে, এটি বড় টাস্ক এড়িয়ে যেতে সাহায্য করতে পারে। তবে, এটি নির্ভর করে কখন টাইমআউট হয় এবং টাইমআউট কলব্যাক রান করার সময় ব্যবহারকারী পৃষ্ঠার সাথে ইন্টার্যাক্ট করার চেষ্টা করেন কিনা তার উপর।
এছাড়াও, setTimeout লুপে বা পুনরাবৃত্তিমূলকভাবে চালানো যেতে পারে, যেখানে এটি setInterval-এর মতো কাজ করে, যদিও আগেরটি সম্পূর্ণ না হওয়া পর্যন্ত পরবর্তী পুনরাবৃত্তি শিডিউল না করাই ভালো। এর অর্থ হল, প্রতিবার setTimeout কল করা হলে লুপটি মূল থ্রেডে ফিরে আসবে, তবে আপনাকে খেয়াল রাখতে হবে যাতে এর কলব্যাক অতিরিক্ত কাজ না করে।
setInterval একটি নির্দিষ্ট সময় অন্তর কলব্যাক রান করে, তাই এটি ইন্টার্যাকশনের পথে বাধা হয়ে দাঁড়ানোর সম্ভাবনা অনেক বেশি। এর কারণ হল—setTimeout কলের একটিমাত্র ইনস্ট্যান্সের মতো নয়, যা হল একবারের কলব্যাক যা ব্যবহারকারীর ইন্টার্যাকশনের পথে বাধা হয়ে দাঁড়াতে পারে—setInterval-এর পুনরাবৃত্তিমূলক প্রকৃতির কারণে এটি ইন্টার্যাকশনের পথে বাধা হয়ে দাঁড়ানোর সম্ভাবনা অনেক বেশি হবে, যার ফলে ইন্টার্যাকশনের ইনপুট ডিলে বেড়ে যায়।
setInterval কলের মাধ্যমে রেজিস্টার করা টাইমার ইনপুট ডিলেতে অবদান রাখছে, যেমনটি Chrome DevTools-এর পারফর্ম্যান্স প্যানেলে দেখানো হয়েছে। ইনপুট ডিলে যোগ করার ফলে ইন্ট্যার্যাকশনের জন্য ইভেন্ট কলব্যাক, স্বাভাবিকের চেয়ে পরে রান করে।
ফার্স্ট-পার্টি কোডে টাইমার থাকলে, আপনি সেগুলি কন্ট্রোল করতে পারবেন। সেগুলি আপনার প্রয়োজন কিনা তা মূল্যায়ন করুন অথবা সেগুলিতে যতটা সম্ভব কাজ কমানোর চেষ্টা করুন। তবে, থার্ড-পার্টি স্ক্রিপ্টে টাইমার অন্যভাবে কাজ করে। থার্ড-পার্টি স্ক্রিপ্ট কী করে তার উপর আপনার কোনও নিয়ন্ত্রণ থাকে না এবং থার্ড-পার্টি কোডে পারফর্ম্যান্স সংক্রান্ত সমস্যা সমাধান করার জন্য প্রায়ই স্টেকহোল্ডারদের সাথে কাজ করতে হয়। এর মাধ্যমে কোনও থার্ড-পার্টি স্ক্রিপ্ট প্রয়োজনীয় কিনা তা নির্ধারণ করা হয় এবং যদি তা হয়, তাহলে থার্ড-পার্টি স্ক্রিপ্ট ভেন্ডরের সাথে যোগাযোগ করে নির্ধারণ করা হয় যে আপনার ওয়েবসাইটে পারফর্ম্যান্স সংক্রান্ত সমস্যা সমাধান করার জন্য কী করা যেতে পারে।
বড় টাস্ক এড়িয়ে চলুন
ইনপুট দিতে দেরি হওয়ার সমস্যা কমানোর একটি উপায় হল বড় টাস্ক এড়িয়ে চলা। আপনার কাছে যদি অত্যধিক প্রধান থ্রেড কাজ থাকে যা ইন্টারঅ্যাকশনের সময় প্রধান থ্রেডকে ব্লক করে, তাহলে বড় টাস্ক শেষ হওয়ার সুযোগ পাওয়ার আগে এটি তাদের জন্য ইনপুট বিলম্ব যোগ করবে।
কোনও টাস্কে আপনার কাজের পরিমাণ কমানোর পাশাপাশি—এবং আপনার সবসময় চেষ্টা করা উচিত যাতে মূল থ্রেডে যতটা সম্ভব কম কাজ করা যায়—আপনি বড় টাস্ককে ছোট ছোট টাস্কে ভাগ করে ব্যবহারকারীর ইনপুটের প্রতি রেসপন্সিভনেস উন্নত করতে পারেন।
ইন্টার্যাকশন ওভারল্যাপের ব্যাপারে সতর্ক থাকুন
INP অপ্টিমাইজ করার ক্ষেত্রে একটি বিশেষ চ্যালেঞ্জিং অংশ হতে পারে যদি আপনার কাছে ওভারল্যাপ করা ইন্টার্যাকশন থাকে। ইন্টার্যাকশন ওভারল্যাপের অর্থ হল, আপনি একটি এলিমেন্টের সাথে ইন্টার্যাক্ট করার পরে, প্রাথমিক ইন্টার্যাকশনটি পরবর্তী ফ্রেম রেন্ডার করার সুযোগ পাওয়ার আগেই পৃষ্ঠার সাথে আরেকটি ইন্টার্যাকশন করেন।
ইন্টার্যাকশন ওভারল্যাপের সোর্স খুব সহজ হতে পারে, যেমন ব্যবহারকারী অল্প সময়ের মধ্যে অনেক ইন্টার্যাকশন করছেন। ব্যবহারকারী ফর্ম ফিল্ডে টাইপ করার সময় এটি হতে পারে, যেখানে খুব অল্প সময়ের মধ্যে কীবোর্ডে অনেক ইন্টার্যাকশন হতে পারে। কোনও কী ইভেন্টের কাজ যদি বিশেষ করে ব্যয়বহুল হয়—যেমন, অটোমেটিক সম্পূর্ণ করার ফিল্ডের সাধারণ ক্ষেত্রে যেখানে ব্যাক এন্ডে নেটওয়ার্ক রিকোয়েস্ট করা হয়—আপনার কাছে কয়েকটি বিকল্প আছে:
- নির্দিষ্ট সময়সীমার মধ্যে ইভেন্ট কলব্যাক কতবার এক্সিকিউট হবে তা সীমিত করতে, ইনপুট ডিবাউন্স করার কথা বিবেচনা করুন।
fetchকলব্যাক ম্যানেজ করার সময় মূল থ্রেড যাতে কনজেস্টেড না হয়ে যায়, তার জন্য আউটগোয়িংfetchঅনুরোধ বাতিল করতেAbortControllerব্যবহার করুন। মনে রাখবেন:AbortControllerইনস্ট্যান্সেরsignalপ্রপার্টিও ইভেন্ট বাতিল করতে ব্যবহার করা যেতে পারে।
ওভারল্যাপ করা ইন্ট্যার্যাকশনের কারণে ইনপুট ডিলে বেড়ে যাওয়ার আরেকটি কারণ হল, বেশি রিসোর্স ব্যবহার করে এমন অ্যানিমেশন। বিশেষ করে, জাভাস্ক্রিপ্টে অ্যানিমেশন অনেক requestAnimationFrame কল ফায়ার করতে পারে, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের পথে বাধা হয়ে দাঁড়াতে পারে। এই সমস্যা এড়াতে, সম্ভাব্য ব্যয়বহুল অ্যানিমেশন ফ্রেমগুলি সারিবদ্ধ করা এড়াতে যখনই সম্ভব CSS অ্যানিমেশন ব্যবহার করুন—তবে আপনি যদি এটি করেন, তাহলে নিশ্চিত করুন যে আপনি নন-কম্পোজিট অ্যানিমেশন এড়িয়ে চলছেন যাতে অ্যানিমেশনগুলি মূলত GPU এবং কম্পোজিটর থ্রেডে চলে, মূল থ্রেডে নয়।
উপসংহার
আপনার ইন্টার্যাকশন রান করতে যে সময় লাগে তার বেশিরভাগ সময় ইনপুট ডিলে না হলেও, এটি বোঝা গুরুত্বপূর্ণ যে ইন্টার্যাকশনের প্রতিটি অংশ কিছুটা সময় নেয় যা আপনি কমাতে পারেন। আপনি যদি ইনপুট দেওয়ার ক্ষেত্রে দীর্ঘ বিলম্ব লক্ষ্য করেন, তাহলে আপনার কাছে এটি কমানোর সুযোগ রয়েছে। পুনরাবৃত্ত টাইমার কলব্যাক এড়ানো, বড় টাস্ক ভেঙে ফেলা এবং সম্ভাব্য ইন্টার্যাকশন ওভারল্যাপ সম্পর্কে সচেতন থাকা, এই সবই আপনাকে ইনপুট বিলম্ব কমাতে সাহায্য করতে পারে, যার ফলে আপনার ওয়েবসাইটের ব্যবহারকারীদের জন্য দ্রুত ইন্টার্যাক্টিভিটি পাওয়া যায়।