كيف استخدَم مقدِّم اقتراحات المحتوى، Taboola، ميزة LoAF لتحسين INP بنسبة تصل إلى 36% للمواقع الإلكترونية الشريكة للناشرين.

كيف أتاحت الاستفادة من Long Animation Frames API (LoAF) واعتماد استراتيجية تحقيق الأرباح الذكية، Taboola لتحسين مدى استجابة الناشرين للمواقع الإلكترونية بدون التأثير سلبًا في أداء الإعلانات.

David Belford

Thierno Thiam

مدى استجابة الصفحة لتفاعلات المستخدم (INP) هو مقياس يقيّم مدى استجابة الموقع الإلكتروني للبيانات التي يُدخلها المستخدمون. يقيس مقياس INP الوقت الذي يستغرقه المستخدم لبدء تفاعل مع المحتوى، مثل النقر أو الكتابة، إلى أن يظهر الملاحظات المرئية الناتجة عن ذلك التفاعل. بسبب مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) سيتم استبدال "مهلة الاستجابة الأولى" (FID) ضِمن مؤشرات أداء الويب الأساسية في آذار (مارس) 2024.

‫Taboola هي منصّة رائدة عالميًا لاستكشاف المحتوى، وهي تقدّم 500,000 اقتراح في الثانية على الويب المفتوح. بفضل هذه الاقتراحات، يمكن للشركاء من الناشرين الحصريين البالغ عددهم 9,000 علامة Taboola تحقيق الربح من الجمهور والتفاعل معه. يعرض الناشرون الاقتراحات على صفحاتهم باستخدام JavaScript.

بما أنّ لغة JavaScript التابعة لجهة خارجية يمكن أن تؤثر في قدرة الصفحة على الاستجابة بسرعة لإدخالات المستخدم، استثمرت Taboola بشكل كبير في تقليل أحجام ملفات JavaScript ووقت التنفيذ. أعادت Taboola تصميم محرك العرض بالكامل، بالإضافة إلى استخدام واجهات برمجة التطبيقات الخاصة بالمتصفّح مباشرةً بدون أي تجريدات لتقليل تأثيرها على مقياس INP.

تتناول هذه الدراسة الحالة رحلة Taboola لتحسين INP باستخدام واجهة برمجة التطبيقات الجديدة لإطارات الصور المتحركة الطويلة (LoAF) لقياس تأثيرها في استجابة الصفحة في المجال، والجهود اللاحقة لتطبيق تحسينات محدّدة لتحسين تجربة المستخدِم.

TBT كخادم وكيل لـ INP

إجمالي وقت الحظر (TBT) هو مقياس مستند إلى المختبر يحدِّد المواضع التي تم فيها حظر سلسلة التعليمات الرئيسية لفترة طويلة بما يكفي للتأثير على استجابة الصفحة على الأرجح. يمكن أن تتأثر المقاييس الميدانية التي تقيس الاستجابة، مثل INP، بقيمة عالية لمقياس TBT. تشير دراسة أجرتها آني سوليفان حول الارتباط بين TBT وINP على الأجهزة الجوّالة إلى أنّه من المرجّح أن تحقّق المواقع الإلكترونية نتائج جيدة في INP عند تقليل وقت حظر سلسلة التعليمات الرئيسية إلى الحدّ الأدنى.

وأدى هذا الارتباط، إلى جانب مخاوف الناشرين في Taboola بشأن ارتفاع نسبة النقر إلى الظهور، إلى تركيز Taboola على الحدّ من مساهمتها في هذا المقياس.

باستخدام TBT كمقياس بديل لمقياس INP، بدأت Taboola في مراقبة وقت تنفيذ JavaScript وتحسينه للحدّ من تأثيره المحتمل في "مؤشرات أداء الويب الأساسية". بدأ الفريق بتنفيذ ما يلي:

• تحديد النصوص البرمجية التي تتضمّن مشاكل وتحسينها في الميدان باستخدام Long Tasks API
• تقدير مساهمات تحسين الأداء من خلال تحليل البيانات باستخدام واجهة برمجة التطبيقات PageSpeed Insights API لتقييم 10,000 إلى 15,000 عنوان URL كل يوم

ومع ذلك، لاحظت Taboola أنّ تحليل "الإعلانات التي تستند إلى آخر الأخبار" باستخدام هذه الأدوات كان له بعض القيود:

• لا يمكن لواجهة برمجة التطبيقات Long Tasks API إسناد المهمة إلى النطاق الأصلي أو نص برمجي معيّن، ما يجعل من الصعب تحديد مصادر المهام التي تستغرق وقتًا طويلاً.
• لا تُحدِّد Long Tasks API سوى المهام التي تستغرق وقتًا طويلاً، بدلاً من مجموعة من المهام وتغييرات التنسيق التي قد تؤدي إلى تأخير العرض.

لحلّ هذه التحديات، انضمّت Taboola إلى الإصدار التجريبي من واجهة برمجة التطبيقات Long Animation Frames (LoAF) API في محاولة لفهم تأثيرها الحقيقي على استجابة إدخالات المستخدمين بشكل أفضل. تتيح مراحل التجربة والتقييم استخدام ميزات جديدة أو تجريبية، ما يسمح للمطوّرين باختبار الميزات الناشئة التي يمكن للمستخدمين تجربتها لفترة محدودة.

