কিভাবে বিষয়বস্তু সুপারিশ প্রদানকারী Taboola তার প্রকাশক অংশীদার ওয়েবসাইটগুলির জন্য 36% পর্যন্ত INP উন্নত করতে LoAF ব্যবহার করেছে।

লং অ্যানিমেশন ফ্রেমস এপিআই (LoAF) ব্যবহার করে এবং একটি স্মার্ট ইল্ডিং কৌশল গ্রহণ করে তাবুলা কীভাবে বিজ্ঞাপনের কর্মক্ষমতার সাথে আপস না করে প্রকাশকদের ওয়েবসাইটের প্রতিক্রিয়াশীলতা উন্নত করতে সক্ষম হয়েছে।

ডেভিড বেলফোর্ড
David Belford
LinkedIn
থিয়ের্নো থিয়াম

ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) হল একটি মেট্রিক যা ব্যবহারকারীর ইনপুটের প্রতি একটি ওয়েবসাইটের প্রতিক্রিয়াশীলতা মূল্যায়ন করে। INP ব্যবহারকারী যখন কোনও ইন্টারঅ্যাকশন শুরু করেন—যেমন ক্লিক, ট্যাপ বা টাইপ করার সময়—থেকে প্রাপ্ত ভিজ্যুয়াল প্রতিক্রিয়া পর্যন্ত সময় পরিমাপ করে। INP ২০২৪ সালের মার্চ মাসে কোর ওয়েব ভাইটাল হিসেবে ফার্স্ট ইনপুট ডিলে (FID) কে প্রতিস্থাপন করবে।

Taboola হল বিশ্বের শীর্ষস্থানীয় কন্টেন্ট আবিষ্কার প্ল্যাটফর্ম, যা ওপেন ওয়েবে প্রতি সেকেন্ডে ৫,০০,০০০ সুপারিশ প্রদান করে। এই সুপারিশগুলি Taboola-এর ৯,০০০ এক্সক্লুসিভ প্রকাশক অংশীদারদের তাদের দর্শকদের অর্থ উপার্জন এবং জড়িত করতে সক্ষম করে। প্রকাশকরা জাভাস্ক্রিপ্ট ব্যবহার করে তাদের পৃষ্ঠাগুলিতে সুপারিশ প্রদান করে।

যেহেতু তৃতীয় পক্ষের জাভাস্ক্রিপ্ট ব্যবহারকারীর ইনপুটে দ্রুত সাড়া দেওয়ার জন্য একটি পৃষ্ঠার ক্ষমতাকে প্রভাবিত করতে পারে, তাই Taboola তার জাভাস্ক্রিপ্ট ফাইলের আকার এবং কার্যকর করার সময় কমাতে প্রচুর বিনিয়োগ করেছে। Taboola তার সম্পূর্ণ রেন্ডারিং ইঞ্জিনটি পুনরায় ডিজাইন করছে, পাশাপাশি INP-এর উপর এর প্রভাব কমাতে সরাসরি বিমূর্ততা ছাড়াই ব্রাউজার API ব্যবহার করছে।

এই কেস স্টাডিতে নতুন লং অ্যানিমেশন ফ্রেম (LoAF) API ব্যবহার করে INP উন্নত করার জন্য Taboola-এর যাত্রা, ক্ষেত্রের পৃষ্ঠার প্রতিক্রিয়াশীলতার উপর এর প্রভাব পরিমাপ করা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য নির্দিষ্ট অপ্টিমাইজেশন প্রয়োগের পরবর্তী প্রচেষ্টাগুলি অন্তর্ভুক্ত করা হয়েছে।

INP-এর প্রক্সি হিসেবে TBT

