ইনপুট বিলম্ব কি তা খুঁজে বের করুন এবং দ্রুত ইন্টারঅ্যাক্টিভিটির জন্য এটি কমানোর কৌশল শিখুন।
ওয়েবে মিথস্ক্রিয়াগুলি জটিল জিনিস, সেগুলি চালানোর জন্য ব্রাউজারে সমস্ত ধরণের কার্যকলাপ ঘটে। যদিও তাদের সকলের মধ্যে মিল রয়েছে তা হল তাদের ইভেন্ট কলব্যাকগুলি চালানো শুরু হওয়ার আগে তারা কিছু ইনপুট বিলম্ব করে। এই নির্দেশিকাটিতে, আপনি ইনপুট বিলম্ব কী তা শিখবেন এবং আপনার ওয়েবসাইটের ইন্টারঅ্যাকশনগুলি দ্রুত চালানোর জন্য আপনি এটি কমাতে কী করতে পারেন।
ইনপুট বিলম্ব কি?
ইনপুট বিলম্ব হল সেই সময়ের সময়কাল যখন ব্যবহারকারী প্রথম কোনো পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে—যেমন একটি স্ক্রীনে ট্যাপ করা, মাউস দিয়ে ক্লিক করা, বা একটি কী টিপে—যখন পর্যন্ত ইন্টারঅ্যাকশনের জন্য ইভেন্ট কলব্যাক শুরু হয়। প্রতিটি মিথস্ক্রিয়া কিছু পরিমাণ ইনপুট বিলম্বের সাথে শুরু হয়।
ইনপুট বিলম্বের কিছু অংশ অনিবার্য: একটি ইনপুট ইভেন্ট চিনতে এবং ব্রাউজারে পাস করতে অপারেটিং সিস্টেমের জন্য সবসময় কিছু সময় লাগে। যাইহোক, ইনপুট বিলম্বের সেই অংশটি প্রায়শই লক্ষ্য করা যায় না, এবং পৃষ্ঠাতেই এমন অন্যান্য জিনিস রয়েছে যা ইনপুট বিলম্বকে সমস্যা সৃষ্টি করতে যথেষ্ট দীর্ঘ করতে পারে।
ইনপুট বিলম্ব সম্পর্কে চিন্তা কিভাবে
সাধারণভাবে বলতে গেলে, আপনি ইন্টারঅ্যাকশনের প্রতিটি অংশকে যতটা সম্ভব সংক্ষিপ্ত রাখতে চান যাতে ব্যবহারকারীর ডিভাইস নির্বিশেষে আপনার ওয়েবসাইটে ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিকের "ভাল" থ্রেশহোল্ড পূরণ করার সর্বোত্তম সুযোগ থাকে। চেক ইনপুট বিলম্ব রাখা যে থ্রেশহোল্ড পূরণের শুধুমাত্র একটি অংশ.
ইনপুট বিলম্বের জন্য একটি ভাতা নির্ধারণ করতে আপনি প্রথম ইনপুট বিলম্ব (FID) থ্রেশহোল্ডগুলি দেখতে প্রলুব্ধ হতে পারেন—কিন্তু FID-এর জন্য "ভাল" থ্রেশহোল্ড হল 100 মিলিসেকেন্ড বা তার কম ৷ আপনি যদি এই থ্রেশহোল্ডে যান, আপনি 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 এবং কম্পোজিটর থ্রেডগুলিতে চলে, মূল থ্রেডে নয়। .
উপসংহার
যদিও ইনপুট বিলম্বগুলি আপনার মিথস্ক্রিয়াগুলি চালানোর জন্য বেশিরভাগ সময়কে প্রতিনিধিত্ব করতে পারে না, তবে এটি বোঝা গুরুত্বপূর্ণ যে একটি মিথস্ক্রিয়াটির প্রতিটি অংশ এমন একটি পরিমাণ সময় নেয় যা আপনি কমাতে পারেন। আপনি যদি দীর্ঘ ইনপুট বিলম্ব পর্যবেক্ষণ করছেন , তাহলে আপনার কাছে এটি হ্রাস করার সুযোগ রয়েছে। পুনরাবৃত্ত টাইমার কলব্যাক এড়িয়ে চলা, দীর্ঘ টাস্কগুলি ভেঙে ফেলা এবং সম্ভাব্য ইন্টারঅ্যাকশন ওভারল্যাপ সম্পর্কে সচেতন থাকা সবই আপনাকে ইনপুট বিলম্ব কমাতে সাহায্য করতে পারে, যা আপনার ওয়েবসাইটের ব্যবহারকারীদের জন্য দ্রুত ইন্টারঅ্যাক্টিভিটির দিকে নিয়ে যায়।
আনস্প্ল্যাশ থেকে হিরো ইমেজ, এরিক ম্যাকলিন দ্বারা।