من المهمّ الإشارة إلى أنّ الجانب الأكثر صعوبة في هذا التحدي كان تحسين INP بنجاح بدون التأثير في أيّ من مؤشرات الأداء الرئيسية لـ "إعلانات Google" أو التسبب في تأخير الموارد للناشرين.

استخدام نموذج LoAF لتقييم تأثير INP

يحدث إطار متحركة طويل عندما يتأخّر تحديث العرض إلى أكثر من 50 ملي ثانية. من خلال تحديد أسباب بطء تحديثات واجهة المستخدم، بدلاً من المهام الطويلة وحدها، تمكّنت Taboola من تحليل تأثيرها في استجابة الصفحة في الميدان. من خلال مراقبة LoAF، تمكّنت Taboola من:

1. ربط الإدخالات بمهام محدَّدة في Taboola
2. مراقبة مشاكل الأداء في ميزات معيّنة قبل نشرها في قناة الإصدار العلني
3. جمع البيانات المجمّعة لمقارنة إصدارات الرموز البرمجية المختلفة في اختبارات أ/ب، وإعداد تقارير عن مقاييس النجاح الرئيسية

لغة 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، أو يستغرق تشغيل نص Taboola أكثر من 50 مللي ثانية.
• يتم إنشاء firstUIEventTimeStamp إذا تأخّر تفاعل المستخدم بسبب إطار صورة متحركة طويل. وتعتبر أطول مدة حظر هي النتيجة الإجمالية لمقياس INP. يمكننا أيضًا تحديد الحالات التي تسبّبت فيها Taboola في firstUIEventTimeStamp لاحتساب نتيجة INP في Taboola.

ساعدت البيانات التي تم جمعها باستخدام LoAF شركة Taboola في إنشاء جدول تحديد المصدر التالي الذي يحدّد المجالات التي يمكنها فيها تطبيق الفرص المربحة.

TRECS Engine: الاستراتيجية الجديدة لتحقيق الأرباح

بالإضافة إلى استخدام LoAF لفهم فرص تحسين النصوص البرمجية بشكل أفضل، أعادت Taboola تصميم محرك العرض بالكامل لتقليل وقت تنفيذ JavaScript والحظر بشكل كبير.

تحافظ خدمة TRECS (خدمة عملاء قابلة للتوسيع لاقتراحات Taboola) على العرض من جهة العميل ورمز JavaScript الحالي للناشر، مع تقليل عدد الملفات الإلزامية المطلوبة لتحميل اقتراحات 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 وPerformance Fader، أجرت Taboola اختبار أ/ب يقيس INP مقارنةً بالمحرك الحالي بدون نصّ يحقّق الأرباح على مجموعة من شركاء الناشرين.

يعرض الجدول التالي نتائج INP بالمللي ثانية عند الشريحة المئوية 75 لأربعة ناشرون مجهولون في شبكة Taboola.

من الجيّد أنّ مقاييس النشاط التجاري، مثل "نسبة النقر إلى الظهور على الإعلان" و"الأرباح لكل 1,000 ظهور"، لم تتأثر سلبًا عندما كانت تقنية TRECS و"أداة اختفاء الأداء" مفعّلة على لوحة الاختبار. من خلال هذا التحسين الإيجابي في مؤشر INP بدون أي نتيجة سلبية كما هو متوقّع في مؤشرات الأداء الرئيسية للإعلانات، ستُحسِّن Taboola تدريجيًا نظرة الناشرين إلى منتجها.

أظهرت عملية أخرى أجريناها باستخدام Lighthouse على العميل نفسه الذي سبق أن أشرنا إليه تحسُّنًا كبيرًا في وقت حظر سلسلة التعليمات الرئيسية من قِبل Taboola عند استخدام المحرّك الجديد.

يوضّح هذا أنّ استخدام LoAF لتحديد أسباب INP واستخدام أساليب المحقِّق للأرباح اللاحقة باستخدام أداة Performance Fader، يتيح لشركاء Taboola تحقيق أقصى قدر من النجاح في أداء الإعلانات والصفحات.

الخاتمة

إنّ تحسين INP عملية معقّدة، لا سيّما عند استخدام نصوص برمجية تابعة لجهات خارجية على المواقع الإلكترونية للشركاء. قبل بدء عملية التحسين، تؤدي عملية تحديد مصدر INP إلى نصوص برمجية معيّنة إلى إزالة أي تخمينات والأضرار المحتملة التي قد تلحق بمقاييس أداء الموقع الإلكتروني الأخرى.وقد أثبتت LoAF API أنّها أداة قيّمة لتحديد ومعالجة مشاكل INP، لا سيما بالنسبة إلى الجهات الخارجية المضمّنة، وذلك من خلال السماح لها بتحديد فرص تحسين حزمة SDK المحدّدة مع إزالة التداخل من التقنيات الأخرى المتوفّرة على الصفحة.

عند استخدامها مع استراتيجية تحقيق عائد جيدة، مثل استخدام scheduler.postTask()، يمكن أن تساعدك استراتيجية LoAF في رصد سبب ضعف استجابة الصفحة وفهمه، ما يمنحك بدوره المعلومات التي تحتاجها لتحسين مقياس INP لموقعك الإلكتروني.

نشكر بشكل خاص جيلبرتو كوتشي ونعام روزنتال وريك فيسكومي من Google، وديدي هاكاك وأنات داغان وعمري أرياف من فريقَي الهندسة والمنتجات في Taboola على مساهمتهم في هذا العمل.