কীভাবে একটি 2 KB অ্যানালিটিক্স ট্র্যাকার আপনার Core Web Vitals সবুজ রাখে
প্রচলিত অ্যানালিটিক্স স্ক্রিপ্টগুলি এতটাই ভারী যে এগুলো আপনার Lighthouse স্কোর পরিবর্তন করতে পারে। একটি হালকা ট্র্যাকার ভিন্নভাবে কী করে — এবং কেন এটি বাস্তব ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ, তা এখানে দেওয়া হলো।
Core Web Vitals এখন একটি র্যাঙ্কিং সিগন্যাল। একটি ধীর অ্যানালিটিক্স স্ক্রিপ্ট এখন আর শুধু একটি অসুবিধা নয় — এটি আপনার SEO এবং ধীর সংযোগের প্রতিটি দর্শনার্থীর অভিজ্ঞতার উপর সরাসরি আঘাত। একটি স্ক্রিপ্ট দিয়ে আপনার সাইটের ট্রাফিক পরিমাপ করার পরিহাস, যা আপনার সাইটকে নিম্নমানের করে, তা বাস্তব।
প্রচলিত অ্যানালিটিক্স স্ক্রিপ্ট আপনার কী খরচ করে
Google Analytics 4-এর গ্লোবাল সাইট ট্যাগ স্থানান্তরিত অবস্থায় প্রায় 45 KB। লোড হওয়ার সময় এটি বেশ কয়েকটি নেটওয়ার্ক অনুরোধ করে — collect.js-এ, measurement protocol-এ এবং কখনো কখনো অতিরিক্ত ফিচার স্ক্রিপ্টে। 4G সংযোগে একটি মোবাইল ডিভাইসে, আপনার পেজ ইন্টার্যাক্টিভ হওয়ার আগেই এটি একটি পরিমাপযোগ্য বিলম্ব।
প্রভাব তিনটি উপায়ে দেখা যায়। প্রথমত, স্ক্রিপ্ট অনুরোধটি নিজেই নেটওয়ার্ক ব্যান্ডউইথের জন্য আপনার কন্টেন্টের সাথে প্রতিযোগিতা করে। দ্বিতীয়ত, যেকোনো সিঙ্ক্রোনাস এক্সিকিউশন মেইন থ্রেডকে ব্লক করে। তৃতীয়ত, প্রতিটি পরবর্তী অ্যানালিটিক্স ইভেন্ট (session start, page_view, engagement) অতিরিক্ত আউটবাউন্ড অনুরোধ ট্রিগার করে।
একটি হালকা ট্র্যাকার কীভাবে গণিতকে পরিবর্তন করে
Monoid-এর ট্র্যাকার minified এবং gzipped অবস্থায় 2 KB-এর কম। এটি একটি সাধারণ async অ্যাট্রিবিউট দিয়ে লোড হয়, যার অর্থ ব্রাউজার এটি ব্যাকগ্রাউন্ডে ডাউনলোড করে HTML পার্সিং বা রেন্ডারিং ব্লক না করে। Largest Contentful Paint প্রভাবিত হয় না কারণ স্ক্রিপ্টটি কখনো ক্রিটিক্যাল রেন্ডারিং পাথে বসে না।
যখন একটি পেজভিউ ট্রিগার হয়, ট্র্যাকার কালেকশন এন্ডপয়েন্টে একটি একক POST পাঠায়:
fetch('/collect', {
method: 'POST',
keepalive: true,
body: JSON.stringify({ site_id, path, referrer, ... })
})
keepalive: true ফ্ল্যাগটি হলো মূল বিবরণ। এটি ব্রাউজারকে বলে অনুরোধটিকে সচল রাখতে এমনকি যদি ব্যবহারকারী এটি সম্পূর্ণ হওয়ার আগেই অন্যত্র চলে যান — একই মেকানিজম যা navigator.sendBeacon API ব্যবহার করে, তবে সম্পূর্ণ JSON সমর্থন সহ। আপনি নেভিগেশন ব্লক না করে নির্ভরযোগ্য ডেলিভারি পান।
তিনটি Core Web Vitals, একে একে
Largest Contentful Paint (LCP) পরিমাপ করে কখন প্রধান কন্টেন্ট দৃশ্যমান হয়। একটি async স্ক্রিপ্ট যা ক্রিটিক্যাল পাথে নেই তা LCP-কে মোটেই বিলম্বিত করে না। ট্র্যাকারের কোনো DOM ম্যানিপুলেশন নেই এবং কোনো ইমেজ লোড করে না।
Interaction to Next Paint (INP) ব্যবহারকারীর ইনপুটের প্রতি সাড়া পরিমাপ করে। ট্র্যাকারের ইভেন্ট লিসেনারগুলো রিড-ওনলি এবং হালকা — SPA নেভিগেশনের জন্য একটি একক popstate লিসেনার। কোনো দীর্ঘ টাস্ক নেই, কোনো লেআউট থ্র্যাশিং নেই।
Cumulative Layout Shift (CLS) অপ্রত্যাশিত লেআউট মুভমেন্ট পরিমাপ করে। ট্র্যাকার DOM-এ কোনো এলিমেন্ট যোগ করে না, তাই এটি শূন্য লেআউট শিফট অবদান রাখে।
একটি Lighthouse অডিট চালানো
আপনি যদি পার্থক্যটি পরিমাণগতভাবে নির্ধারণ করতে চান, ট্র্যাকার যোগ করার আগে এবং পরে একটি পেজে Lighthouse অডিট চালান। আপনি Performance স্কোরে কোনো পরিবর্তন দেখতে পাবেন না। ট্র্যাকারটি নেটওয়ার্ক ওয়াটারফলে একটি দেরিতে-লোডিং async স্ক্রিপ্ট হিসেবে উপস্থিত হবে — ছোট, দ্রুত এবং ক্রিটিক্যাল পাথের বাইরে।
এর সাথে একটি GA4 অডিটের তুলনা করুন, যেখানে Lighthouse প্রায়ই "Reduce the impact of third-party code"-এর অধীনে অ্যানালিটিক্স ট্যাগটি ফ্ল্যাগ করবে এবং একটি থ্রেড-ব্লকিং সময় অবদান রিপোর্ট করবে।
পারফরম্যান্স একটি গোপনীয়তা যুক্তিও
স্ক্রিপ্ট ওজন এবং গোপনীয়তার মধ্যে একটি সংযোগ আছে যা স্পষ্টভাবে বলা মূল্যবান: ভারী অ্যানালিটিক্স স্ক্রিপ্ট ভারী কারণ তারা বেশি কিছু করে। আরও বেশি ট্র্যাকিং, আরও বেশি ডিভাইস শনাক্তকরণ, আরও বেশি আচরণগত প্রোফাইলিং। 2 KB ট্র্যাকারটি ছোট কারণ এটি শুধু যা প্রয়োজন তা সংগ্রহ করে — প্রতি পেজভিউ-তে কয়েকটি অ-ব্যক্তিগত সিগন্যাল। বিস্তৃত ব্রাউজার পরিবার এবং ডিভাইস টাইপ অনুরোধের User-Agent থেকে সার্ভার-সাইডে নির্ধারিত হয়, যেখানে সম্পূর্ণ User-Agent স্ট্রিং, ব্রাউজার সংস্করণ, কুকি, স্থায়ী শনাক্তকারী এবং ডিভাইস ফিঙ্গারপ্রিন্ট কখনো সংরক্ষণ করা হয় না।
হালকা অ্যানালিটিক্স বেছে নেওয়া পারফরম্যান্স এবং ইনসাইটের মধ্যে একটি ট্রেড-অফ নয়। এটি স্বীকার করা যে প্রচলিত টুলগুলোর অতিরিক্ত ওজন আসে এমন ডেটা সংগ্রহ থেকে যা আপনি সম্ভবত চাননি।