আপনার পেজ দ্রুত লোড হচ্ছে কিন্তু তবুও কি ধীরগতির মনে হচ্ছে?
আপনার Lighthouse রিপোর্ট সবুজ। আপনার LCP এবং CLS স্কোর ভালো দেখাচ্ছে। আপনার পেজ দ্রুত লোড হচ্ছে। কিন্তু তারপর আপনার রিয়েল-ওয়ার্ল্ড স্কোর কমে যায়। আপনি বুঝতে পারছেন না কেন।
সমস্যাটি প্রায়শই INP-এর কারণে হয়।
INP মানে হলো Interaction to Next Paint। ২০২৪ সালের মার্চ মাসে এটি Core Web Vital হিসেবে FID-এর জায়গা নিয়েছে। FID শুধুমাত্র আপনার প্রথম ক্লিকের বিলম্ব পরিমাপ করত। INP একজন ব্যক্তি আপনার পেজ ব্যবহার করার সময় প্রতিটি ইন্টারঅ্যাকশন পরিমাপ করে। এটি সবচেয়ে ধীরগতির ইন্টারঅ্যাকশনটি রিপোর্ট করে।
INP কোনো লোডিং মেট্রিক নয়। এটি একটি রেসপন্সিভনেস (responsiveness) মেট্রিক। এটি একটি প্রশ্ন করে: আপনি যখন ক্লিক করেন বা টাইপ করেন, স্ক্রিন পরিবর্তন হতে কতক্ষণ সময় লাগে?
Google এই নিয়মগুলো অনুসরণ করে:
- ২০০ms বা তার কম হলে ভালো।
- ৫০০ms-এর বেশি হলে খারাপ।
একটি সাইট এক সেকেন্ডের মধ্যে লোড হতে পারে কিন্তু তবুও ব্যর্থ হতে পারে। দ্রুত লোড হওয়া এবং দ্রুত রেসপন্স করা—এ দুটি সম্পূর্ণ আলাদা কাজ।
Lighthouse আপনার বাটনগুলোতে ক্লিক করে না। এটি আপনাকে একটি আনুমানিক ধারণা দেয়। আপনার ল্যাব রিপোর্ট সবুজ হতে পারে এবং একই সাথে ফিল্ড স্কোর লাল হতে পারে।
আসল সংখ্যাটি দেখতে, ইন্টারঅ্যাকশনগুলো যেভাবে ঘটছে সেভাবে পরিমাপ করুন। এই কোডটি ব্যবহার করুন:
import { onINP } from 'web-vitals';
onINP(function (metric) {
console.log('INP', metric.value, metric.entries);
});
এটি ধীরগতির ইন্টারঅ্যাকশন এবং এর পেছনের এলিমেন্টটি লগ করে। এখন আপনি অনুমানের বদলে আসল সমস্যাগুলো সমাধান করতে পারবেন।
যখন মেইন থ্রেড (main thread) ব্যস্ত থাকে তখন INP সমস্যা দেখা দেয়। একটি JavaScript টাস্ক শেষ না হওয়া পর্যন্ত ব্রাউজার রেসপন্সটি পেইন্ট (paint) করতে পারে না। একটি দীর্ঘ টাস্ক ইন্টারঅ্যাকশনকে বাধাগ্রস্ত করে।
সাধারণ কারণসমূহ:
- প্রতিটি ক্লিকের সময় অতিরিক্ত কাজ করা হেভি ইভেন্ট হ্যান্ডলার (heavy event handlers)।
- চ্যাট উইজেট বা অ্যানালিটিক্সের মতো থার্ড-পার্টি স্ক্রিপ্ট যা দীর্ঘ টাস্ক চালায়।
- লুপের মধ্যে DOM রিড এবং রাইট করার ফলে হওয়া লেআউট থ্রাশ (Layout thrash)।
- ফ্রেমওয়ার্ক হাইড্রেশন (hydration) প্রক্রিয়া।
আপনি দীর্ঘ টাস্কগুলোকে ছোট ছোট ভাগে ভাগ করে এটি ঠিক করতে পারেন। ব্রাউজারকে কিছুটা বিরতি দিন।
async function onClick() {
doUrgentPart();
await yieldToMain();
doExpensivePart();
}
লক্ষ্য হলো ধীরগতির কাজ শুরু হওয়ার আগেই রেসপন্সটি পেইন্ট করা।
অন্যান্য পদক্ষেপ:
- যে স্ক্রিপ্টগুলোর তাৎক্ষণিক প্রয়োজন নেই সেগুলো ডিফার (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