INP ভারী অ্যানালিটিক্সকে শাস্তি দেয়: কেন আপনার ট্র্যাকার মেইন থ্রেডে আছে
Interaction to Next Paint হলো সেই Core Web Vital যেটিতে সবচেয়ে বেশি সাইট ব্যর্থ হয়, এবং ফিল্ড ডেটা দেখায় যে বিহেভিয়র-ট্র্যাকিং স্ক্রিপ্ট একটি প্রধান কারণ। সমাধান হলো মেইন থ্রেডে কম কাজ পাঠানো।
Interaction to Next Paint (INP) হলো সেই Core Web Vital যেটিতে ডেভেলপাররা সবচেয়ে বেশি ব্যর্থ হয়, এবং এর কারণ আপনার <head>-এর ভেতরেই বসে আছে। INP ২০২৪ সালে একটি স্থিতিশীল Core Web Vital হয়ে First Input Delay-এর জায়গা নেয়, এবং এটি এমন কিছু পরিমাপ করে যা FID কখনও পারেনি: একটি পেজ তার পুরো জীবনকাল জুড়ে প্রতিটি ক্লিক, ট্যাপ ও কীপ্রেসে কতটা সাড়া দিয়ে চলে।
এই মেট্রিকটি সেই ধরনের JavaScript-এর প্রতি নির্মম, যা সার্ভেইল্যান্স অ্যানালিটিক্স পাঠায়। যদি আপনার ট্র্যাকার মেইন থ্রেডে অর্থবহ কাজ করে, তবে আপনার ব্যবহারকারীদের প্রতিটি ইন্টারঅ্যাকশন সেই খরচ উত্তরাধিকারসূত্রে পায়।
INP আসলে কী পরিমাপ করে
INP একটি পেজে সব ক্লিক, ট্যাপ ও কীপ্রেসের ৭৫তম পার্সেন্টাইল-এ ইন্টারঅ্যাকশনের লেটেন্সি রিপোর্ট করে। ২০০ ms বা তার কম "ভালো"; ২০০ থেকে ৫০০ ms "উন্নতি প্রয়োজন"; ৫০০ ms-এর বেশি "খারাপ"।
প্রতিটি ইন্টারঅ্যাকশন তিনটি পর্যায়ে ভাগ হয়:
- ইনপুট ডিলে (input delay) — মেইন থ্রেড ব্যস্ত থাকায় আপনার ইভেন্ট হ্যান্ডলারগুলো শুরু হওয়ার আগ পর্যন্ত সময়।
- প্রসেসিং সময়কাল — আপনার ইভেন্ট হ্যান্ডলারের কলব্যাকগুলো চলতে যত সময় নেয়।
- প্রেজেন্টেশন ডিলে (presentation delay) — কলব্যাক শেষ হওয়া থেকে ব্রাউজার পরবর্তী ফ্রেম আঁকা পর্যন্ত সময়।
ভারী অ্যানালিটিক্স তিনটি পর্যায়েই ক্ষতি করে। যে ট্র্যাকার একটি বড় bundle পার্স করে, কনসেন্ট লজিক মূল্যায়ন করে, একটি tag manager কিউ ব্যাচ করে, কিংবা ফিঙ্গারপ্রিন্ট তৈরি করতে লেআউট পড়ে — সেটি ঠিক তখনই মেইন থ্রেড দখল করে যখন ব্যবহারকারী ইন্টারঅ্যাক্ট করার চেষ্টা করছেন।
লং টাস্কই হলো প্রক্রিয়াটি
একটি টাস্ক চলাকালে ব্রাউজার কোনো ইন্টারঅ্যাকশন প্রসেস করতে পারে না। ৫০ ms-এর বেশি সময় চলা যেকোনো টাস্ক একটি লং টাস্ক, এবং ৫০ ms-এর বেশি অংশটি মৃত সময়, যার মধ্যে ক্লিকগুলো কিউতে জমতে থাকে।
যে tag manager ডজনখানেক ভেন্ডর স্ক্রিপ্ট সিঙ্ক্রোনাসভাবে লোড ও এক্সিকিউট করে, সেটি লং টাস্কের একটি ঝরনা তৈরি করে। ব্যবহারকারী ক্লিক করেন, কিছুই হয় না, আবার ক্লিক করেন — আর মেইন থ্রেড অবশেষে মুক্ত হলে কিউতে জমা ইনপুটগুলো একসাথে সব ফায়ার করে।
এটি তাত্ত্বিক নয়। HTTP Archive-এর ২০২৪ Web Almanac পেয়েছে যে ইউজার-বিহেভিয়র স্ক্রিপ্ট — session replay, হিটম্যাপ, বিহেভিয়রাল অ্যানালিটিক্স — যুক্ত পেজগুলো মোবাইলে মাত্র ৩৭% ক্ষেত্রে ভালো INP অর্জন করেছে, যেখানে ডেস্কটপে ৬০%। কনসেন্ট-ম্যানেজমেন্ট স্ক্রিপ্ট — এই টুলগুলোর প্রয়োজনীয় ব্যানার — মোবাইলের মাত্র ৫৩% পেজে INP পাস করেছে। যে ইনস্ট্রুমেন্টেশন "ব্যবহারকারীদের বোঝার" কথা, তা সক্রিয়ভাবে তাদের অভিজ্ঞতা নষ্ট করছে।
যে আর্কিটেকচার এটি এড়ায়
সমাধানটি কাঠামোগত, কোনো টগল করার ফ্ল্যাগ নয়। কম কোড পাঠান, এবং তা ক্রিটিক্যাল পাথ থেকে দূরে রাখুন।
একটি privacy-first ট্র্যাকার এতটাই ছোট হতে পারে যে এর পার্সিং ও এক্সিকিউশন কখনও লং টাস্ক হিসেবে নথিভুক্তই হয় না। Monoid-এর ট্র্যাকার প্রায় ২ KB, এর কোনো dependency নেই, কোনো কুকি সেট করে না, এবং কোনো লেআউট পড়ে না — তাই ফিঙ্গারপ্রিন্ট করার কিছু নেই এবং চালানোর মতো ভারী কিছু নেই। এটি একটিমাত্র keepalive রিকোয়েস্টে একটি পেজভিউ রেকর্ড করে এবং বাকি সময় নিষ্ক্রিয় থাকে:
fetch('/collect', {
method: 'POST',
keepalive: true,
body: JSON.stringify({ site_id, path: location.pathname })
})
keepalive: true রিকোয়েস্টটিকে মেইন থ্রেড আটকে না রেখেই পেজের পরেও টিকে থাকতে দেয়, তাই নেভিগেশন ও unload কখনও কোনো beacon-এর অপেক্ষায় ব্লক হয় না।
আপনি যখন নিজের স্ক্রিপ্ট চালান, কাজের ব্লকগুলোর মাঝে মেইন থ্রেড ছেড়ে দিন যাতে কিউতে জমা ইন্টারঅ্যাকশনগুলো চলতে পারে:
async function processQueue(items) {
for (const item of items) {
handle(item)
if (navigator.scheduling?.isInputPending?.()) {
await scheduler.yield()
}
}
}
scheduler.yield() একটি লং টাস্ককে টুকরো করে ভাগ করে এবং অগ্রাধিকারসহ পুনরায় শুরু করে, যাতে কোনো থার্ড-পার্টি স্ক্রিপ্ট কিউতে আপনার continuation-এর আগে ঢুকে পড়তে না পারে।
ফিল্ডে পরিমাপ করুন, ল্যাবে নয়
Lighthouse INP রিপোর্ট করতে পারে না, কারণ INP কেবল তখনই অস্তিত্বে আসে যখন একজন বাস্তব ব্যক্তি ইন্টারঅ্যাক্ট করেন। ল্যাব টুল অনুমান করে; এগুলো সাড়াদানশীলতা পরিমাপ করে না।
ফিল্ড ডেটা ব্যবহার করুন। Chrome User Experience Report (CrUX) অপ্ট-ইন করা Chrome ব্যবহারকারীদের বাস্তব ইন্টারঅ্যাকশন একত্র করে, এবং Search Console-এর Core Web Vitals রিপোর্ট একই ডেটা প্রতি URL গ্রুপ অনুযায়ী দেখায়। যদি আপনার CrUX INP ভালো কিন্তু ল্যাব Total Blocking Time বেশি হয়, তবে আপনার হাতে জায়গা আছে; যদি CrUX INP খারাপ হয়, আপনার ব্যবহারকারীরা ইতিমধ্যেই তা টের পাচ্ছেন।
প্রাইভেসির যুক্তি ও পারফরম্যান্সের যুক্তি এখানে এক জায়গায় মেলে। যে ট্র্যাকার কোনো স্টোরেজ পড়ে না, কোনো ফিঙ্গারপ্রিন্ট তৈরি করে না, এবং কোনো ভেন্ডর ঝরনা পাঠায় না — তার মেইন থ্রেডে করার মতো প্রায় কিছুই নেই, আর ঠিক সেই কারণেই এটি আপনার INP-তে কখনও দেখা দেয় না। সার্ভেইল্যান্স মিলিসেকেন্ডে ব্যয়বহুল, শুধু আস্থায় নয়।
Comments
Loading comments…