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