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

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

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

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

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

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

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

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

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

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

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

কিভাবে ইনপুট বিলম্ব কমাতে

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

উপসংহার

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

আনস্প্ল্যাশ থেকে হিরো ইমেজ, এরিক ম্যাকলিন দ্বারা।