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