कॉन्टेंट का सुझाव देने वाली कंपनी Tabooa ने किस तरह से LoAF का इस्तेमाल करके, अपनी पब्लिशर पार्टनर वेबसाइटों के लिए आईएनपी को 36% तक बेहतर बनाया.

लंबी ऐनिमेशन फ़्रेम एपीआई (LoAF) का इस्तेमाल करके और स्मार्ट तरीके से नतीजे देने की रणनीति को अपनाने से, Tabमूला को किस तरह पब्लिशर की सेवाओं को बेहतर बनाने में मदद मिली विज्ञापन की परफ़ॉर्मेंस से समझौता किए बिना वेबसाइट रिस्पॉन्सिवनेस.

David Belford

Thierno Thiam

इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) एक मेट्रिक है. इससे यह आकलन किया जाता है कि उपयोगकर्ता से मिले इनपुट के आधार पर वेबसाइट कितनी रिस्पॉन्सिव है. आईएनपी, उपयोगकर्ता के इंटरैक्शन शुरू करने से लेकर क्लिक करने, टैप करने या टाइप करने जैसी गतिविधि शुरू होने के समय से लेकर, विज़ुअल फ़ीडबैक मिलने तक के समय को मापता है. आईएनपी को मार्च 2024 से वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के तौर पर, फ़र्स्ट इनपुट डिले (एफ़आईडी) को बदल देना चाहिए.

Taboola, कॉन्टेंट खोजने का दुनिया का सबसे मशहूर प्लैटफ़ॉर्म है. इसकी मदद से, ओपन वेब पर हर सेकंड 5,00,000 सुझाव मिलते हैं. इन सुझावों से, तबूला के 9,000 खास पब्लिशर पार्टनर को अपने दर्शकों से कमाई करने और उनकी दिलचस्पी बढ़ाने में मदद मिलती है. प्रकाशक, JavaScript का इस्तेमाल करके अपने पेजों पर सुझाव रेंडर करते हैं.

तीसरे पक्ष का JavaScript, उपयोगकर्ता के इनपुट का तुरंत जवाब देने के लिए पेज की क्षमता पर असर डाल सकता है. इस वजह से Taboola ने अपनी JavaScript फ़ाइलों के साइज़ और उसे लागू होने में लगने वाले समय को कम करने के लिए भारी निवेश किया है. Taboola अपने पूरे रेंडरिंग इंजन को फिर से डिज़ाइन कर रहा है. साथ ही, वह आईएनपी पर इसके असर को कम करने के लिए, बिना किसी ऐब्स्ट्रैक्ट वाले ब्राउज़र एपीआई का इस्तेमाल कर रहा है.

इस केस स्टडी में, नए लॉन्ग ऐनिमेशन फ़्रेम (LoAF) एपीआई का इस्तेमाल करके, आईएनपी को बेहतर बनाने के लक्ष्य की

आईएनपी के प्रॉक्सी के रूप में टीबीटी

टोटल ब्लॉकिंग टाइम (टीबीटी), लैब पर आधारित मेट्रिक है. इससे यह पता चलता है कि मुख्य थ्रेड को कितनी देर तक ब्लॉक किया गया. इससे पेज के रिस्पॉन्स पर असर पड़ सकता है. रिस्पॉन्सिवनेस को मापने वाली फ़ील्ड मेट्रिक—जैसे कि INP—पर, ज़्यादा टीबीटी का असर पड़ सकता है. ऐनी सलिवन की मोबाइल डिवाइसों पर टीबीटी और आईएनपी के बीच के संबंध की जांच से पता चलता है कि मुख्य थ्रेड को ब्लॉक करने का समय कम होने पर, साइटों को आईएनपी स्कोर बेहतर होने की संभावना ज़्यादा होती है.

ताबूला के पब्लिशरों के साथ संबंध इस तरह जुड़ा है कि ज़्यादा टीबीटी की समस्या को हल करने की कोशिश की गई. इस वजह से Tabफ़ुला ने इस मेट्रिक में अपने योगदान को कम से कम करने पर ध्यान देने की कोशिश की.

