আপনার পেজ দ্রুত লোড হচ্ছে কিন্তু স্লো মনে হচ্ছে? এটি হলো INP
আপনার Lighthouse রিপোর্ট সবুজ দেখাচ্ছে। LCP ঠিক আছে। CLS ঠিক আছে। পেজটি দ্রুত লোড হচ্ছে।
তারপর আপনার রিয়েল-ওয়ার্ল্ড স্কোর কমে যায়। আপনি বুঝতে পারেন না কেন।
সমস্যাটি সম্ভবত INP। Interaction to Next Paint ২০২৪ সালের মার্চ মাসে FID-এর স্থলাভিষিক্ত হয়েছে। FID শুধুমাত্র প্রথম বিলম্বটি পরিমাপ করত। INP একজন ব্যবহারকারী আপনার পেজে থাকা অবস্থায় প্রতিটি ইন্টারঅ্যাকশন পরিমাপ করে। এটি সবচেয়ে ধীরগতির ইন্টারঅ্যাকশনটি রিপোর্ট করে।
INP কোনো লোডিং মেট্রিক নয়। এটি একটি রেসপন্সিভনেস মেট্রিক। এটি একটি প্রশ্নের উত্তর দেয়: আপনি যখন ক্লিক করেন বা টাইপ করেন, স্ক্রিন পরিবর্তন হতে কতক্ষণ সময় লাগে?
Google এই বাকেটগুলো ব্যবহার করে:
- ২০০ms বা তার কম হলে ভালো।
- ৫০০ms-এর বেশি হলে খারাপ।
একটি সাইট এক সেকেন্ডের মধ্যে লোড হতে পারে কিন্তু তবুও ব্যর্থ হতে পারে। দ্রুত লোড হওয়া এবং দ্রুত রেসপন্স করা দুটি ভিন্ন কাজ।
Lighthouse টুলগুলো প্রায়শই INP মিস করে। Lighthouse আপনার বাটনগুলোতে ক্লিক করে না। এটি একটি আনুমানিক ধারণা দেয়। আপনার ল্যাব রিপোর্ট সবুজ হতে পারে কিন্তু ফিল্ড স্কোর লাল হতে পারে।
আসল সংখ্যাটি দেখতে এই কোডটি ব্যবহার করুন:
import { onINP } from 'web-vitals';
onINP(function (metric) {
console.log('INP', metric.value, metric.entries);
});
এটি ধীরগতির ইন্টারঅ্যাকশন এবং নির্দিষ্ট এলিমেন্টটি লগ করে।
INP সমস্যাগুলো ঘটে কারণ মেইন থ্রেড (main thread) ব্যস্ত থাকে। একটি JavaScript টাস্ক শেষ না হওয়া পর্যন্ত ব্রাউজার রেসপন্সটি পেইন্ট (paint) করতে পারে না।
সাধারণ কারণসমূহ:
- প্রতিটি ক্লিকের সাথে ভারী ইভেন্ট হ্যান্ডলার (event handlers) চলা।
- চ্যাট উইজেট বা অ্যানালিটিক্সের মতো থার্ড-পার্টি স্ক্রিপ্ট।
- ক্রমাগত DOM রিড এবং রাইট করার ফলে লেআউট থ্র্যাশিং (Layout thrashing)।
- ফ্রেমওয়ার্ক হাইড্রেশন (hydration) টাস্ক।
দীর্ঘ টাস্কগুলোকে ছোট ছোট ভাগে ভাগ করে এটি সমাধান করুন। ধাপগুলোর মাঝে ব্রাউজারকে কিছুটা বিরতি দিন:
async function onClick() {
doUrgentPart();
await yieldToMain();
doExpensivePart();
}
ধীরগতির কাজ শুরু হওয়ার আগে ব্রাউজারকে UI পেইন্ট করার সুযোগ দিতে yieldToMain ব্যবহার করুন।
অন্যান্য সমাধান:
- যে স্ক্রিপ্টগুলো তাৎক্ষণিকভাবে প্রয়োজন নেই সেগুলো ডিফার (defer) করুন।
- থার্ড-পার্টি উইজেটগুলো অডিট করুন।
- দামী (expensive) হ্যান্ডলারগুলোকে ডিবাউন্স (debounce) করুন।
- আপনার DOM রিড এবং রাইটগুলোকে ব্যাচ (batch) করুন।
আপনার রিয়েল স্কোর যদি কম হয়, তবে LCP-এর দিকে তাকিয়ে না থেকে পরিবর্তে আপনার ইন্টারঅ্যাকশনগুলো পরিমাপ করুন।
Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn