ম্যানুয়াল পরীক্ষার মাধ্যমে ধীর মিথস্ক্রিয়াগুলির পিছনে কারণগুলি পুনরুত্পাদন এবং সনাক্ত করতে কীভাবে আপনার ফিল্ড ডেটা ল্যাবে নিয়ে যাবে তা শিখুন।
ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (আইএনপি) অপ্টিমাইজ করার একটি চ্যালেঞ্জিং অংশ হ'ল দুর্বল আইএনপির কারণ কী তা খুঁজে বের করা। সম্ভাব্য কারণগুলির একটি বিশাল বৈচিত্র্য রয়েছে: তৃতীয় পক্ষের স্ক্রিপ্ট যা মূল থ্রেডে অনেকগুলি কাজ নির্ধারণ করে, বড় DOM আকার , ব্যয়বহুল ইভেন্ট কলব্যাক এবং আরও অনেক কিছু।
দুর্বল INP ঠিক করার উপায় খুঁজে পাওয়া কঠিন হতে পারে। শুরু করার জন্য, আপনাকে জানতে হবে কোন ইন্টারঅ্যাকশনগুলি একটি পৃষ্ঠার INP-এর জন্য দায়ী। যদি আপনি না জানেন যে আপনার ওয়েবসাইটে কোন ইন্টারঅ্যাকশনগুলি প্রকৃত ব্যবহারকারীর দৃষ্টিকোণ থেকে সবচেয়ে ধীর হতে থাকে, তাহলে প্রথমে পড়ুন ক্ষেত্রে ধীর মিথস্ক্রিয়া খুঁজুন । আপনাকে গাইড করার জন্য একবার আপনার কাছে ফিল্ড ডেটা থাকলে, আপনি সেই নির্দিষ্ট ইন্টারঅ্যাকশনগুলিকে ল্যাব সরঞ্জামগুলিতে ম্যানুয়ালি পরীক্ষা করতে পারেন কেন সেই মিথস্ক্রিয়াগুলি ধীর হয়।
আপনার যদি ফিল্ড ডেটা না থাকে?
ফিল্ড ডেটা থাকা অত্যাবশ্যক, কারণ এটি কোন মিথস্ক্রিয়াগুলি অপ্টিমাইজ করা দরকার তা বের করার চেষ্টা করার জন্য আপনার অনেক সময় বাঁচায়। যদিও আপনি এমন একটি অবস্থানে থাকতে পারেন যেখানে আপনার ফিল্ড ডেটা নেই। যদি এটি আপনার পরিস্থিতি বর্ণনা করে, তবে উন্নতির জন্য মিথস্ক্রিয়াগুলি খুঁজে পাওয়া এখনও সম্ভব, যদিও এটির জন্য একটু বেশি প্রচেষ্টা এবং একটি ভিন্ন পদ্ধতির প্রয়োজন।
টোটাল ব্লকিং টাইম (TBT) হল একটি ল্যাব মেট্রিক যা লোডের সময় পৃষ্ঠার প্রতিক্রিয়াশীলতার মূল্যায়ন করে এবং এটি INP-এর সাথে খুব ভালোভাবে সম্পর্কযুক্ত । যদি আপনার পৃষ্ঠায় উচ্চ TBT থাকে, তবে এটি একটি গুরুত্বপূর্ণ সংকেত যে প্রাথমিক পৃষ্ঠা লোডের সময় আপনার পৃষ্ঠা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য খুব বেশি প্রতিক্রিয়াশীল নাও হতে পারে।
আপনার পৃষ্ঠার TBT বের করতে, আপনি Lighthouse বা PageSpeed Insights ব্যবহার করতে পারেন। যদি একটি পৃষ্ঠার TBT "ভাল" থ্রেশহোল্ড পূরণ না করে, তাহলে একটি ভাল সম্ভাবনা রয়েছে যে পৃষ্ঠা লোডের সময় প্রধান থ্রেডটি খুব ব্যস্ত থাকে এবং এটি পৃষ্ঠার জীবনচক্রের সেই গুরুত্বপূর্ণ সময়ে কত দ্রুত মিথস্ক্রিয়া ঘটতে পারে তা প্রভাবিত করতে পারে।
পৃষ্ঠাটি লোড হওয়ার পরে ধীর মিথস্ক্রিয়া খুঁজে পেতে, আপনাকে অন্যান্য ধরণের ডেটার উপর নির্ভর করতে হতে পারে, যেমন সাধারণ ব্যবহারকারী প্রবাহ যা আপনি ইতিমধ্যে আপনার ওয়েবসাইটের বিশ্লেষণে চিহ্নিত করেছেন। আপনি যদি একটি ইকমার্স ওয়েবসাইটে কাজ করেন, উদাহরণস্বরূপ, একটি সাধারণ ব্যবহারকারীর প্রবাহ হবে ব্যবহারকারীরা যখন তারা একটি অনলাইন শপিং কার্টে আইটেম যোগ করে এবং পরবর্তীতে চেকআউট প্রক্রিয়ার মধ্য দিয়ে যায় তখন তারা যে পদক্ষেপগুলি গ্রহণ করে।
আপনার ফিল্ড ডেটা থাকুক বা না থাকুক, পরবর্তী ধাপ হল ম্যানুয়ালি পরীক্ষা করা এবং ধীর মিথস্ক্রিয়া পুনরুত্পাদন করা—কারণ এটি শুধুমাত্র তখনই যখন আপনি একটি ধীর মিথস্ক্রিয়াকে চূড়ান্তভাবে সনাক্ত করতে সক্ষম হন যা আপনি এটি ঠিক করতে পারেন৷
ল্যাবে ধীর মিথস্ক্রিয়া পুনরুত্পাদন করুন
ম্যানুয়াল পরীক্ষার মাধ্যমে আপনি ল্যাবে ধীর মিথস্ক্রিয়াগুলি পুনরুত্পাদন করতে পারেন এমন অনেকগুলি উপায় রয়েছে, তবে নিম্নলিখিতটি এমন একটি কাঠামো যা আপনি জ্ঞানীয় প্রচেষ্টাকে হ্রাস করার সময় ল্যাব সেটিংয়ে ধীর মিথস্ক্রিয়া পুনরুত্পাদন করতে ব্যবহার করতে পারেন।
এখনই পারফরম্যান্স প্রোফাইলারের কাছে পৌঁছাবেন না
আপনি যদি ইতিমধ্যেই Chrome এর পারফরম্যান্স প্রোফাইলারের সাথে পরিচিত হন তবে আপনি জানেন যে এটি পৃষ্ঠার কার্যক্ষমতা সংক্রান্ত সমস্যা সমাধানের সময় প্রচুর দরকারী ডায়গনিস্টিক তথ্য সরবরাহ করে৷ এটা অনেক upsides সঙ্গে একটি দরকারী টুল.
যাইহোক, নেতিবাচক দিক হল যে Chrome এর পারফরম্যান্স প্রোফাইলার পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করার সময় একটি লাইভ ভিউ প্রদান করে না। এটি ব্যবহার করার জন্য এটি উল্লেখযোগ্য সময় নেয় এবং প্রথমে ইন্টারঅ্যাকশনগুলি ম্যানুয়ালি পরীক্ষা করার আরও কার্যকর উপায় রয়েছে৷ ধারণাটি হল ধীর মিথস্ক্রিয়াগুলি পুনরুত্পাদন করার জন্য ন্যূনতম সময় এবং প্রচেষ্টা ব্যয় করা এবং - একবার একটি ধীর মিথস্ক্রিয়া চূড়ান্তভাবে চিহ্নিত করা গেলে - তারপরে এর পিছনের কারণ(গুলি) এর গভীরে ডুব দেওয়ার জন্য আপনার পারফরম্যান্স প্রোফাইলার ব্যবহার করা উচিত।
ওয়েব ভাইটালস ক্রোম এক্সটেনশন ব্যবহার করুন
ওয়েব ভাইটালস ক্রোম এক্সটেনশন ম্যানুয়ালি ইন্টারঅ্যাকশন লেটেন্সি পরীক্ষা করার জন্য সর্বনিম্ন পরিশ্রম জড়িত। একবার ইনস্টল হয়ে গেলে, এক্সটেনশনটি DevTools কনসোলে ইন্টারঅ্যাকশন ডেটা প্রদর্শন করে, যদি আপনি প্রথমে নিম্নলিখিতগুলি করেন:
- ক্রোমে, ঠিকানা বারের ডানদিকের এক্সটেনশন আইকনে ক্লিক করুন।
- ড্রপ-ডাউন মেনুতে ওয়েব ভাইটালস এক্সটেনশনটি সনাক্ত করুন।
- এক্সটেনশনের সেটিংস খুলতে ডানদিকে আইকনে ক্লিক করুন।
- বিকল্পে ক্লিক করুন।
- ফলাফল স্ক্রিনে কনসোল লগিং চেকবক্স সক্রিয় করুন, এবং তারপর সংরক্ষণ করুন ক্লিক করুন।
এটি হয়ে গেলে, Chrome DevTools-এ কনসোল খুলুন এবং আপনার ওয়েবসাইটে সন্দেহজনক ইন্টারঅ্যাকশন পরীক্ষা করা শুরু করুন। আপনি পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার সাথে সাথে কনসোলে দরকারী ডায়গনিস্টিক ডেটা উপস্থিত হয়।
একটি জাভাস্ক্রিপ্ট স্নিপেট ব্যবহার করুন
এটি যতটা দরকারী, ওয়েব ভাইটালস এক্সটেনশনটি সবার জন্য একটি কার্যকর বিকল্প নাও হতে পারে৷ ডিভাইস নিরাপত্তা নীতির কারণে কিছু পরিবেশে ব্রাউজার এক্সটেনশন ব্লক করা যেতে পারে। এক্সটেনশনগুলি মোবাইল ডিভাইসেও ইনস্টল করা যাবে না৷ আপনি যদি দূরবর্তী ডিবাগিং সহ একটি শারীরিক Android-চালিত ডিভাইসে ম্যানুয়ালি পরীক্ষা করতে চান তবে পরবর্তীটি সমস্যাযুক্ত।
ওয়েব ভাইটাল এক্সটেনশন ব্যবহার করার একটি বিকল্প পদ্ধতি হল DevTools কনসোলে কিছু জাভাস্ক্রিপ্ট কপি এবং পেস্ট করা। নিম্নলিখিত কোডটি আপনাকে প্রতিটি ইন্টারঅ্যাকশনের জন্য ওয়েব ভাইটাল এক্সটেনশনের মতো একই কনসোল আউটপুট দেয়:
let worstInp = 0;
const observer = new PerformanceObserver((list, obs, options) => {
for (let entry of list.getEntries()) {
if (!entry.interactionId) continue;
entry.renderTime = entry.startTime + entry.duration;
worstInp = Math.max(entry.duration, worstInp);
console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options);
}
});
observer.observe({
type: 'event',
durationThreshold: 0, // 16 minimum by spec
buffered: true
});
একবার আপনি নির্ধারণ করেছেন যে একটি মিথস্ক্রিয়া নির্ভরযোগ্যভাবে ধীর, তাহলে কেন এটি ধীর সে সম্পর্কে বিস্তারিত তথ্য পেতে আপনি পারফরম্যান্স প্রোফাইলারে মিথস্ক্রিয়াটি প্রোফাইল করতে পারেন।
যদি আপনি একটি ধীর মিথস্ক্রিয়া পুনরুত্পাদন করতে না পারেন?
যদি আপনার ফিল্ড ডেটা পরামর্শ দেয় যে একটি নির্দিষ্ট মিথস্ক্রিয়া ধীর, কিন্তু আপনি ল্যাবটিতে ম্যানুয়ালি সমস্যাটি পুনরুত্পাদন করতে পারবেন না? এটি কেন হতে পারে তার কয়েকটি কারণ রয়েছে এবং এটি যে কোনও ধরণের পারফরম্যান্স সমস্যা সমাধানে একটি সাধারণ চ্যালেঞ্জ।
একবারের জন্য, আপনি ইন্টারঅ্যাকশন পরীক্ষা করার সময় আপনার পরিস্থিতি আপনার ব্যবহার করা হার্ডওয়্যার এবং নেটওয়ার্ক সংযোগের উপর নির্ভরশীল। সর্বোপরি, আপনি একটি দ্রুত সংযোগে একটি দ্রুত ডিভাইস ব্যবহার করছেন—কিন্তু এর অর্থ এই নয় যে আপনার ব্যবহারকারীরা এত ভাগ্যবান৷ এই পরিস্থিতি আপনার ক্ষেত্রে প্রযোজ্য হলে আপনি তিনটি জিনিসের মধ্যে একটি করতে পারেন:
- আপনার যদি একটি শারীরিক অ্যান্ড্রয়েড-চালিত ডিভাইস থাকে, তাহলে আপনার হোস্ট মেশিনে একটি Chrome DevTools ইন্সট্যান্স খুলতে রিমোট ডিবাগিং ব্যবহার করুন এবং সেখানে ধীর মিথস্ক্রিয়া পুনরুত্পাদন করার চেষ্টা করুন। মোবাইল ডিভাইসগুলি প্রায়শই ল্যাপটপ বা ডেস্কটপ মেশিনের মতো দ্রুত হয় না, তাই এই ধরনের পরিস্থিতিতে ধীর মিথস্ক্রিয়া আরও সহজে পরিলক্ষিত হতে পারে।
- আপনার কাছে কোনো ফিজিক্যাল ডিভাইস না থাকলে, Chrome DevTools-এ CPU থ্রটলিং ফিচার চালু করুন ।
- উভয় পদক্ষেপ 1 এবং 2 একসাথে চেষ্টা করুন, কারণ আপনি একটি শারীরিক Android-চালিত ডিভাইসের জন্য DevTools উদাহরণে CPU থ্রটলিং সক্ষম করতে পারেন।
আরেকটি কারণ হতে পারে যে আপনি একটি পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার আগে লোড হওয়ার জন্য অপেক্ষা করছেন, কিন্তু আপনার ব্যবহারকারীরা তা করছেন না। আপনি যদি একটি দ্রুত নেটওয়ার্কে থাকেন, তাহলে নেটওয়ার্ক থ্রটলিং সক্ষম করে ধীর গতির নেটওয়ার্ক অবস্থার অনুকরণ করুন, তারপর পেজটি পেইন্ট হওয়ার সাথে সাথে তার সাথে ইন্টারঅ্যাক্ট করুন৷ আপনার এটি করা উচিত কারণ স্টার্টআপের সময় প্রধান থ্রেডটি প্রায়শই ব্যস্ত থাকে এবং সেই সময়ে পরীক্ষা করলে আপনার ব্যবহারকারীরা কী অনুভব করছেন তা প্রকাশ করতে পারে।
একটি ট্রেস রেকর্ড
কেন একটি মিথস্ক্রিয়া ধীর হয় সে সম্পর্কে আরও তথ্য পেতে, পরবর্তী ধাপ হল Chrome DevTools-এ কর্মক্ষমতা প্রোফাইলার ব্যবহার করা । ক্রোমের পারফরম্যান্স প্রোফাইলারে একটি মিথস্ক্রিয়া প্রোফাইল করতে, নিম্নলিখিতগুলি করুন:
- আপনি যে পৃষ্ঠাটি পরীক্ষা করতে চান সেটি খুলুন।
- Chrome DevTools খুলুন এবং পারফরম্যান্স প্যানেলে যান।
- ট্রেসিং শুরু করতে প্যানেলের উপরের বাম দিকে রেকর্ড বোতামে ক্লিক করুন।
- আপনি প্রোফাইল করতে চান মিথস্ক্রিয়া(গুলি) সঞ্চালন.
- ট্রেসিং বন্ধ করতে আবার রেকর্ড বোতামে ক্লিক করুন।
যখন প্রোফাইলারটি পপুলেট হয়, প্রথম স্থানটি দেখতে হবে প্রোফাইলারের শীর্ষে থাকা কার্যকলাপের সারাংশ। ক্রিয়াকলাপের সারাংশ শীর্ষে লাল বারগুলি দেখায় যেখানে রেকর্ডিংয়ে দীর্ঘ কাজগুলি ঘটেছে৷ এটি আপনাকে সমস্যার এলাকায় দ্রুত জুম করতে দেয়।
ক্রিয়াকলাপের সারাংশে একটি অঞ্চল টেনে এবং নির্বাচন করার মাধ্যমে আপনি সমস্যাযুক্ত অঞ্চলগুলিতে দ্রুত ফোকাস করতে পারেন। একবার আপনি যেখানে মিথস্ক্রিয়াটি ঘটেছে সেখানে ফোকাস করলে, ইন্টারঅ্যাকশন ট্র্যাক আপনাকে ইন্টারঅ্যাকশন এবং এর নীচে মূল থ্রেড ট্র্যাকে ঘটে যাওয়া কার্যকলাপগুলিকে লাইন আপ করতে সহায়তা করে:
এখান থেকে, এটি ধীর মিথস্ক্রিয়া ঘটাতে সমস্যাটির গভীরে খনন করার বিষয়। এমন অনেক জিনিস রয়েছে যা উচ্চ মিথস্ক্রিয়া বিলম্বে অবদান রাখতে পারে—যার মধ্যে কিছু এই নির্দেশিকায় আরও কভার করা হয়েছে।
ট্রেসিংয়ের বিকল্প হিসেবে লাইটহাউস টাইমস্প্যান ব্যবহার করুন
ক্রোমের পারফরম্যান্স প্রোফাইলার—যদিও ডায়াগনস্টিক তথ্য সমৃদ্ধ—অপ্রশিক্ষিতদের জন্য কিছুটা ভয় দেখাতে পারে। পারফরম্যান্স প্রোফাইলারের একটি বিকল্প হল লাইটহাউসের টাইমস্প্যান মোড। এই মোডটি ব্যবহার করতে, নিম্নলিখিতগুলি করুন:
- DevTools খোলা থাকলে, DevTools-এর Lighthouse ট্যাবে যান।
- মোড লেবেলযুক্ত বিভাগের অধীনে, টাইমস্প্যান বিকল্পটি নির্বাচন করুন।
- ডিভাইস লেবেলযুক্ত বিভাগের অধীনে ডেস্কটপ বা মোবাইল ডিভাইসের প্রকার নির্বাচন করুন।
- নিশ্চিত করুন অন্ততপক্ষে কর্মক্ষমতা লেবেলযুক্ত চেকবক্সটি বিভাগ লেবেলের অধীনে নির্বাচিত হয়েছে।
- স্টার্ট টাইমস্প্যান বোতামে ক্লিক করুন।
- আপনি যে পৃষ্ঠার জন্য ডেটা পেতে চান তার মিথস্ক্রিয়া(গুলি) পরীক্ষা করুন।
- শেষ সময়কাল বোতামে ক্লিক করুন এবং অডিট প্রদর্শিত হওয়ার জন্য অপেক্ষা করুন
- একবার লাইটহাউস ট্যাবে অডিট জমা হয়ে গেলে, আপনি লেবেলের পাশের INP লিঙ্কে ক্লিক করে INP দ্বারা অডিটগুলি ফিল্টার করতে পারেন যেখানে লেখা আছে এর সাথে প্রাসঙ্গিক অডিট দেখান ৷
এই মুহুর্তে, ব্যর্থ বা পাস করা অডিটের জন্য একটি ড্রপ-ডাউন তালিকা উপস্থিত হওয়া উচিত। আপনি যখন সেই ড্রপ-ডাউনটি প্রসারিত করবেন, তখন মিথস্ক্রিয়া চলাকালীন সময় ব্যয় করা উচিত।
কিভাবে দীর্ঘ ইনপুট বিলম্ব সনাক্ত করতে হয়
একটি জিনিস যা উচ্চ মিথস্ক্রিয়া বিলম্বে অবদান রাখতে পারে তা হল ইনপুট বিলম্ব। ইনপুট বিলম্ব হল ইন্টারঅ্যাকশনের প্রথম ধাপ। এটি সেই সময়ের সময়কাল যখন ব্যবহারকারীর ক্রিয়াটি অপারেটিং সিস্টেম দ্বারা প্রথম প্রাপ্ত হয় সেই বিন্দুতে যেখানে ব্রাউজার সেই ইনপুট দ্বারা ট্রিগার হওয়া প্রথম ইভেন্টটি প্রক্রিয়াকরণ শুরু করতে সক্ষম হয়৷ ইন্টারঅ্যাকশনের জন্য ইভেন্ট কলব্যাকগুলি চলতে শুরু করার সাথে সাথে ইনপুট বিলম্ব ঠিক শেষ হয়৷
ক্রোমের পারফরম্যান্স প্রোফাইলারে ইনপুট বিলম্ব শনাক্ত করা ইন্টারঅ্যাকশন ট্র্যাকে একটি ইন্টারঅ্যাকশনের সূচনা সনাক্ত করে এবং তারপর সেই ইন্টারঅ্যাকশনের জন্য ইভেন্ট কলব্যাক কখন চলতে শুরু করে তা খুঁজে বের করে করা যেতে পারে।
কিছু পরিমাণ ইনপুট বিলম্ব সর্বদা প্রত্যাশিত হওয়া উচিত, কারণ ব্রাউজারে ইনপুট ইভেন্ট পাস করতে অপারেটিং সিস্টেমের কিছু সময় লাগে—কিন্তু ইনপুট বিলম্ব কতক্ষণ তার উপর আপনার কিছু নিয়ন্ত্রণ আছে। মূল থ্রেডে কাজ চলছে কিনা তা খুঁজে বের করা যা আপনার কলব্যাকগুলিকে চলতে বাধা দিচ্ছে।
পূর্ববর্তী চিত্রে, একটি তৃতীয় পক্ষের স্ক্রিপ্ট থেকে একটি টাস্ক চলছে যখন ব্যবহারকারী পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করে এবং সেইজন্য ইনপুট বিলম্ব প্রসারিত করে৷ বর্ধিত ইনপুট বিলম্ব ইন্টারঅ্যাকশনের বিলম্বকে প্রভাবিত করে এবং তাই পৃষ্ঠার INP-কে প্রভাবিত করতে পারে।
ব্যয়বহুল ইভেন্ট কলব্যাকগুলি কীভাবে সনাক্ত করবেন
ইভেন্ট কলব্যাক ইনপুট বিলম্বের পরপরই চলে। যদি একটি ইভেন্ট কলব্যাক খুব বেশি সময় ধরে চলে, তাহলে এটি ব্রাউজারকে পরবর্তী ফ্রেমটি উপস্থাপন করতে বিলম্ব করে এবং একটি মিথস্ক্রিয়াটির মোট বিলম্বে উল্লেখযোগ্যভাবে যোগ করতে পারে। দীর্ঘস্থায়ী ইভেন্ট কলব্যাকগুলি গণনাগতভাবে ব্যয়বহুল প্রথম-পক্ষ বা তৃতীয়-পক্ষ জাভাস্ক্রিপ্টের ফলাফল হতে পারে—এবং কিছু ক্ষেত্রে, উভয়ই।
ব্যয়বহুল ইভেন্ট কলব্যাক খোঁজা একটি নির্দিষ্ট মিথস্ক্রিয়া জন্য একটি ট্রেস মধ্যে নিম্নলিখিত পর্যবেক্ষণ করে করা যেতে পারে:
- ইভেন্ট কলব্যাকের সাথে যুক্ত টাস্কটি একটি দীর্ঘ কাজ কিনা তা নির্ধারণ করুন। একটি ল্যাব সেটিংয়ে দীর্ঘ কাজগুলিকে আরও নির্ভরযোগ্যভাবে প্রকাশ করতে, আপনাকে পারফরম্যান্স প্যানেলে CPU থ্রটলিং সক্ষম করতে হতে পারে, অথবা একটি নিম্ন থেকে মধ্য-স্তরের Android-চালিত ডিভাইসের সাথে সংযোগ করতে হবে এবং দূরবর্তী ডিবাগিং ব্যবহার করতে হবে।
- যে টাস্কটি ইভেন্ট কলব্যাক চালায় তা যদি একটি দীর্ঘ টাস্ক হয়, তাহলে ইভেন্ট হ্যান্ডলার এন্ট্রিগুলি সন্ধান করুন-উদাহরণস্বরূপ, ইভেন্টের মতো নাম সহ এন্ট্রিগুলি: ক্লিক করুন - এন্ট্রির উপরের ডানদিকে একটি লাল ত্রিভুজ আছে কল স্ট্যাকের মধ্যে৷ এগুলি ব্যয়বহুল ইভেন্ট কলব্যাক।
ব্যয়বহুল ইভেন্ট কলব্যাকগুলি মোকাবেলা করতে, নিম্নলিখিত কৌশলগুলির মধ্যে একটি চেষ্টা করুন:
- যতটা সম্ভব কম কাজ করুন। একটি ব্যয়বহুল ইভেন্ট কলব্যাক যা ঘটে তা কি কঠোরভাবে প্রয়োজনীয়? যদি তা না হয়, আপনি যদি পারেন তবে সেই কোডটি সম্পূর্ণভাবে মুছে ফেলার কথা বিবেচনা করুন, অথবা যদি আপনি না করতে পারেন তবে পরবর্তী সময়ে এটির প্রয়োগকে পিছিয়ে দিন৷ সাহায্য করার জন্য আপনি ফ্রেমওয়ার্ক বৈশিষ্ট্যগুলির সুবিধাও নিতে পারেন। উদাহরণ স্বরূপ, React এর
PureComponentক্লাস এবং memoization ফিচার অপ্রয়োজনীয় রেন্ডারিং কাজ এড়িয়ে যেতে পারে যখন কোনো কম্পোনেন্টের জন্য প্রপস এবং স্টেট পরিবর্তন না হয়। - ইভেন্ট কলব্যাকে নন-রেন্ডারিং কাজকে পরবর্তী সময়ে স্থগিত করুন। দীর্ঘ কাজগুলি মূল থ্রেডের কাছে তুলে ধরে ভেঙে ফেলা যেতে পারে। যখনই আপনি মূল থ্রেডে যোগ দেন, আপনি বর্তমান টাস্কের সম্পাদন শেষ করছেন এবং বাকি কাজটিকে একটি পৃথক টাস্কে বিভক্ত করছেন। এটি রেন্ডারারকে ইউজার ইন্টারফেসের আপডেটগুলি প্রক্রিয়া করার সুযোগ দেয় যা ইভেন্ট কলব্যাকের আগে সম্পাদিত হয়েছিল। আপনি যদি প্রতিক্রিয়া ব্যবহার করে থাকেন তবে এর ট্রানজিশন বৈশিষ্ট্য আপনার জন্য এটি করতে পারে।
এই কৌশলগুলিকে কাজে লাগিয়ে, আপনি এমন জায়গায় আপনার ইভেন্ট কলব্যাকগুলি পেতে সক্ষম হবেন যেখানে তারা ব্যবহারকারীর ইনপুটে আরও দ্রুত সাড়া দিচ্ছে৷
উপস্থাপনা বিলম্ব কিভাবে সনাক্ত করা যায়
দীর্ঘ ইনপুট বিলম্ব এবং ব্যয়বহুল ইভেন্ট কলব্যাক দরিদ্র INP এর একমাত্র সম্ভাব্য অপরাধী নয়। কখনও কখনও ইভেন্ট কলব্যাক কোডের সামান্য পরিমাণের প্রতিক্রিয়া হিসাবে যে রেন্ডারিং আপডেটগুলি ঘটে তা ব্যয়বহুল হতে পারে। একটি ইন্টারঅ্যাকশনের ফলাফল প্রতিফলিত করার জন্য ব্যবহারকারী ইন্টারফেসে ভিজ্যুয়াল আপডেট রেন্ডার করতে ব্রাউজার যে সময় নেয় তা উপস্থাপনা বিলম্ব হিসাবে পরিচিত।
উচ্চ মিথস্ক্রিয়া বিলম্বিত হওয়ার সমস্ত সম্ভাব্য কারণগুলির মধ্যে, রেন্ডারিং কাজটি সমস্যা সমাধান এবং ঠিক করা সবচেয়ে কঠিন হতে পারে, তবে ফলাফলটি প্রচেষ্টার মূল্যবান। অত্যধিক রেন্ডারিং কাজ নিম্নলিখিত যে কোনো কারণে হতে পারে:
- বড় DOM মাপ। একটি পৃষ্ঠার উপস্থাপনা আপডেট করার জন্য প্রয়োজনীয় রেন্ডারিং কাজ প্রায়ই পৃষ্ঠার DOM আকারের সাথে বৃদ্ধি পায়। আরও তথ্যের জন্য, পড়ুন কিভাবে বড় DOM আকারগুলি ইন্টারঅ্যাক্টিভিটিকে প্রভাবিত করে—এবং আপনি এটি সম্পর্কে কী করতে পারেন ৷
- জোরপূর্বক reflows. এটি ঘটে যখন আপনি জাভাস্ক্রিপ্টের উপাদানগুলিতে শৈলী পরিবর্তনগুলি প্রয়োগ করেন এবং তারপর সেই কাজের ফলাফলগুলি অনুসন্ধান করেন৷ ফলাফল হল ব্রাউজারকে অন্য কিছু করার আগে লেআউটের কাজ করতে হবে, যাতে ব্রাউজার আপডেট করা শৈলীগুলি ফিরিয়ে দিতে পারে। জোরপূর্বক রিফ্লো এড়ানোর বিষয়ে আরও তথ্য এবং টিপসের জন্য, বড়, জটিল লেআউট এবং লেআউট থ্র্যাশিং এড়িয়ে চলুন পড়ুন।
-
requestAnimationFrameকলব্যাকগুলিতে অতিরিক্ত বা অপ্রয়োজনীয় কাজ।requestAnimationFrame()কলব্যাকগুলি ইভেন্ট লুপের রেন্ডারিং পর্বের সময় চালানো হয় এবং পরবর্তী ফ্রেমটি উপস্থাপন করার আগে অবশ্যই সম্পূর্ণ করতে হবে। আপনি যদিrequestAnimationFrame()ব্যবহার করেন এমন কাজ করার জন্য যাতে ইউজার ইন্টারফেসে কোনো পরিবর্তন আসে না, তাহলে বুঝুন আপনি পরবর্তী ফ্রেমে বিলম্ব করতে পারেন। -
ResizeObserverকলব্যাক। এই ধরনের কলব্যাকগুলি রেন্ডারিংয়ের আগে চলে এবং পরবর্তী ফ্রেমের উপস্থাপনা বিলম্বিত হতে পারে যদি তাদের মধ্যে কাজটি ব্যয়বহুল হয়। ইভেন্ট কলব্যাকের মতো, পরবর্তী ফ্রেমের জন্য প্রয়োজন নেই এমন কোনো যুক্তি স্থগিত করুন।
INP সমস্যা সমাধান একটি পুনরাবৃত্তিমূলক প্রক্রিয়া
উচ্চ মিথস্ক্রিয়া বিলম্বের কারণ কী তা খুঁজে বের করা যা দুর্বল INP-তে অবদান রাখে তা অনেক কাজ করে—কিন্তু আপনি যদি কারণগুলিকে পিন করতে পারেন তবে আপনি সেখানে অর্ধেক হয়ে গেছেন। দুর্বল INP-এর সমস্যা সমাধানের জন্য একটি পদ্ধতিগত পদ্ধতি অনুসরণ করে, আপনি নির্ভরযোগ্যভাবে কি সমস্যা সৃষ্টি করছে তা পিন করতে পারেন এবং সঠিক সমাধানে আরও দ্রুত পৌঁছাতে পারেন। পর্যালোচনা:
- ধীর মিথস্ক্রিয়া খুঁজে পেতে ক্ষেত্রের ডেটার উপর নির্ভর করুন ।
- সেগুলি পুনরুত্পাদনযোগ্য কিনা তা দেখতে ল্যাবে সমস্যাযুক্ত ক্ষেত্রের মিথস্ক্রিয়া ম্যানুয়ালি পরীক্ষা করুন।
- দীর্ঘ ইনপুট বিলম্ব, ব্যয়বহুল ইভেন্ট কলব্যাক বা ব্যয়বহুল রেন্ডারিং কাজের কারণে কারণটি সনাক্ত করুন।
- পুনরাবৃত্তি করুন।
এর মধ্যে শেষটি সবচেয়ে গুরুত্বপূর্ণ। পৃষ্ঠার পারফরম্যান্স উন্নত করতে আপনি অন্যান্য কাজের মতোই, সমস্যা সমাধান এবং INP উন্নত করা একটি চক্রাকার প্রক্রিয়া। আপনি যখন একটি ধীর মিথস্ক্রিয়া ঠিক করেন, তখন পরবর্তীতে যান এবং ফলাফলগুলি দেখতে না হওয়া পর্যন্ত পুনরাবৃত্তি করুন। সতর্ক থাকুন!