ইনপুট বিলম্ব অপ্টিমাইজ করুন

ইনপুট বিলম্ব কী তা খুঁজে বের করুন এবং দ্রুত ইন্টারঅ্যাক্টিভিটির জন্য এটি কমানোর কৌশলগুলি শিখুন।

জেরেমি ওয়াগনার

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

ইনপুট বিলম্ব কি?

ইনপুট বিলম্ব হলো ব্যবহারকারী যখন প্রথম কোনও পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করেন—যেমন স্ক্রিনে ট্যাপ করা, মাউস দিয়ে ক্লিক করা, অথবা কোনও কী টিপে—তখন থেকে শুরু করে ইন্টারঅ্যাকশনের জন্য ইভেন্ট কলব্যাক শুরু হওয়া পর্যন্ত সময়কাল। প্রতিটি ইন্টারঅ্যাকশন কিছু পরিমাণ ইনপুট বিলম্বের মাধ্যমে শুরু হয়।

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

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

ইনপুট বিলম্ব সম্পর্কে কীভাবে ভাববেন

সাধারণভাবে বলতে গেলে, আপনি একটি ইন্টারঅ্যাকশনের প্রতিটি অংশ যতটা সম্ভব সংক্ষিপ্ত রাখতে চান যাতে আপনার ওয়েবসাইটটি ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিকের "ভালো" থ্রেশহোল্ড পূরণ করার সর্বোত্তম সুযোগ পায়, ব্যবহারকারীর ডিভাইস নির্বিশেষে। ইনপুট বিলম্ব নিয়ন্ত্রণে রাখা সেই থ্রেশহোল্ড পূরণের একটি অংশ মাত্র।

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

ইনপুট বিলম্ব কীভাবে কমানো যায়

যেমনটি আগেই বলা হয়েছে, কিছু ইনপুট বিলম্ব অনিবার্য, কিন্তু অন্যদিকে, কিছু ইনপুট বিলম্ব এড়ানো যায় । দীর্ঘ ইনপুট বিলম্বের সাথে লড়াই করলে এখানে কিছু বিষয় বিবেচনা করা উচিত।

অতিরিক্ত মূল থ্রেডের কাজ শুরু করে এমন পুনরাবৃত্ত টাইমার এড়িয়ে চলুন

জাভাস্ক্রিপ্টে দুটি সাধারণভাবে ব্যবহৃত টাইমার ফাংশন রয়েছে যা ইনপুট বিলম্বে অবদান রাখতে পারে: setTimeout এবং setInterval । দুটির মধ্যে পার্থক্য হল যে setTimeout একটি নির্দিষ্ট সময়ের পরে চালানোর জন্য একটি কলব্যাক শিডিউল করে। অন্যদিকে, setInterval , প্রতি n মিলিসেকেন্ডে স্থায়ীভাবে চালানোর জন্য একটি কলব্যাক শিডিউল করে, অথবা যতক্ষণ না টাইমারটি clearInterval দিয়ে বন্ধ করা হয়।

setTimeout নিজেই সমস্যাযুক্ত নয়—আসলে, এটি দীর্ঘ কাজ এড়াতে সহায়ক হতে পারে। তবে, এটি নির্ভর করে কখন টাইমআউট হয় এবং টাইমআউট কলব্যাক চলাকালীন ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করে কিনা তার উপর।

উপরন্তু, setTimeout একটি লুপে অথবা পুনরাবৃত্তিমূলকভাবে চালানো যেতে পারে, যেখানে এটি setInterval মতো কাজ করে, যদিও পূর্ববর্তীটি সম্পূর্ণ না হওয়া পর্যন্ত পরবর্তী পুনরাবৃত্তির সময়সূচী নির্ধারণ না করাই ভালো। যদিও এর অর্থ হল প্রতিবার setTimeout কল করার সময় লুপটি মূল থ্রেডে চলে যাবে, আপনার খেয়াল রাখা উচিত যে এর কলব্যাক অতিরিক্ত কাজ না করে।

