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

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

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 من تحليل تأثيرها في استجابة الصفحة في الميدان. من خلال مراقبة سلوك المستخدِمين أثناء التصفّح، تمكّنت 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: استراتيجية تحقيق الأرباح الجديدة

بالإضافة إلى استخدام 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 مرّة ظهور (RPM)، سلبًا عند تفعيل ميزة TRECS وميزة "خافت الأداء" في لوحة الاختبار. من خلال هذا التحسين الإيجابي في مؤشر INP بدون أي نتيجة سلبية كما هو متوقّع في مؤشرات الأداء الرئيسية للإعلانات، ستُحسِّن Taboola تدريجيًا نظرة الناشرين إلى منتجها.

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

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

الخاتمة

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

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

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