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

Long Animation Frames API (LoAF) का फ़ायदा उठाकर और स्मार्ट यील्डिंग की रणनीति अपनाकर, Taboola ने विज्ञापन की परफ़ॉर्मेंस पर असर डाले बिना पब्लिशर की वेबसाइट की रिस्पॉन्सिवनेस को बेहतर बनाया.

David Belford

Thierno Thiam

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

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

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

इस केस स्टडी में, Taboola के INP को बेहतर बनाने की प्रोसेस के बारे में बताया गया है. इसमें, नए लॉन्ग ऐनिमेशन फ़्रेम (LoAF) एपीआई का इस्तेमाल करके, फ़ील्ड में पेज के रिस्पॉन्सिवनेस पर पड़ने वाले असर को मेज़र करने के बारे में बताया गया है. साथ ही, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, खास ऑप्टिमाइज़ेशन लागू करने की कोशिशों के बारे में भी बताया गया है.

INP के प्रॉक्सी के तौर पर TBT

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

इस संबंध के साथ-साथ, Taboola के पब्लिशर की ज़्यादा टीबीटी से जुड़ी चिंताओं की वजह से, Taboola ने इस मेट्रिक में अपने योगदान को कम करने पर ध्यान दिया.

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

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

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

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

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

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

INP के असर का आकलन करने के लिए, LoAF का इस्तेमाल करना

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

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

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

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

TRECS इंजन: बेहतर नतीजे पाने की नई रणनीति

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

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

LoAF का इस्तेमाल करके, रेंडरिंग को ब्लॉक करने वाले टास्क की पहचान करने के बाद, "परफ़ॉर्मेंस फ़ेडर" उन टास्क को अलग कर सकता है. इसके बाद, 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 पर वापस आ जाता है.
• यह फ़ंक्शन, फ़ंक्शन कॉल को कोड सेक्शन में रैप करता है. इन सेक्शन की वजह से, ऐनिमेशन फ़्रेम और INP लंबे हो जाते हैं. यह इन कोड सेक्शन को छोटे टास्क में बांट देता है. इससे INP कम हो जाता है.

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

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

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

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

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

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

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

नतीजा

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

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

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