setInterval একটি ব্যবধানে কলব্যাক চালায়, এবং তাই এটি ইন্টারঅ্যাকশনের পথে বাধা সৃষ্টি করার সম্ভাবনা অনেক বেশি। এর কারণ হল—একটি setTimeout কলের একক উদাহরণের বিপরীতে, যা একটি একক কলব্যাক যা ব্যবহারকারীর ইন্টারঅ্যাকশনের পথে বাধা সৃষ্টি করতে পারে— setInterval এর পুনরাবৃত্তিমূলক প্রকৃতি এটিকে ইন্টারঅ্যাকশনের পথে বাধা সৃষ্টি করার সম্ভাবনা অনেক বেশি করে তোলে, ফলে ইন্টারঅ্যাকশনের ইনপুট বিলম্ব বৃদ্ধি পায়।

Chrome DevTools-এ পারফর্ম্যান্স প্রোফাইলারের একটি স্ক্রিনশট যেখানে ইনপুট বিলম্ব দেখানো হচ্ছে। টাইমার ফাংশন দ্বারা সঞ্চালিত একটি টাস্ক ব্যবহারকারীর ক্লিক ইন্টারঅ্যাকশন শুরু করার ঠিক আগে ঘটে। তবে, টাইমার ইনপুট বিলম্বকে বাড়িয়ে দেয়, যার ফলে ইন্টারঅ্যাকশনের ইভেন্ট কলব্যাকগুলি অন্যথায় যতটা দেরিতে চালানো হত তার চেয়ে দেরিতে চলে।
Chrome DevTools-এর পারফরম্যান্স প্যানেলে দেখানো হয়েছে যে, পূর্ববর্তী setInterval কল দ্বারা নিবন্ধিত একটি টাইমার ইনপুট বিলম্বে অবদান রাখে। যোগ করা ইনপুট বিলম্বের ফলে ইন্টারঅ্যাকশনের জন্য ইভেন্ট কলব্যাকগুলি অন্যথায় যতটা সম্ভব দেরিতে চলে।

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

দীর্ঘ কাজ এড়িয়ে চলুন

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

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

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

মিথস্ক্রিয়া ওভারল্যাপ সম্পর্কে সচেতন থাকুন

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

যখন কাজগুলি ওভারল্যাপ করে দীর্ঘ ইনপুট বিলম্ব তৈরি করতে পারে তার একটি চিত্রণ। এই চিত্রণে, একটি ক্লিক ইন্টারঅ্যাকশন একটি কীডাউন ইন্টারঅ্যাকশনের সাথে ওভারল্যাপ করে যা কীডাউন ইন্টারঅ্যাকশনের জন্য ইনপুট বিলম্ব বাড়ায়।
Chrome এর DevTools-এ পারফরম্যান্স প্রোফাইলারে দুটি সমসাময়িক ইন্টারঅ্যাকশনের একটি ভিজ্যুয়ালাইজেশন। প্রাথমিক ক্লিক ইন্টারঅ্যাকশনে রেন্ডারিং কাজের ফলে পরবর্তী কীবোর্ড ইন্টারঅ্যাকশনের জন্য ইনপুট বিলম্ব হয়।

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

  • একটি নির্দিষ্ট সময়ের মধ্যে একটি ইভেন্ট কলব্যাক কতবার কার্যকর হবে তা সীমিত করতে ইনপুট ডিবাউন্স করার কথা বিবেচনা করুন।
  • AbortController ব্যবহার করে আউটগোয়িং fetch রিকোয়েস্ট বাতিল করুন যাতে মূল থ্রেডটি কনজেস্টেড না হয়, fetch কলব্যাক পরিচালনা করুন। দ্রষ্টব্য: AbortController ইনস্ট্যান্সের signal প্রোপার্টি ইভেন্ট বাতিল করতেও ব্যবহার করা যেতে পারে।

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

উপসংহার

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

আনস্প্ল্যাশ থেকে নেওয়া হিরো ছবি, এরিক ম্যাকলিনের লেখা।