টোটাল ব্লকিং টাইম (TBT) হল একটি ল্যাব-ভিত্তিক মেট্রিক যা চিহ্নিত করে যে মূল থ্রেডটি কোথায় দীর্ঘ সময় ধরে ব্লক করা হয়েছিল যা পৃষ্ঠার প্রতিক্রিয়াশীলতাকে প্রভাবিত করতে পারে। প্রতিক্রিয়াশীলতা পরিমাপ করে এমন ফিল্ড মেট্রিকগুলি - যেমন INP - উচ্চ TBT দ্বারা প্রভাবিত হতে পারে। মোবাইল ডিভাইসে TBT এবং INP এর মধ্যে পারস্পরিক সম্পর্কের বিষয়ে অ্যানি সুলিভানের একটি তদন্ত ইঙ্গিত দেয় যে যখন প্রধান থ্রেড ব্লকিং সময় কমানো হয় তখন সাইটগুলি ভাল INP স্কোর অর্জন করার সম্ভাবনা বেশি থাকে।

এই পারস্পরিক সম্পর্ক, উচ্চ TBT সম্পর্কে তাবুলার প্রকাশকদের উদ্বেগের সাথে মিলিত হয়ে, তাবুলাকে এই মেট্রিকে তার অবদান কমানোর দিকে মনোযোগ কেন্দ্রীভূত করতে পরিচালিত করে।

ব্লক করা মেইন থ্রেড সময়ের জন্য লাইটহাউস অডিটের একটি স্ক্রিনশট। মেইন থ্রেডটি মোট ২,৬৩০ মিলিসেকেন্ডের জন্য বেশ কয়েকটি স্ক্রিপ্ট দ্বারা ব্লক করা হয়েছিল, যার মধ্যে তৃতীয় পক্ষের জাভাস্ক্রিপ্ট সেই সময়ে ৭১২ মিলিসেকেন্ড অবদান রেখেছিল। Taboola এর RELEASE.js স্ক্রিপ্টটি বেশিরভাগ তৃতীয় পক্ষের ব্লকিং সময়ের জন্য দায়ী, ৬৯১ মিলিসেকেন্ড।
Taboola এর পুরাতন ইঞ্জিনের সাথে, RELEASE.js এর মতো স্ক্রিপ্টগুলি 691 মিলিসেকেন্ডের জন্য মূল থ্রেডটিকে ব্লক করে।

INP-এর জন্য TBT-কে প্রক্সি মেট্রিক হিসেবে ব্যবহার করে, Taboola Core Web Vitals-এর উপর এর সম্ভাব্য প্রভাব সীমিত করার জন্য JavaScript এক্সিকিউশন সময় পর্যবেক্ষণ এবং অপ্টিমাইজ করা শুরু করে। তারা নিম্নলিখিত কাজগুলি করে শুরু করে:

  • লং টাস্ক API ব্যবহার করে ক্ষেত্রের সমস্যাযুক্ত স্ক্রিপ্টগুলি সনাক্তকরণ এবং অপ্টিমাইজ করা।
  • প্রতিদিন ১০,০০০ থেকে ১৫,০০০ URL মূল্যায়ন করার জন্য PageSpeed ​​Insights API ব্যবহার করে TBT অবদানের অনুমান করা।

তবে, তাবুলা লক্ষ্য করেছেন যে এই সরঞ্জামগুলির সাহায্যে TBT বিশ্লেষণ করার কিছু সীমাবদ্ধতা রয়েছে:

  • লং টাস্ক এপিআই টাস্কটিকে অরিজিন ডোমেন বা কোনও নির্দিষ্ট স্ক্রিপ্টের সাথে যুক্ত করতে পারে না, যার ফলে দীর্ঘ টাস্কের উৎস সনাক্ত করা আরও কঠিন হয়ে পড়ে।
  • লং টাস্ক এপিআই শুধুমাত্র লং টাস্ক শনাক্ত করে, টাস্ক এবং লেআউট পরিবর্তনের সংমিশ্রণ নয় যা রেন্ডারিং বিলম্বের কারণ হতে পারে।

