INP ঠিক করা: কীভাবে React অ্যাপের ধীরগতি দূর করবেন
আপনার ড্যাশবোর্ড ধীরগতির মনে হচ্ছে। আপনার API দ্রুত। Lighthouse সবুজ স্কোর দেখাচ্ছে। তবুও প্রতিটি ক্লিকের ক্ষেত্রে ল্যাগ হচ্ছে।
এটি একটি INP সমস্যা।
Interaction to Next Paint (INP) পরিমাপ করে যে একটি পেজ ব্যবহারকারীর প্রতিক্রিয়ায় সাড়া দিতে কতটা সময় নেয়। এটি ২০২৪ সালের মার্চ মাসে First Input Delay (FID)-এর স্থলাভিষিক্ত হয়েছে। FID শুধুমাত্র প্রথম ক্লিকটি লক্ষ্য করত; কিন্তু INP প্রতিটি ইন্টারঅ্যাকশন পর্যবেক্ষণ করে।
২০০ ms-এর নিচে INP স্কোর থাকলে তা দ্রুত মনে হয়। ৫০০ ms-এর বেশি হলে তা ধীরগতির মনে হয়।
INP ঠিক করতে এটিকে তিনটি পর্যায়ে ভাগ করুন:
- Input Delay – একটি ক্লিক এবং আপনার কোড শুরু হওয়ার মধ্যবর্তী সময়। এটি তখন ঘটে যখন main thread ব্যস্ত থাকে।
- Processing Time – আপনার ফাংশন এবং React state আপডেটগুলো চলতে কত সময় লাগে।
- Presentation Delay – আপনার কোড শেষ হওয়া এবং ব্রাউজার স্ক্রিন পেইন্ট (paint) করার মধ্যবর্তী সময়।
Input Delay ঠিক করা
দীর্ঘ টাস্কগুলো main thread-কে ব্লক করে দেয়। যদি কোনো টাস্ক ৫০ ms-এর বেশি সময় নেয়, তবে এটি ক্লিকগুলোকে আটকে দেয়। দীর্ঘ টাস্কগুলোকে ছোট ছোট অংশে ভাগ করতে scheduler.yield() কল করুন যাতে ব্রাউজার সেগুলোর মাঝখানে ক্লিকগুলো প্রসেস করতে পারে।
Processing Time ঠিক করা
UI রেসপন্সিভ রাখতে React-এর transition API ব্যবহার করুন।
startTransition– জরুরি নয় এমন আপডেটগুলোকে এতে মুড়িয়ে (wrap) দিন। React একটি ভারী আপডেট সাময়িকভাবে থামিয়ে দিয়ে নতুন ক্লিক হ্যান্ডেল করতে পারে।useDeferredValue– যে ভ্যালুগুলো তাৎক্ষণিকভাবে আপডেট করার প্রয়োজন নেই, সেগুলোকে বিলম্বিত (defer) করুন।
এই API গুলো কোডকে দ্রুত করে না; বরং এগুলো কোডকে interruptible বা বাধাযোগ্য করে তোলে, যা আপনার INP কমিয়ে আনে।
Presentation Delay ঠিক করা
অতিরিক্ত DOM এলিমেন্ট পেইন্ট (paint) প্রক্রিয়াকে ধীর করে দেয়।
- স্ক্রিনের বাইরে থাকা এলিমেন্টগুলোর রেন্ডারিং এড়িয়ে চলতে CSS-এ
content-visibility: autoব্যবহার করুন। - Layout thrashing বন্ধ করুন: একই লুপের মধ্যে কখনো স্টাইল রিড (read) করবেন না এবং তারপর স্টাইল রাইট (write) করবেন না। পরিবর্তে রিড এবং রাইটগুলোকে ব্যাচ (batch) আকারে করুন।
- লম্বা লিস্টগুলোকে ভার্চুয়ালাইজ (virtualize) করুন।
কীভাবে পরিমাপ করবেন
Lighthouse একটি ল্যাব পরিবেশে চলে এবং এটি একজন প্রকৃত মানুষের মতো আপনার বাটনগুলোতে ক্লিক করতে পারে না। web-vitals লাইব্রেরিটি ইনস্টল করুন এবং আপনার ব্যবহারকারীদের কাছ থেকে প্রকৃত ডেটা সংগ্রহ করুন।