आईएनपी के लिए प्रॉक्सी मेट्रिक के तौर पर टीबीटी का इस्तेमाल करके, Taboola ने JavaScript लागू होने के समय को मॉनिटर और ऑप्टिमाइज़ करना शुरू किया, ताकि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर इसके संभावित असर को कम किया जा सके. उन्होंने यह तरीका अपनाकर शुरू किया:

• लॉन्ग टास्क एपीआई का इस्तेमाल करके, फ़ील्ड में समस्या वाली स्क्रिप्ट की पहचान करना और उन्हें ऑप्टिमाइज़ करना.
• हर दिन 10,000 से 15,000 यूआरएल की समीक्षा करने के लिए, PageSpeed Insights API का इस्तेमाल करके TBT के योगदान का अनुमान लगाना.

हालांकि, ताबूला ने देखा कि इन टूल की मदद से टीबीटी का विश्लेषण करने की कुछ सीमाएं थीं:

• लाॅन्ग टास्क एपीआई, इस टास्क को ऑरिजिन डोमेन या किसी खास स्क्रिप्ट को एट्रिब्यूट नहीं कर सकता. इससे लंबे टास्क के सोर्स की पहचान करना और भी मुश्किल हो जाता है.
• लंबे टास्क एपीआई सिर्फ़ लंबे टास्क की पहचान करता है. उन टास्क और लेआउट में बदलावों की पहचान नहीं की जा सकती जिनकी वजह से रेंडरिंग में देरी हो सकती है.

इन चुनौतियों से निपटने के लिए, Tabooa उपयोगकर्ता के इनपुट के रिस्पॉन्सिव होने पर, इसके असल असर को बेहतर तरीके से समझने की कोशिश करती है. इसके लिए, वह Long Animation Frames (LoAF) API के ऑरिजिन ट्रायल में शामिल हुई हैं. ऑरिजिन ट्रायल से आपको नई या एक्सपेरिमेंट के तौर पर शुरू की गई सुविधाओं का ऐक्सेस मिलता है. इससे डेवलपर, ऐसी उभरती हुई सुविधाओं को आज़मा सकते हैं जिन्हें उनके उपयोगकर्ता सीमित समय के लिए आज़मा सकते हैं.

यह बताना ज़रूरी है कि इस चुनौती का सबसे मुश्किल पहलू, Google Ads के केपीआई(परफ़ॉर्मेंस के मापदंड) से समझौता किए बिना आईएनपी को बेहतर बनाना है. इसके अलावा, पब्लिशर को संसाधनों में देरी भी नहीं करनी है.

आईएनपी के असर का आकलन करने के लिए, एलओएएफ़ का इस्तेमाल करना

एक लंबा ऐनिमेशन फ़्रेम तब होता है, जब रेंडरिंग अपडेट में 50 मिलीसेकंड से ज़्यादा की देरी होती है. सिर्फ़ लंबे टास्क के बजाय, यूज़र इंटरफ़ेस के धीमे अपडेट होने की वजहों का पता लगाकर, Tabula ने फ़ील्ड में पेज के रिस्पॉन्स मिलने की स्थिति पर इसके असर का विश्लेषण किया. एलओएफ़ए पर निगरानी रखने से, ताबूला को ये काम करने की अनुमति मिली है:

1. खास Tabooa टास्क के लिए एट्रिब्यूट एंट्री.
2. प्रोडक्शन में लागू होने से पहले, खास सुविधाओं में परफ़ॉर्मेंस की समस्याओं को देखें.
3. A/B टेस्ट में, कोड के अलग-अलग वर्शन की तुलना करने के लिए, इकट्ठा किया गया डेटा इकट्ठा करें. साथ ही, सफलता की मुख्य मेट्रिक की रिपोर्ट पाएं.

