जानें कि लंबी ऐनिमेशन फ़्रेम एपीआई (एलओएएफ़) की मदद से और बेहतर नतीजे देने की रणनीति का इस्तेमाल करने से Taboola को कैसे मदद मिली. साथ ही, इससे विज्ञापन की परफ़ॉर्मेंस से समझौता किए बिना, पब्लिशरों को वेबसाइट का रिस्पॉन्स बेहतर बनाने में मदद मिली.
इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) एक ऐसी मेट्रिक है जो यह आकलन करती है कि वेबसाइट, उपयोगकर्ता के इनपुट के हिसाब से कितनी रिस्पॉन्सिव है. आईएनपी मेट्रिक, उपयोगकर्ता के इंटरैक्शन की शुरुआत करने से लेकर, विज़ुअल फ़ीडबैक के तौर पर मिलने वाले समय को मेज़र करती है. जैसे, क्लिक, टैप या टाइप करना. आईएनपी को, मार्च 2024 में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के तौर पर, फ़र्स्ट इनपुट डिले (एफ़आईडी) को बदलना है.
Taboola कॉन्टेंट खोजने के लिए दुनिया का सबसे बेहतरीन प्लैटफ़ॉर्म है. इस पर, ओपन वेब पर हर सेकंड 5,00,000 सुझाव दिए जाते हैं. इन सुझावों की मदद से, Taboola के 9,000 खास पब्लिशर पार्टनर को अपने पाठकों से कमाई करने और उनकी दिलचस्पी बनाए रखने में मदद मिलती है. पब्लिशर, JavaScript का इस्तेमाल करके अपने पेजों पर सुझावों को रेंडर करते हैं.
तीसरे पक्ष की JavaScript, उपयोगकर्ता के इनपुट का तुरंत जवाब देने में किसी पेज की क्षमता पर असर डाल सकती है. इसलिए, Tabooa की JavaScript फ़ाइलों का साइज़ और एक्ज़ीक्यूशन का समय कम करने के लिए बहुत मेहनत करनी पड़ती है. Tabooa ने अपने पूरे रेंडरिंग इंजन को फिर से डिज़ाइन किया है. साथ ही, इसमें बिना किसी बदलाव के सीधे ब्राउज़र एपीआई का इस्तेमाल किया जा रहा है, ताकि आईएनपी पर इसका असर कम से कम हो.
इस केस स्टडी में, नए लॉन्ग ऐनिमेशन फ़्रेम (एलओएएफ़) एपीआई का इस्तेमाल करके, आईएनपी को बेहतर बनाने में ताबूला के सफ़र के बारे में बताया गया है. इससे, फ़ील्ड में पेज के रिस्पॉन्स देने की क्षमता पर पड़ने वाले असर को मापा जा सकता है. साथ ही, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए खास ऑप्टिमाइज़ेशन लागू करने की कोशिशों के बारे में भी बताया गया है.
आईएनपी के प्रॉक्सी के तौर पर TBT
टोटल ब्लॉकिंग टाइम (TBT), लैब पर आधारित मेट्रिक है. इससे यह पता चलता है कि मुख्य थ्रेड को लंबे समय तक कहां ब्लॉक किया गया था. इस वजह से, पेज के रिस्पॉन्स पर असर पड़ सकता है. जवाब देने के तरीके को मापने वाली फ़ील्ड मेट्रिक, जैसे कि आईएनपी—पर ज़्यादा टीबीटी का असर पड़ सकता है. मोबाइल डिवाइसों पर TBT और INP के बीच के संबंध की ऐनी सुलिवन ने जांच की. इससे पता चलता है कि मुख्य थ्रेड को ब्लॉक करने का समय कम होने पर, साइटें अच्छे INP स्कोर हासिल कर सकती हैं.
इसी वजह से, TBT को लेकर ताबूला के पब्लिशरों की समस्याओं की वजह से, ताबूला ने इस मेट्रिक में अपना योगदान कम करने पर ध्यान दिया.
RELEASE.js जैसी स्क्रिप्ट, मुख्य थ्रेड को 691 मिलीसेकंड के लिए ब्लॉक करती हैं.
TBT को आईएनपी के लिए प्रॉक्सी मेट्रिक के तौर पर इस्तेमाल करके, Tabooa ने JavaScript चलाने के समय पर नज़र रखना और उसे ऑप्टिमाइज़ करना शुरू किया. इससे, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर पड़ने वाले असर को सीमित किया जा सकेगा. उन्होंने यह तरीका अपनाकर शुरुआत की:
- long Tasks API का इस्तेमाल करके, फ़ील्ड में समस्या वाली स्क्रिप्ट की पहचान करना और उन्हें ऑप्टिमाइज़ करना.
- PageSpeed Insights API का इस्तेमाल करके, हर दिन 10,000 से 15,000 यूआरएल का आकलन करके, TBT के योगदान का अनुमान लगाया जा सकता है.
हालांकि, Tabooa को पता चला कि इन टूल से TBT का विश्लेषण करने की कुछ सीमाएं हैं:
- लाॅन्ग टास्क एपीआई, किसी टास्क के लिए ऑरिजिन डोमेन या किसी खास स्क्रिप्ट को एट्रिब्यूट नहीं कर सकता. इससे लंबे टास्क के सोर्स की पहचान करना ज़्यादा मुश्किल हो जाता है.
- लंबे टास्क एपीआई, टास्क और लेआउट में मिले-जुले बदलावों के कॉम्बिनेशन के बजाय सिर्फ़ लंबे टास्क की पहचान करता है. इन बदलावों की वजह से, रेंडरिंग में देरी हो सकती है.
इन चुनौतियों से निपटने के लिए, Tabooa ने लॉन्ग ऐनिमेशन फ़्रेम (एलओएएफ़) एपीआई के ऑरिजिन ट्रायल में शामिल किया. इसका मकसद, लोगों से मिले इनपुट के रिस्पॉन्स पर होने वाले असल असर को बेहतर तरीके से समझना था. ऑरिजिन ट्रायल की सुविधा से, नई या एक्सपेरिमेंट के तौर पर शुरू की गई सुविधाओं का ऐक्सेस मिलता है. इनकी मदद से, डेवलपर उन नई सुविधाओं को टेस्ट कर सकते हैं जिन्हें उनके उपयोगकर्ता सीमित समय के लिए आज़मा सकते हैं.
यह हाइलाइट करना ज़रूरी है कि किसी भी विज्ञापन केपीआई(परफ़ॉर्मेंस इंडिकेटर) से समझौता किए बिना या हमारे पब्लिशर को संसाधन में देरी किए बिना, आईएनपी को बेहतर बनाना इस चुनौती का सबसे मुश्किल पहलू है.
आईएनपी के असर का आकलन करने के लिए एलओएएफ़ का इस्तेमाल करना
लंबा ऐनिमेशन फ़्रेम तब होता है, जब रेंडरिंग अपडेट में 50 मिलीसेकंड से ज़्यादा की देरी होती है. सिर्फ़ लंबे टास्क के बजाय, उपयोगकर्ता इंटरफ़ेस के धीमे अपडेट होने की वजहों का पता लगाकर, Tabula ने फ़ील्ड में पेज के रिस्पॉन्स पर अपने असर का विश्लेषण किया. LoAF पर नज़र रखने से तबूला को ये काम करने की अनुमति मिली:
- खास Tabooa टास्क के लिए एंट्री को एट्रिब्यूट करें.
- प्रोडक्शन में लागू करने से पहले, कुछ खास सुविधाओं में परफ़ॉर्मेंस की समस्याओं पर नज़र रखें.
- 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फ़ंक्शन का इस्तेमाल करके, Tabooa को उन एंट्री की पहचान करने की अनुमति मिली जहां वह ज़्यादा योगदान देती है.- अगर स्क्रिप्ट की कुल अवधि का आधे से ज़्यादा समय टेबला की वजह से आता है या फिर Tabooa स्क्रिप्ट को चलने में 50 मिलीसेकंड से ज़्यादा समय लगता है, तो ताबूला को मुख्य योगदान देने वाला माना जाता है.
- अगर लंबे ऐनिमेशन फ़्रेम की वजह से उपयोगकर्ता के इंटरैक्शन में देरी होती है, तो
firstUIEventTimeStampजनरेट होता है. ब्लॉक करने की सबसे लंबी अवधि को कुल आईएनपी स्कोर माना जाता है. हम यह भी पता लगा सकते हैं कि ताबूला ने कब ताबूला INP स्कोर का हिसाब लगाने के लिएfirstUIEventTimeStampट्रिगर किया है.
एलओएएफ़ की मदद से इकट्ठा किए गए डेटा से तबूला को यह एट्रिब्यूशन टेबल बनाने में मदद मिली, जो उन क्षेत्रों की पहचान करती है जहां बेहतर नतीजे मिल सकते हैं.
TRECS Engine: बेहतर नतीजे देने वाली नई रणनीति
स्क्रिप्ट ऑप्टिमाइज़ेशन के अवसरों को बेहतर तरीके से समझने के लिए, LoAF का इस्तेमाल करने के साथ-साथ Tab9a ने अपने पूरे रेंडरिंग इंजन को फिर से डिज़ाइन किया है. इससे JavaScript का एक्ज़ीक्यूशन और ब्लॉक करने में लगने वाला समय काफ़ी कम हो गया है.
TRECS (Tabooa के सुझाव एक्सटेंसिबल क्लाइंट सर्विस) क्लाइंट-साइड रेंडरिंग और पब्लिशर के मौजूदा JS कोड को बनाए रखता है. साथ ही, Tabooa के सुझावों को लोड करने के लिए ज़रूरी फ़ाइलों की संख्या और साइज़ को कम करता है.
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पर वापस चला जाता है.- यह फ़ंक्शन, फ़ंक्शन कॉल को उन कोड सेक्शन में रैप करता है जिनसे लंबे ऐनिमेशन फ़्रेम और आईएनपी मिलते हैं. यह इन कोड सेक्शन को छोटे-छोटे टास्क में बांट देता है, जिससे आईएनपी कम हो जाता है.
कारोबार की मेट्रिक
LoAF की मदद से तबूला, आईएनपी पर इसके असर को बेहतर तरीके से समझ पाया. इस टूल ने स्क्रिप्ट ऑप्टिमाइज़ेशन के अवसरों को भी हाइलाइट किया है, जिनका इस्तेमाल नए TRECS इंजन के हिस्से के तौर पर किया जा सकता है.
TRECS और परफ़ॉर्मेंस फ़ेडर का असर पता करने के लिए, ताबूला ने मौजूदा इंजन की तुलना में आईएनपी को मापने के लिए A/B टेस्ट किया. इसमें पब्लिशर पार्टनर के पैनल से कोई स्क्रिप्ट नहीं मिली.
नीचे दी गई टेबल में, Tabooa नेटवर्क में पहचान न करने वाले चार पब्लिशर के 75वें पर्सेंटाइल पर मिलीसेकंड में आईएनपी के नतीजे दिखाए गए हैं.
अच्छी बात यह है कि टेस्टिंग पैनल में TRECS और परफ़ॉर्मेंस फ़ेडर चालू होने पर, विज्ञापन पर क्लिक मिलने की दर और हर 1,000 इंप्रेशन (आरपीएम) पर रेवेन्यू जैसी कारोबार की मेट्रिक पर कोई खराब असर नहीं पड़ा. आईएनपी में हुए इस सकारात्मक सुधार के बाद, Ads केपीआई पर कोई भी नकारात्मक नतीजा नहीं दिखेगा. इसके आधार पर, Tabola अपने प्रॉडक्ट के बारे में पब्लिशर की सोच को धीरे-धीरे बेहतर करेगा.
पहले हाइलाइट किए गए उसी ग्राहक पर चलाए गए एक अन्य लाइटहाउस से, नए इंजन का इस्तेमाल करते समय मुख्य थ्रेड को ब्लॉक करने के समय में बहुत सुधार हुआ है.
RELEASE.js जैसी स्क्रिप्ट को 485 मि॰से॰ (-70%) तक टीबीटी कम करने में मदद मिली.
इससे यह पता चलता है कि एलओएएफ़ का इस्तेमाल करके आईएनपी की समस्याओं का पता लगाना और परफ़ॉर्मेंस फ़ेडर की मदद से बाद में मिलने वाली फ़ायदा पाने वाली तकनीकों को डिप्लॉय करना, तबूला के पार्टनर को विज्ञापन और पेज की परफ़ॉर्मेंस में ज़्यादा से ज़्यादा सफलता पाने में मदद करता है.
नतीजा
आईएनपी को ऑप्टिमाइज़ करना एक मुश्किल प्रोसेस है. खास तौर पर, जब पार्टनर वेबसाइटों पर तीसरे पक्ष की स्क्रिप्ट का इस्तेमाल किया जाता है. ऑप्टिमाइज़ेशन की शुरुआत होने से पहले, खास स्क्रिप्ट में आईएनपी को एट्रिब्यूशन देने से, अनुमान लगाने की ज़रूरत नहीं होती और साइट की परफ़ॉर्मेंस की अन्य मेट्रिक को होने वाला संभावित नुकसान नहीं होता. LoAF API खास तौर पर, एम्बेड किए गए 3P में आईएनपी की समस्याओं को पहचानने और उन्हें हल करने में अहम टूल साबित हुआ है. यह टूल, SDK टूल को बेहतर बनाने के खास अवसरों का पता लगाने के साथ-साथ पेज पर मौजूद दूसरी टेक्नोलॉजी की रुकावट को खत्म करता है.
जब इसका इस्तेमाल अच्छी यील्डिंग रणनीति, जैसे कि scheduler.postTask() के साथ किया जाता है, तब एलओएएफ़ की मदद से, पेज पर खराब रिस्पॉन्स की वजह का पता लगाया जा सकता है और उसे समझा जा सकता है. इससे आपको वह जानकारी मिलती है जिससे आपको अपनी वेबसाइट के आईएनपी को बेहतर बनाने में मदद मिलती है.
इस काम में गिल्बर्टो कोची, नोम रोज़ेनथल, और रिक विस्कोमी का खास धन्यवाद. साथ ही, ताबूला की इंजीनियरिंग ऐंड प्रॉडक्ट टीम से डेडी हक, अनत डेगन, और ओमरी अरियाव को भी खास धन्यवाद.