এই চ্যালেঞ্জগুলি মোকাবেলা করার জন্য, ব্যবহারকারীর ইনপুট প্রতিক্রিয়াশীলতার উপর এর প্রকৃত প্রভাব আরও ভালভাবে বোঝার জন্য, টাবুলা লং অ্যানিমেশন ফ্রেম (LoAF) API অরিজিন ট্রায়ালে যোগদান করেছেন। অরিজিন ট্রায়ালগুলি নতুন বা পরীক্ষামূলক বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, যা ডেভেলপারদের নতুন বৈশিষ্ট্যগুলি পরীক্ষা করার অনুমতি দেয় যা তাদের ব্যবহারকারীরা সীমিত সময়ের জন্য চেষ্টা করতে পারেন।

এটি তুলে ধরা জরুরি যে এই চ্যালেঞ্জের সবচেয়ে কঠিন দিকটি ছিল কোনও বিজ্ঞাপন কেপিআই (মূল কর্মক্ষমতা নির্দেশক) এর সাথে আপস না করে বা আমাদের প্রকাশকদের জন্য সম্পদ বিলম্ব না করে সফলভাবে আইএনপি উন্নত করা।

INP প্রভাব মূল্যায়নের জন্য LoAF ব্যবহার করা

যখন কোনও রেন্ডারিং আপডেট ৫০ মিলিসেকেন্ডের বেশি বিলম্বিত হয়, তখন একটি দীর্ঘ অ্যানিমেশন ফ্রেম তৈরি হয়। শুধুমাত্র দীর্ঘ কাজের পরিবর্তে ধীর ইউজার ইন্টারফেস আপডেটের কারণগুলি সনাক্ত করে, টাবুলা ক্ষেত্রে পৃষ্ঠার প্রতিক্রিয়াশীলতার উপর এর প্রভাব বিশ্লেষণ করতে সক্ষম হন। LoAF পর্যবেক্ষণের মাধ্যমে টাবুলা নিম্নলিখিতগুলি করতে সক্ষম হয়েছেন:

  1. নির্দিষ্ট Taboola কার্যগুলিতে এন্ট্রিগুলি অ্যাট্রিবিউট করুন।
  2. উৎপাদনে স্থাপনের আগে নির্দিষ্ট বৈশিষ্ট্যগুলির কর্মক্ষমতা সংক্রান্ত সমস্যাগুলি পর্যবেক্ষণ করুন।
  3. A/B পরীক্ষায় বিভিন্ন কোড সংস্করণের তুলনা করার জন্য সমষ্টিগত তথ্য সংগ্রহ করুন এবং মূল সাফল্যের মেট্রিক্সের উপর প্রতিবেদন করুন।

নিম্নলিখিত জাভাস্ক্রিপ্টটি একটি সরলীকৃত সংস্করণ যা Taboola এর প্রভাবকে আলাদা করার জন্য LoAF সংগ্রহের জন্য উৎপাদনে ব্যবহৃত হয়।

function loafEntryAnalysis (entry) {
  if (entry.blockingDuration === 0) {
    return;
  }

  let taboolaIsMajor = false;
  const hasInteraction = entry.firstUIEventTimestamp > 0;
  let taboolaDuration = 0;
  const nonTaboolaLoafReport = {};
  const taboolaLoafReport = {};

  entry.scripts.forEach((script) => {
    const taboolaScriptBlockingDuration = handleLongAnimationFrameScript(script, taboolaLoafReport, nonTaboolaLoafReport);
    taboolaDuration += taboolaScriptBlockingDuration;

    if (taboolaScriptBlockingDuration > 0 || taboolaDuration > entry.duration / 2) {
      taboolaIsMajor = true;
    }
  });

  generateToboolaLoafReport(taboolaLoafReport, nonTaboolaLoafReport, hasInteraction, taboolaIsMajor);

  if (hasInteraction) {
    const global = _longAnimationFramesReport.global;
    global.inpBlockingDuration = Math.max(global.inpBlockingDuration, entry.blockingDuration);

    if (taboolaIsMajor) {
      global.taboolaInpBlockingDuration = Math.max(global.taboolaInpBlockingDuration, entry.blockingDuration);
    }
  }
}

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    loafEntryAnalysis(entry);
  }
});