नीचे दिया गया JavaScript एक आसान टूल है, जिसका इस्तेमाल एलओएएफ़ इकट्ठा करने के लिए प्रोडक्शन में किया जाता है, ताकि टैबूला के असर को अलग किया जा सके.

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 को उन एंट्री की पहचान करने में मदद मिलती है जहां इसका अहम योगदान दिया जाता है.
• अगर स्क्रिप्ट की कुल अवधि के आधे से ज़्यादा समय Tabula की वजह से होता है या Tabooa स्क्रिप्ट को चलने में 50 मिलीसेकंड से ज़्यादा समय लगता है, तो Taboola को अहम योगदान देने वाला माना जाता है.
• firstUIEventTimeStamp तब जनरेट होता है, जब लंबे ऐनिमेशन फ़्रेम की वजह से उपयोगकर्ता के इंटरैक्शन में देरी होती है. ब्लॉक करने की सबसे लंबी अवधि को आईएनपी का कुल स्कोर माना जाता है. हम इस बात की भी पहचान कर सकते हैं कि तबूला ने ताबूला आईएनपी स्कोर को कैलकुलेट करने के लिए, firstUIEventTimeStamp को कब ट्रिगर किया.

एलओएएफ़ से इकट्ठा किए गए डेटा से, तब ताबूला को नीचे दी गई एट्रिब्यूशन टेबल बनाने में मदद मिली. इस टेबल से उन क्षेत्रों की पहचान की जाती है जहां यह फ़ायदेमंद हो सकती है.

TRECS इंजन: नई फ़ायदेमंद रणनीति

स्क्रिप्ट ऑप्टिमाइज़ करने के अवसरों को बेहतर तरीके से समझने के लिए, LoAF का इस्तेमाल करने के साथ-साथ Taboola अपने पूरे रेंडरिंग इंजन को फिर से डिज़ाइन कर रहा है. ऐसा JavaScript के एक्ज़ीक्यूशन और ब्लॉक करने के समय को कम करने के लिए किया जा रहा है.

TRECS (Taboola के सुझाए गए एक्सटेंसिबल क्लाइंट सेवा) की मदद से, क्लाइंट-साइड रेंडरिंग और पब्लिशर के मौजूदा JS कोड को बनाए रखा जाता है. साथ ही, यह टैबूला के सुझावों को लोड करने के लिए ज़रूरी फ़ाइलों की संख्या और साइज़ को कम करता है.

एलओएएफ़ का इस्तेमाल करके, रेंडर करने से जुड़े टास्क की पहचान हो जाने के बाद, "परफ़ॉर्मेंस फ़ेडर" scheduler.postTask() का इस्तेमाल करके, मुख्य थ्रेड में आने से पहले ही उन टास्क को अलग कर सकता है. इस डिज़ाइन से यह पक्का होता है कि उपयोगकर्ताओं के लिए उपलब्ध ज़रूरी काम, जैसे कि अपडेट को रेंडर करने के अपडेट को जल्द से जल्द पूरा किया जा सके. भले ही, मुख्य थ्रेड में किसी भी मौजूदा टास्क का इस्तेमाल क्यों न किया जा रहा हो.

यहां "Performance Fader" का 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() का इस्तेमाल करता है (अगर एपीआई उपलब्ध है) या वापस setTimeout हो जाता है.
• यह फ़ंक्शन, फ़ंक्शन कॉल को कोड सेक्शन में रैप करता है, जिनकी वजह से लंबे ऐनिमेशन फ़्रेम और आईएनपी बनते हैं. यह इन कोड सेक्शन को छोटे-छोटे टास्क में बांटता है. इससे आईएनपी कम हो जाता है.

कारोबार की मेट्रिक

LoAF की मदद से, तबूला आईएनपी पर इसका असर बेहतर तरीके से समझ पाई. इस टूल ने स्क्रिप्ट ऑप्टिमाइज़ेशन के अवसरों को भी हाइलाइट किया है. इन्हें नए TRECS इंजन के हिस्से के तौर पर इस्तेमाल किया जा सकता है.

