چگونه ارائه دهنده توصیه محتوا Taboola از LoAF برای بهبود INP تا ​​36٪ برای وب سایت های شریک ناشر خود استفاده کرد.

چگونه با بهره‌گیری از API فریم‌های انیمیشن بلند (LoAF) و اتخاذ یک استراتژی هوشمندانه، Taboola توانست پاسخگویی وب‌سایت ناشران را بدون به خطر انداختن عملکرد تبلیغات بهبود بخشد.

David Belford

Thierno Thiam

تعامل تا رنگ بعدی (INP) معیاری است که میزان پاسخگویی یک وب‌سایت به ورودی کاربر را ارزیابی می‌کند. INP مدت زمانی را که کاربر یک تعامل را شروع می‌کند - مانند کلیک کردن، ضربه زدن یا تایپ کردن - تا بازخورد بصری حاصل از آن اندازه‌گیری می‌کند. INP قرار است در مارس 2024 به عنوان یکی از معیارهای حیاتی هسته وب، جایگزین تأخیر ورودی اول (FID) شود .

تابولا پلتفرم پیشرو در کشف محتوا در جهان است که در هر ثانیه ۵۰۰۰۰۰ پیشنهاد در وب آزاد ارائه می‌دهد. این پیشنهادها به ۹۰۰۰ ناشر شریک انحصاری تابولا این امکان را می‌دهد که از طریق آن کسب درآمد کنند و مخاطبان خود را جذب کنند. ناشران با استفاده از جاوا اسکریپت، پیشنهادها را در صفحات خود ارائه می‌دهند.

از آنجایی که جاوا اسکریپت شخص ثالث می‌تواند بر توانایی صفحه در پاسخ سریع به ورودی کاربر تأثیر بگذارد، Taboola سرمایه‌گذاری زیادی روی کاهش اندازه فایل‌های جاوا اسکریپت و زمان اجرای آن انجام داده است. Taboola در حال طراحی مجدد کل موتور رندر خود و همچنین استفاده مستقیم از APIهای مرورگر بدون انتزاع است تا تأثیر آن بر INP را به حداقل برساند.

این مطالعه موردی، مسیر Taboola برای بهبود INP را با استفاده از API جدید Long Animation Frames (LoAF) برای سنجش تأثیر آن بر پاسخگویی صفحه در این زمینه و تلاش‌های بعدی برای اعمال بهینه‌سازی‌های خاص برای بهبود تجربه کاربری پوشش می‌دهد.

TBT به عنوان نماینده INP

زمان کل مسدودسازی (TBT) یک معیار مبتنی بر آزمایشگاه است که مشخص می‌کند رشته اصلی در چه زمانی به اندازه کافی مسدود شده است که احتمالاً بر پاسخگویی صفحه تأثیر می‌گذارد. معیارهای میدانی که پاسخگویی را اندازه‌گیری می‌کنند - مانند INP - می‌توانند تحت تأثیر TBT بالا قرار گیرند. تحقیقی توسط آنی سالیوان در مورد همبستگی بین TBT و INP در دستگاه‌های تلفن همراه نشان می‌دهد که سایت‌ها با به حداقل رساندن زمان مسدودسازی رشته اصلی، احتمال بیشتری برای دستیابی به نمرات INP خوب دارند.

این همبستگی، همراه با نگرانی‌های ناشران Taboola در مورد TBT بالا، باعث شد Taboola توجه خود را بر به حداقل رساندن سهم خود در این معیار متمرکز کند.

با استفاده از TBT به عنوان معیار پروکسی برای INP، Taboola شروع به نظارت و بهینه‌سازی زمان اجرای جاوا اسکریپت کرد تا تأثیر بالقوه آن بر Core Web Vitals را محدود کند. آنها با انجام موارد زیر شروع کردند:

• شناسایی و بهینه‌سازی اسکریپت‌های مشکل‌ساز در این زمینه با استفاده از API وظایف طولانی .
• تخمین سهم TBT با استفاده از API PageSpeed ​​Insights برای ارزیابی ۱۰،۰۰۰ تا ۱۵،۰۰۰ URL در هر روز.

با این حال، تابولا متوجه شد که تجزیه و تحلیل TBT با این ابزارها محدودیت‌هایی دارد:

• API وظایف طولانی نمی‌تواند وظیفه را به دامنه مبدا یا یک اسکریپت خاص نسبت دهد، و این امر شناسایی منابع وظایف طولانی را دشوارتر می‌کند.
• API وظایف طولانی فقط وظایف طولانی را شناسایی می‌کند، نه ترکیبی از وظایف و تغییرات طرح‌بندی که می‌تواند باعث تأخیر در رندر شود.

برای مقابله با این چالش‌ها، تابولا به آزمایش اولیه API فریم‌های انیمیشن بلند (LoAF) پیوست تا تأثیر واقعی آن را بر پاسخگویی به ورودی کاربر بهتر درک کند. آزمایش‌های اولیه به ویژگی‌های جدید یا آزمایشی دسترسی می‌دهند و به توسعه‌دهندگان اجازه می‌دهند ویژگی‌های نوظهوری را که کاربرانشان می‌توانند برای مدت محدودی امتحان کنند، آزمایش کنند.

لازم به ذکر است که سخت‌ترین جنبه این چالش، بهبود موفقیت‌آمیز INP بدون به خطر انداختن هیچ یک از شاخص‌های کلیدی عملکرد تبلیغات (KPI) یا ایجاد تأخیر در منابع برای ناشران ما بود.