observer.observe({ type: 'long-animation-frame', buffered: true });
  • loafEntryAnalysis ফাংশন ব্যবহার করে Taboola এমন এন্ট্রি সনাক্ত করতে সক্ষম হয়েছিল যেখানে এটি একটি প্রধান অবদানকারী।
  • যদি মোট স্ক্রিপ্টের অর্ধেকেরও বেশি সময় Taboola দ্বারা সৃষ্ট হয়, অথবা একটি Taboola স্ক্রিপ্ট চালাতে ৫০ মিলিসেকেন্ডের বেশি সময় নেয়, তাহলে Taboola কে একটি প্রধান অবদানকারী হিসেবে বিবেচনা করা হয়।
  • দীর্ঘ অ্যানিমেশন ফ্রেমের কারণে ব্যবহারকারীর ইন্টারঅ্যাকশন বিলম্বিত হলে একটি firstUIEventTimeStamp তৈরি করা হয়। দীর্ঘতম ব্লকিং সময়কালকে সামগ্রিক INP স্কোর হিসাবে বিবেচনা করা হয়। আমরা এটিও সনাক্ত করতে পারি যে Taboola কখন একটি firstUIEventTimeStamp ট্রিগার করেছে একটি Taboola INP স্কোর গণনা করার জন্য।

LoAF-এর মাধ্যমে সংগৃহীত তথ্য Taboola-কে নিম্নলিখিত অ্যাট্রিবিউশন টেবিল তৈরি করতে সাহায্য করেছে, যা এমন ক্ষেত্রগুলিকে চিহ্নিত করে যেখানে এটি ফলনশীল সুযোগগুলি প্রয়োগ করতে পারে।

স্ক্রিপ্ট সময়কাল (মিলিসেকেন্ড)
vpaid/units/33_6_8/infra/cmTagINLINE_INSTREAM.js:106517 ৯৯৭
vpaid/units/33_6_8/infra/cmTagFEED_MANAGER.js:496662 ৫৬১
vpaid/vPlayer/player/v15.8.6/OvaMediaPlayer.js:44631 ৩৩৬
libtrc/impl.20231212-23-RELEASE.js:821090 ৮৫৭
publisher_name/pmk-20220605.5.js:7728 ৩৩৬
libtrc/card-interference-detector.20231219-7-RELEASE.es6.js:183 ২৩৯
 LoAF স্ক্রিপ্টের এন্ট্রিগুলি Taboola RUM দ্বারা ধারণ করা হয়েছে

TRECS ইঞ্জিন: নতুন ফলন কৌশল

স্ক্রিপ্ট অপ্টিমাইজেশনের সুযোগগুলি আরও ভালভাবে বোঝার জন্য LoAF ব্যবহার করার পাশাপাশি, Taboola জাভাস্ক্রিপ্ট এক্সিকিউশন এবং ব্লকিং সময় উল্লেখযোগ্যভাবে কমানোর জন্য তার সম্পূর্ণ রেন্ডারিং ইঞ্জিনটি পুনরায় ডিজাইন করছে।

TRECS (Taboola Recommendations Extensible Client Service) ক্লায়েন্ট-সাইড রেন্ডারিং এবং প্রকাশকের বর্তমান JS কোড বজায় রাখে, একই সাথে Taboola এর সুপারিশ লোড করার জন্য প্রয়োজনীয় বাধ্যতামূলক ফাইলের সংখ্যা এবং আকার হ্রাস করে।

LoAF ব্যবহার করে রেন্ডার-ব্লকিং টাস্কগুলি শনাক্ত করার পরে, "পারফরম্যান্স ফ্যাডার" scheduler.postTask() ব্যবহার করে মূল থ্রেডে যাওয়ার আগে সেই কাজগুলি ভেঙে ফেলতে পারে। এই নকশাটি নিশ্চিত করে যে গুরুত্বপূর্ণ ব্যবহারকারী-মুখী কাজ - যেমন রেন্ডারিং আপডেট - যত তাড়াতাড়ি সম্ভব সম্পন্ন করা যেতে পারে, মূল থ্রেডে বিদ্যমান কোনও কাজ থাকুক না কেন।

