कॉन्टेंट का सुझाव देने वाली कंपनी 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 को बेहतर बनाने के सफ़र के बारे में बताया गया है. इसमें, फ़ील्ड में पेज की रिस्पॉन्स देने की क्षमता पर इसके असर का आकलन करने के लिए, नए Long Animation Frames (LoAF) API का इस्तेमाल करने के बारे में बताया गया है. साथ ही, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, खास ऑप्टिमाइज़ेशन लागू करने के बारे में बताया गया है.

आईएनपी के प्रॉक्सी के तौर पर टीबीटी

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

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

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

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

हालांकि, Taboola ने पाया कि इन टूल से टीबीटी का विश्लेषण करने में कुछ समस्याएं आ रही थीं:

• Long Tasks API, टास्क को ओरिजन डोमेन या किसी स्क्रिप्ट से नहीं जोड़ सकता. इससे, लंबे समय तक चलने वाले टास्क के सोर्स का पता लगाना मुश्किल हो जाता है.
• लॉन्ग टास्क एपीआई, सिर्फ़ लॉन्ग टास्क की पहचान करता है. यह टास्क और लेआउट में हुए बदलावों के कॉम्बिनेशन की पहचान नहीं करता. इनकी वजह से रेंडरिंग में देरी हो सकती है.

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

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

आईएनपी पर LoAF का असर देखने के लिए, LoAF का इस्तेमाल करना

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

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

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

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

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

TRECS इंजन: ज़्यादा रेवेन्यू पाने की नई रणनीति

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

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

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

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

नीचे दी गई टेबल में, Taboola नेटवर्क में शामिल चार गुमनाम पब्लिशर के लिए, 75वें पर्सेंटाइल पर मिलीसेकंड में INP के नतीजे दिखाए गए हैं.

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

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

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

नतीजा

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

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

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