چگونه استفاده از Long Animation Frames API (LoAF) و اتخاذ یک استراتژی بازدهی هوشمند، Taboola را قادر ساخت تا پاسخگویی وب سایت ناشران را بدون به خطر انداختن عملکرد تبلیغات بهبود بخشد.
تعامل با رنگ بعدی (INP) معیاری است که پاسخگویی وب سایت به ورودی کاربر را ارزیابی می کند. INP زمان را از زمانی که کاربر یک تعامل را شروع می کند - مانند هنگام کلیک کردن، ضربه زدن یا تایپ کردن - تا بازخورد بصری که نتیجه می شود اندازه گیری می کند. INP قرار است در مارس 2024 جایگزین First Input Delay (FID) به عنوان Core Web Vital شود .
Taboola پلت فرم پیشرو در کشف محتوا در جهان است که در هر ثانیه 500000 توصیه را در وب باز ارائه می دهد. این توصیه‌ها به 9000 شریک ناشر انحصاری Taboola امکان کسب درآمد و جذب مخاطبان خود را می‌دهد. ناشران با استفاده از جاوا اسکریپت توصیه هایی را در صفحات خود ارائه می کنند.
از آنجایی که جاوا اسکریپت شخص ثالث می تواند بر توانایی صفحه برای پاسخ سریع به ورودی کاربر تأثیر بگذارد، Taboola سرمایه گذاری زیادی برای کاهش اندازه فایل های جاوا اسکریپت و زمان اجرای آن انجام داده است. Taboola کل موتور رندر خود را دوباره طراحی کرده است و همچنین از APIهای مرورگر مستقیماً بدون انتزاع استفاده می کند تا تأثیر آن بر INP را به حداقل برساند.
این مطالعه موردی سفر Taboola را برای بهبود INP با استفاده از API جدید Long Animation Frames (LoAF) برای اندازه‌گیری تأثیر آن بر پاسخ‌دهی صفحه در میدان، و تلاش‌های بعدی برای اعمال بهینه‌سازی‌های خاص برای بهبود تجربه کاربر پوشش می‌دهد.
TBT به عنوان پروکسی INP
زمان انسداد کل (TBT) معیاری مبتنی بر آزمایشگاه است که مشخص می‌کند کجای رشته اصلی برای مدت طولانی مسدود شده است تا احتمالاً بر پاسخگویی صفحه تأثیر بگذارد. معیارهای میدانی که پاسخگویی را اندازه گیری می کنند - مانند INP - می توانند تحت تأثیر TBT بالا قرار بگیرند. بررسی آنی سالیوان در مورد همبستگی بین TBT و INP در دستگاه‌های تلفن همراه نشان می‌دهد که سایت‌ها با به حداقل رساندن زمان مسدود کردن رشته اصلی، احتمال بیشتری برای دستیابی به امتیازات INP خوب دارند.
این همبستگی، همراه با نگرانی‌های ناشران Taboola در مورد TBT بالا، باعث شد تا Taboola توجه خود را بر به حداقل رساندن سهم خود در این معیار متمرکز کند.
RELEASE.js رشته اصلی را به مدت 691 میلی ثانیه مسدود می کنند.با استفاده از TBT به عنوان یک معیار پراکسی برای INP، Taboola شروع به نظارت و بهینه سازی زمان اجرای جاوا اسکریپت کرد تا تأثیر بالقوه آن بر Core Web Vitals را محدود کند. آنها با انجام کارهای زیر شروع کردند:
- شناسایی و بهینه سازی اسکریپت های مشکل دار در زمینه با استفاده از Long Tasks API .
- تخمین مشارکت های TBT با استفاده از PageSpeed Insights API برای ارزیابی 10000 تا 15000 URL در هر روز.
با این حال، Taboola متوجه شد که تجزیه و تحلیل TBT با این ابزارها دارای محدودیت هایی است:
- Long Tasks API نمی تواند وظیفه را به دامنه اصلی یا یک اسکریپت خاص نسبت دهد، و شناسایی منابع کارهای طولانی را دشوارتر می کند.
- Long Tasks API فقط وظایف طولانی را شناسایی می کند، نه ترکیبی از وظایف و تغییرات طرح که می تواند باعث تاخیر در رندر شود.
برای مقابله با این چالش‌ها، Taboola به آزمایش اولیه API Long Animation Frames (LoAF) پیوست تا تأثیر واقعی آن بر پاسخ‌دهی ورودی کاربر را بهتر درک کند. آزمایش‌های اولیه دسترسی به ویژگی‌های جدید یا آزمایشی را می‌دهد و به توسعه‌دهندگان اجازه می‌دهد ویژگی‌های نوظهوری را که کاربرانشان می‌توانند برای مدت محدودی آنها را امتحان کنند، آزمایش کنند.
ضروری است تاکید شود که دشوارترین جنبه این چالش، بهبود موفقیت آمیز INP بدون به خطر انداختن KPI (شاخص عملکرد کلیدی) تبلیغات یا ایجاد تاخیر در منابع برای ناشران ما بود.
استفاده از LoAF برای ارزیابی تأثیر INP
یک فریم انیمیشن طولانی زمانی رخ می دهد که به روز رسانی رندر بیش از 50 میلی ثانیه به تاخیر بیفتد. Taboola با شناسایی دلایل کندی به‌روزرسانی رابط کاربری - به جای کارهای طولانی به تنهایی - توانست تأثیر آن را بر پاسخ‌دهی صفحه در این زمینه تجزیه و تحلیل کند. مشاهده LoAF به Taboola اجازه داده است:
- ورودی‌ها را به وظایف خاص Taboola نسبت دهید.
- مسائل مربوط به عملکرد را در ویژگی های خاص قبل از استفاده از آنها در تولید مشاهده کنید.
- داده های جمع آوری شده را برای مقایسه نسخه های مختلف کد در آزمون های A/B جمع آوری کنید و در مورد معیارهای کلیدی موفقیت گزارش دهید.
جاوا اسکریپت زیر یک نسخه ساده شده است که در تولید برای جمع آوری 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ایجاد می شود. طولانی ترین مدت مسدود کردن به عنوان نمره کلی INP در نظر گرفته می شود. ما همچنین می‌توانیم تشخیص دهیم که Taboola چه زمانیfirstUIEventTimeStampرا برای محاسبه امتیاز Taboola INP راه‌اندازی کرده است.
داده‌های جمع‌آوری‌شده با LoAF به Taboola کمک کرد تا جدول انتساب زیر را ایجاد کند، که مناطقی را که می‌تواند فرصت‌های بازده را اعمال کند، مشخص می‌کند.
موتور TRECS: استراتژی تسلیم جدید
علاوه بر استفاده از LoAF برای درک بهتر فرصت‌های بهینه‌سازی اسکریپت، Taboola کل موتور رندر خود را دوباره طراحی کرده است تا به طور قابل توجهی اجرای جاوا اسکریپت و زمان مسدود کردن را به حداقل برساند.
TRECS (سرویس مشتری توسعه‌پذیر توصیه‌های Taboola) رندر سمت مشتری و کد JS فعلی ناشر را حفظ می‌کند و در عین حال تعداد و اندازه فایل‌های اجباری مورد نیاز برای بارگیری توصیه‌های Taboola را کاهش می‌دهد.
هنگامی که وظایف مسدودکننده رندر با استفاده از LoAF شناسایی شدند، "Performance Fader" می‌تواند آن وظایف را قبل از تسلیم شدن به رشته اصلی با استفاده از scheduler.postTask() تجزیه کند. این طراحی تضمین می‌کند که کارهای مهم کاربر - مانند رندر کردن به‌روزرسانی‌ها - بدون در نظر گرفتن هر کار موجودی که ممکن است رشته اصلی را اشغال کند، در اسرع وقت اجرا شود.
در اینجا قطعه JS از اجرای وظیفه "Performance Fader" آمده است:
/**
* 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()در زیر سرپوش استفاده می‌کند (اگر API موجود باشد)، یا بهsetTimeoutبرمی‌گردد. - این تابع فراخوانی های تابع را در بخش های کدی که باعث ایجاد فریم های طولانی انیمیشن و INP می شوند، قرار می دهد. این بخش‌های کد را به وظایف کوتاه‌تر تقسیم می‌کند و بنابراین INP را کاهش می‌دهد.
معیارهای کسب و کار
به لطف LoAF، Taboola توانست تاثیر آن بر INP را بهتر درک کند. این ابزار همچنین فرصت‌های بهینه‌سازی اسکریپت را که می‌توان به عنوان بخشی از موتور جدید TRECS مورد استفاده قرار داد، برجسته کرد.
برای تعیین تاثیر TRECS و Performance Fader، Taboola یک تست A/B را انجام داد که INP را در مقابل موتور موجود اندازه‌گیری کرد، بدون اینکه اسکریپت بر روی پانل شرکای ناشر ارائه شود.
جدول زیر نتایج INP را بر حسب میلی ثانیه در صدک 75 چهار ناشر ناشناس در شبکه Taboola نشان می دهد.
خوشبختانه، معیارهای کسب و کار، مانند نرخ کلیک آگهی و درآمد به ازای هر 1000 نمایش (RPM) زمانی که TRECS و Performance Fader در پانل تست فعال شدند ، تأثیر منفی نداشتند . با این بهبود مثبت در INP بدون هیچ نتیجه منفی همانطور که در KPIهای تبلیغاتی انتظار می رود ، Taboola به تدریج درک ناشران خود را در مورد محصول خود بهبود می بخشد.
یکی دیگر از اجرای Lighthouse روی همان مشتری که قبلاً مشخص شد، بهبود قابل توجهی در زمان مسدود کردن نخ اصلی توسط Taboola هنگام استفاده از موتور جدید نشان می‌دهد.
RELEASE.js کمک کرد تا TBT را تا 485 میلی ثانیه (-70%) کاهش دهند.این نشان می‌دهد که استفاده از LoAF برای شناسایی علل INP و بکارگیری تکنیک‌های بازده بعدی با Performance Fader، شرکای Taboola را قادر می‌سازد تا به حداکثر موفقیت در تبلیغات و عملکرد صفحه دست یابند.
نتیجه گیری
بهینه سازی INP یک فرآیند پیچیده است، به ویژه زمانی که از اسکریپت های شخص ثالث در وب سایت های شریک استفاده می شود. قبل از شروع بهینه‌سازی، انتساب INP به اسکریپت‌های خاص، هرگونه حدس و گمان و آسیب احتمالی به سایر معیارهای عملکرد سایت را حذف می‌کند. LoAF API یک ابزار ارزشمند برای شناسایی و پرداختن به مسائل INP به‌ویژه برای 3Pهای تعبیه‌شده با اجازه دادن به آنها برای تعیین دقیق ویژگی‌های خاص خود ثابت شده است. فرصت های بهبود SDK در حالی که تداخل سایر فناوری های موجود در صفحه را حذف می کند.
هنگامی که همراه با یک استراتژی بازده خوب - مانند استفاده از scheduler.postTask() - LoAF می تواند به شما کمک کند تا علت پاسخگویی ضعیف صفحه را مشاهده و درک کنید، که به نوبه خود، اطلاعات مورد نیاز برای بهبود INP وب سایت خود را در اختیار شما قرار می دهد.
تشکر ویژه از Gilberto Cocchi، Noam Rosenthal، و Rick Viscomi از Google، و Dedi Hakak، Anat Dagan و Omri Ariav از تیم مهندسی و محصول Taboola برای مشارکت در این کار.