"পারফরম্যান্স ফ্যাডার" টাস্ক রানারের JS স্নিপেট এখানে দেওয়া হল:

/**
* Send a task to run using the Fader. The task will run using the browser Scheduler, by the configuration settings, or immediately.
* @param task
* @param isBlocker
*/
function sendTaskToFader (task, isBlocker = true) {
  const publisherFaderChoice = fillOptimizationGlobals(); // Loading publisher choice
  const applyYielding = publisherFaderChoice === OptimizationFaderType.Responsiveness;

  if (applyYielding) {
    return runAsPostTask(task, isBlocker);
  }

  return runImmediately(task);
}

/**
* Yielding method using scheduler.postTask and falling back to setTimeout when it's not availabe based on the publisher choice
*/
function runAsPostTask (task, isBlocker = true) {
  if ('scheduler' in window && 'postTask' in scheduler) {
    const priority = isBlocker ? 'user-blocking': 'background';

    return window?.scheduler?.postTask(task, { priority });
  }

  const publisherChoiceEnableFallback = fillPublisherChoices();

  if (publisherChoiceEnableFallback) {
    return new Promise(resolve => {
      window.setTimeout(() => {
        resolve(task());
      }, 0);
    });
  }

  return runImmediately(task);
}

sendTaskToFader ফাংশন:

  • ব্যবহার করে, যা হুডের নিচে runAsPostTask scheduler.postTask() ব্যবহার করে (যদি API উপলব্ধ থাকে), অথবা setTimeout এ ফিরে আসে।
  • এই ফাংশনটি ফাংশন কলগুলিকে কোড সেকশনে মোড়ানো করে যা দীর্ঘ অ্যানিমেশন ফ্রেম এবং INP তৈরি করে। এটি এই কোড সেকশনগুলিকে ছোট ছোট কাজে বিভক্ত করে, এবং এইভাবে INP হ্রাস করে।

ব্যবসার মেট্রিক্স

LoAF-এর জন্য ধন্যবাদ, Taboola INP-এর উপর এর প্রভাব আরও ভালভাবে বুঝতে সক্ষম হয়েছে। এই টুলটি স্ক্রিপ্ট অপ্টিমাইজেশনের সুযোগগুলিও তুলে ধরেছে যা নতুন TRECS ইঞ্জিনের অংশ হিসাবে ব্যবহার করা যেতে পারে।

TRECS এবং পারফরম্যান্স ফ্যাডারের প্রভাব নির্ধারণের জন্য, তাবুলা প্রকাশক অংশীদারদের প্যানেলে কোনও স্ক্রিপ্ট ছাড়াই বিদ্যমান ইঞ্জিনের বিপরীতে INP পরিমাপের একটি A/B পরীক্ষা পরিচালনা করে।

নিম্নলিখিত সারণীতে Taboola নেটওয়ার্কের চারজন বেনামী প্রকাশকের ৭৫তম শতাংশে INP ফলাফল মিলিসেকেন্ডে দেখানো হয়েছে।

প্রকাশকগণ TRECS + পারফরম্যান্স ফ্যাডার সহ INP বিদ্যমান ইঞ্জিন সহ INP INP হ্রাস (%)
প্রকাশক ক ৪৮ ৭৫ ৩৬%
প্রকাশক খ ১৫৩ ১৬৩ ৬%
প্রকাশক সি ৯২ ১৩৫ ৩৩%
প্রকাশক ডি ৩৭ ৫২ ২৯%

সৌভাগ্যবশত, যখন TRECS এবং পারফরম্যান্স ফেডার টেস্টিং প্যানেলে সক্রিয় করা হয়েছিল, তখন বিজ্ঞাপন ক্লিক-থ্রু রেট এবং প্রতি 1,000 ইম্প্রেশন (RPM) এর মতো ব্যবসায়িক মেট্রিক্স নেতিবাচকভাবে প্রভাবিত হয়নি । বিজ্ঞাপন KPI তে প্রত্যাশিত কোনও নেতিবাচক ফলাফল ছাড়াই INP তে এই ইতিবাচক উন্নতির সাথে, Taboola ধীরে ধীরে তার পণ্য সম্পর্কে প্রকাশকদের ধারণা উন্নত করবে।

