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

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

ডেভিড বেলফোর্ড
ডেভিড বেলফোর্ড
লিঙ্কডইন
থিয়ের্নো থিয়াম
থিয়ের্নো থিয়াম

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

Taboola হল বিশ্বের শীর্ষস্থানীয় বিষয়বস্তু আবিষ্কারের প্ল্যাটফর্ম, প্রতি সেকেন্ডে ওপেন ওয়েবে 500,000 সুপারিশগুলিকে শক্তিশালী করে৷ এই সুপারিশগুলি Taboola-এর 9,000 একচেটিয়া প্রকাশক অংশীদারদের নগদীকরণ করতে এবং তাদের শ্রোতাদের জড়িত করতে সক্ষম করে৷ প্রকাশকরা জাভাস্ক্রিপ্ট ব্যবহার করে তাদের পৃষ্ঠাগুলিতে সুপারিশ রেন্ডার করে।

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

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

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

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

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

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

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

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

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

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

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

এটি হাইলাইট করা অপরিহার্য যে এই চ্যালেঞ্জের সবচেয়ে কঠিন দিকটি ছিল কোন বিজ্ঞাপন KPI(কী পারফরম্যান্স ইন্ডিকেটর) সাথে আপস না করে বা আমাদের প্রকাশকদের জন্য সম্পদ বিলম্ব না করে সফলভাবে INP উন্নত করা।

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

একটি দীর্ঘ অ্যানিমেশন ফ্রেম ঘটে যখন একটি রেন্ডারিং আপডেট 50 মিলিসেকেন্ডের বেশি বিলম্বিত হয়। শুধুমাত্র দীর্ঘ কাজের পরিবর্তে ধীর ইউজার ইন্টারফেস আপডেটের কারণ চিহ্নিত করে- Taboola ক্ষেত্রে পৃষ্ঠার প্রতিক্রিয়াশীলতার উপর এর প্রভাব বিশ্লেষণ করতে সক্ষম হয়েছিল। এলওএএফ পর্যবেক্ষণ করা তাবুলাকে অনুমতি দিয়েছে:

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

নিম্নলিখিত জাভাস্ক্রিপ্টটি একটি সরলীকৃত সংস্করণ যা ট্যাবুলার প্রভাবকে বিচ্ছিন্ন করার জন্য 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 স্ক্রিপ্ট 50 মিলিসেকেন্ডের বেশি সময় নেয়।
  • একটি দীর্ঘ অ্যানিমেশন ফ্রেমের কারণে ব্যবহারকারীর ইন্টারঅ্যাকশন বিলম্বিত হলে একটি firstUIEventTimeStamp তৈরি করা হয়। দীর্ঘতম ব্লকিং সময়কাল সামগ্রিক INP স্কোর হিসাবে বিবেচিত হয়। Taboola INP স্কোর গণনা করতে কখন Taboola একটি firstUIEventTimeStamp ট্রিগার করেছে তাও আমরা শনাক্ত করতে পারি।

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

লিপি সময়কাল (মিলিসেকেন্ড)
vpaid/units/33_6_8/infra/cmTagINLINE_INSTREAM.js:106517 997
vpaid/units/33_6_8/infra/cmTagFEED_MANAGER.js:496662 561
vpaid/vPlayer/player/v15.8.6/OvaMediaPlayer.js:44631 336
libtrc/impl.20231212-23-RELEASE.js:821090 857
publisher_name/pmk-20220605.5.js:7728 336
libtrc/card-interference-detector.20231219-7-RELEASE.es6.js:183 239
 Taboola RUM দ্বারা ক্যাপচার করা LoAF স্ক্রিপ্ট এন্ট্রি

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

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

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

একবার LoAF ব্যবহার করে রেন্ডার ব্লকিং টাস্ক শনাক্ত করা হয়ে গেলে, "Performance Fader" সেই কাজগুলিকে বিচ্ছিন্ন করতে পারে 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 এবং পারফরম্যান্স ফ্যাডারের প্রভাব নির্ধারণের জন্য, Taboola প্রকাশক অংশীদারদের একটি প্যানেলে কোনো স্ক্রিপ্ট পাওয়া ছাড়াই বিদ্যমান ইঞ্জিনের বিরুদ্ধে INP পরিমাপের একটি A/B পরীক্ষা পরিচালনা করেছে।

নিম্নলিখিত সারণীটি Taboola নেটওয়ার্কের চারটি বেনামী প্রকাশকের 75 তম শতাংশে মিলিসেকেন্ডে INP ফলাফল দেখায়৷

প্রকাশকরা TRECS + পারফরম্যান্স ফ্যাডার সহ INP বিদ্যমান ইঞ্জিন সহ INP INP হ্রাস (%)
প্রকাশক এ 48 75 36%
প্রকাশক বি 153 163 ৬%
প্রকাশক সি 92 135 33%
প্রকাশক ডি 37 52 29%

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

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

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

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

উপসংহার

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

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

এই কাজে অবদানের জন্য Google-এর Gilberto Cocchi, Noam Rosenthal, এবং Rick Viscomi এবং Taboola-এর ইঞ্জিনিয়ারিং অ্যান্ড প্রোডাক্ট টিম থেকে Dedi Hakak, Anat Dagan এবং Omri Ariav-কে বিশেষ ধন্যবাদ৷