TRECS और परफ़ॉर्मेंस फ़ेडर के असर का पता लगाने के लिए, तबूला ने मौजूदा इंजन के लिए आईएनपी को मेज़र करने वाला A/B टेस्ट किया. इसमें पब्लिशर पार्टनर के पैनल को कोई स्क्रिप्ट नहीं दिखी.

नीचे दी गई टेबल में, टेबल में आईएनपी के नतीजों को मिलीसेकंड में दिखाया गया है. यह Tabलूला नेटवर्क में चार पहचान छिपाने वाले पब्लिशर के 75वें पर्सेंटाइल पर है.

अच्छी बात यह है कि टेस्टिंग पैनल में TRECS और परफ़ॉर्मेंस फ़ेडर को चालू करने पर, कारोबार की मेट्रिक, जैसे कि विज्ञापन की क्लिक मिलने की दर (सीटीआर) और रेवेन्यू पर 1,000 इंप्रेशन (आरपीएम) खराब असर नहीं पड़ा था. Tab जब Google Ads के केपीआई पर उम्मीद के मुताबिक कोई खराब नतीजा नहीं मिला, तो आईएनपी में इस सुधार की वजह से, Taboola धीरे-धीरे अपने पब्लिशर की वेबसाइट में सुधार करेगी अपने प्रॉडक्ट के बारे में लोगों का नज़रिया.

पहले हाइलाइट किए गए इसी ग्राहक पर चलने वाला एक और लाइटहाउस, मुख्य थ्रेड को ब्लॉक करने के समय में काफ़ी सुधार दिखाता है. इसे नए इंजन इस्तेमाल करने पर Taboola करता है.

इससे पता चलता है कि आईएनपी की वजहों का पता लगाने के लिए एलओएएफ़ का इस्तेमाल करना और परफ़ॉर्मेंस फ़ेडर की मदद से, नतीजे देने वाली अन्य तकनीकों का इस्तेमाल करना, टैबूला के पार्टनर को विज्ञापन और पेज की परफ़ॉर्मेंस में ज़्यादा से ज़्यादा सफलता हासिल करने में मदद करता है.

नतीजा

आईएनपी को ऑप्टिमाइज़ करना एक मुश्किल प्रोसेस है. खास तौर पर, जब पार्टनर वेबसाइटों पर तीसरे पक्ष की स्क्रिप्ट का इस्तेमाल किया जाता है. ऑप्टिमाइज़ेशन शुरू होने से पहले, खास स्क्रिप्ट के लिए आईएनपी का एट्रिब्यूशन करने से अनुमान लगाने और साइट की अन्य परफ़ॉर्मेंस मेट्रिक को होने वाले संभावित नुकसान की संभावना कम हो जाती है. LoAF API, खास तौर पर एम्बेड किए गए 3P में शामिल 3P की समस्याओं को पहचानने और उन्हें हल करने में एक अहम टूल साबित हुआ है. इसकी मदद से, उन्हें अपने SDK टूल को बेहतर बनाने के खास अवसरों का पता लगाने में मदद मिलती है और पेज पर मौजूद दूसरी टेक्नोलॉजी की वजह से रुकावट नहीं आती.

जब इसे अच्छी यील्डिंग रणनीति के साथ इस्तेमाल किया जाता है, जैसे कि scheduler.postTask() का इस्तेमाल करना, तो LoAF की मदद से आप पेज के खराब रिस्पॉन्स की वजहों के बारे में जान सकते हैं और उन्हें समझ सकते हैं. इससे आपको अपनी वेबसाइट के आईएनपी को बेहतर बनाने के लिए ज़रूरी जानकारी मिलती है.

इस काम में योगदान देने के लिए, Google के गिल्बर्टो कोची, नोआम रोज़ेनथल, और रिक विस्कोमी को खास धन्यवाद. इसके अलावा, Tab संगठनों की इंजीनियरिंग और प्रॉडक्ट टीम से डेडी हक्क, अनत डगन, और ओमरी आरियाव को भी धन्यवाद.