একই গ্রাহকের উপর পরিচালিত আরেকটি লাইটহাউস, যা আগে হাইলাইট করা হয়েছিল, তা নতুন ইঞ্জিন ব্যবহার করার সময় টাবুলার মূল থ্রেড ব্লকিং সময়ের উল্লেখযোগ্য উন্নতি প্রদর্শন করে।

নতুন TRECS এবং পারফরম্যান্স ফ্যাডার ইঞ্জিনগুলি প্রধান থ্রেড ব্লকিং সময় উন্নত করার জন্য প্রয়োগ করার পরে ব্লক করা প্রধান থ্রেড সময়ের জন্য লাইটহাউস অডিটের একটি স্ক্রিনশট। অপ্টিমাইজেশন করার আগে অডিটটি 712 মিলিসেকেন্ডের তুলনায় মাত্র 206 মিলিসেকেন্ডে কমিয়ে আনা হয়েছিল।
Taboola-এর নতুন ইঞ্জিন RELEASE.js এর মতো স্ক্রিপ্টগুলিকে TBT 485 ms (-70%) কমাতে সাহায্য করেছে।

এটি প্রমাণ করে যে INP-এর কারণ চিহ্নিত করতে LoAF ব্যবহার করা এবং পারফরম্যান্স ফ্যাডারের সাহায্যে পরবর্তী ফলন কৌশলগুলি প্রয়োগ করা তাবুলার অংশীদারদের বিজ্ঞাপন এবং পৃষ্ঠার কর্মক্ষমতায় সর্বাধিক সাফল্য অর্জন করতে সক্ষম করে।

উপসংহার

INP অপ্টিমাইজ করা একটি জটিল প্রক্রিয়া, বিশেষ করে যখন অংশীদার ওয়েবসাইটগুলিতে তৃতীয় পক্ষের স্ক্রিপ্ট ব্যবহার করা হয়। অপ্টিমাইজেশন শুরু হওয়ার আগে, নির্দিষ্ট স্ক্রিপ্টগুলিতে INP অ্যাট্রিবিউশনের মাধ্যমে অন্যান্য সাইটের পারফরম্যান্স মেট্রিক্সের উপর যেকোনো অনুমান এবং সম্ভাব্য ক্ষতি দূর করা হয়। LoAF API INP সমস্যাগুলি সনাক্ত এবং সমাধানের জন্য একটি মূল্যবান হাতিয়ার হিসেবে প্রমাণিত হয়েছে, বিশেষ করে 3P-এর জন্য, যা তাদের নির্দিষ্ট SDK উন্নতির সুযোগগুলি চিহ্নিত করার অনুমতি দেয় এবং পৃষ্ঠায় উপস্থিত অন্যান্য প্রযুক্তির হস্তক্ষেপ দূর করে।

যখন একটি ভালো ফলনশীল কৌশলের সাথে ব্যবহার করা হয় — যেমন scheduler.postTask() ব্যবহার করা — LoAF আপনাকে দুর্বল পৃষ্ঠার প্রতিক্রিয়াশীলতার কারণ পর্যবেক্ষণ এবং বুঝতে সাহায্য করতে পারে, যা আপনাকে আপনার ওয়েবসাইটের INP উন্নত করার জন্য প্রয়োজনীয় তথ্য দেয়।

এই কাজে অবদান রাখার জন্য গুগলের গিলবার্তো কোচি, নোয়াম রোজেনথাল এবং রিক ভিসকোমি এবং তাবুলার ইঞ্জিনিয়ারিং এবং প্রোডাক্ট টিমের ডেডি হাকাক, আনাত দাগান এবং ওমরি আরিয়াভকে বিশেষ ধন্যবাদ।