استفاده از LoAF برای ارزیابی تأثیر INP

یک فریم انیمیشن طولانی زمانی رخ می‌دهد که به‌روزرسانی رندر بیش از ۵۰ میلی‌ثانیه تأخیر داشته باشد. با شناسایی علل به‌روزرسانی‌های کند رابط کاربری - به جای صرفاً وظایف طولانی - Taboola توانست تأثیر آن را بر پاسخگویی صفحه در این زمینه تجزیه و تحلیل کند. مشاهده LoAF به Taboola اجازه داده است تا:

1. ورودی‌ها را به وظایف خاص Taboola نسبت دهید.
2. قبل از اینکه ویژگی‌های خاص به محیط عملیاتی منتقل شوند، مشکلات عملکردی آنها را مشاهده کنید.
3. داده‌های تجمیع‌شده را برای مقایسه نسخه‌های مختلف کد در تست‌های 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 را فعال کرده است تا امتیاز INP Taboola را محاسبه کنیم.

داده‌های جمع‌آوری‌شده با LoAF به Taboola کمک کرد تا جدول تخصیص زیر را ایجاد کند که حوزه‌هایی را که می‌تواند در آن‌ها فرصت‌های سودآور را به کار گیرد، مشخص می‌کند.

موتور TRECS: استراتژی جدید بازدهی

Taboola علاوه بر استفاده از LoAF برای درک بهتر فرصت‌های بهینه‌سازی اسکریپت، کل موتور رندر خود را دوباره طراحی کرده است تا زمان اجرا و مسدود کردن جاوا اسکریپت را به میزان قابل توجهی کاهش دهد.

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 استفاده می‌کند که خود در پس‌زمینه (در صورت موجود بودن API) از scheduler.postTask() استفاده می‌کند، یا به setTimeout برمی‌گردد.
• این تابع، فراخوانی‌های تابع را در بخش‌هایی از کد که باعث فریم‌های انیمیشن طولانی و INP می‌شوند، قرار می‌دهد. این بخش‌های کد را به وظایف کوتاه‌تر تقسیم می‌کند و در نتیجه INP را کاهش می‌دهد.

معیارهای کسب و کار

به لطف LoAF، Taboola توانست تأثیر آن بر INP را بهتر درک کند. این ابزار همچنین فرصت‌های بهینه‌سازی اسکریپت را که می‌توانستند به عنوان بخشی از موتور جدید TRECS مورد استفاده قرار گیرند، برجسته کرد.

برای تعیین تأثیر TRECS و Performance Fader، تابولا یک تست A/B برای اندازه‌گیری INP در برابر موتور موجود بدون هیچ اسکریپتی در گروهی از شرکای ناشر انجام داد.

جدول زیر نتایج INP را بر حسب میلی‌ثانیه در صدک ۷۵ام چهار ناشر ناشناس در شبکه Taboola نشان می‌دهد.

خوشبختانه، معیارهای تجاری، مانند نرخ کلیک تبلیغات و درآمد به ازای هر ۱۰۰۰ نمایش (RPM)، هنگام فعال بودن TRECS و Performance Fader در پنل تست، تحت تأثیر منفی قرار نگرفتند . با این بهبود مثبت در INP بدون هیچ نتیجه منفی، همانطور که در KPI های تبلیغاتی انتظار می‌رفت ، Taboola به تدریج برداشت ناشران خود را در مورد محصولش بهبود خواهد بخشید.

اجرای دیگری از Lighthouse روی همان مشتری که قبلاً به آن اشاره شد، بهبود قابل توجهی را در زمان مسدود کردن نخ اصلی توسط Taboola هنگام استفاده از موتور جدید نشان می‌دهد.

این نشان می‌دهد که استفاده از LoAF برای شناسایی علل INP و به‌کارگیری تکنیک‌های بعدیِ جبران با Performance Fader، شرکای Taboola را قادر می‌سازد تا به حداکثر موفقیت در عملکرد تبلیغات و صفحه دست یابند.

نتیجه‌گیری

بهینه‌سازی INP یک فرآیند پیچیده است، به خصوص زمانی که اسکریپت‌های شخص ثالث در وب‌سایت‌های همکار استفاده می‌شوند. قبل از شروع بهینه‌سازی، نسبت دادن INP به اسکریپت‌های خاص، هرگونه حدس و گمان و آسیب احتمالی به سایر معیارهای عملکرد سایت را از بین می‌برد. API LoAF ثابت کرده است که ابزاری ارزشمند برای شناسایی و رسیدگی به مشکلات INP، به ویژه برای 3P های تعبیه شده است، زیرا به آنها اجازه می‌دهد تا فرصت‌های بهبود SDK خاص خود را مشخص کنند و در عین حال تداخل سایر فناوری‌های موجود در صفحه را از بین ببرند.

وقتی LoAF همراه با یک استراتژی yielding خوب - مانند استفاده از scheduler.postTask() - استفاده شود، می‌تواند به شما در مشاهده و درک علت پاسخگویی ضعیف صفحه کمک کند، که به نوبه خود، اطلاعات لازم برای بهبود INP وب‌سایت شما را در اختیارتان قرار می‌دهد.

تشکر ویژه از گیلبرتو کوچی، نوام روزنتال و ریک ویسکومی از گوگل، و ددی هاکاک، آنات داگان و عمری آریاو از تیم مهندسی و محصول تابولا برای مشارکتشان در این کار.