كيف استطاعت Taboola تحسين أداء الناشرين من خلال الاستفادة من Long Animation Frames API (LoAF) واستخدام استراتيجية تحقيق الأرباح الذكية مدى استجابة الموقع الإلكتروني بدون التأثير سلبًا في أداء الإعلانات.
مدى استجابة الصفحة لتفاعلات المستخدم (INP) هو مقياس يقيّم مدى استجابة الموقع الإلكتروني للبيانات التي يُدخلها المستخدمون. يقيس INP الوقت من وقت بدء المستخدم التفاعل، على سبيل المثال عند النقر أو النقر أو الكتابة، إلى الملاحظات المرئية التي تظهر. بسبب مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) سيتم استبدال "مهلة الاستجابة الأولى" (FID) ضِمن مؤشرات أداء الويب الأساسية في آذار (مارس) 2024.
Taboola هي المنصة الرائدة عالميًا لاستكشاف المحتوى، حيث تعرض 500,000 اقتراح كل ثانية على الويب المفتوح. بفضل هذه الاقتراحات، يمكن للشركاء من الناشرين الحصريين البالغ عددهم 9,000 علامة Taboola تحقيق الربح من الجمهور والتفاعل معه. يعرض الناشرون الاقتراحات على صفحاتهم باستخدام JavaScript.
بما أنّ لغة JavaScript التابعة لجهة خارجية يمكن أن تؤثر في قدرة الصفحة على الاستجابة بسرعة لإدخالات المستخدم، استثمرت Taboola بشكل كبير في تقليل أحجام ملفات JavaScript ووقت التنفيذ. أعادت Taboola تصميم محرك العرض بالكامل، بالإضافة إلى استخدام واجهات برمجة التطبيقات الخاصة بالمتصفّح مباشرةً بدون أي تجريدات لتقليل تأثيرها على مقياس INP.
تتناول دراسة الحالة هذه رحلة Taboola بهدف تحسين مقياس INP من خلال استخدام واجهة برمجة تطبيقات Long Animation Frames (LoAF) الجديدة لقياس تأثيرها على مدى استجابة الصفحات على نحو ميداني، والجهود اللاحقة التي تهدف إلى تطبيق تحسينات محدّدة لتحسين تجربة المستخدم.
TBT كخادم وكيل لـ INP
إجمالي وقت الحظر (TBT) هو مقياس يعتمد على المختبرات ويحدّد الأماكن التي تم فيها حظر سلسلة التعليمات الرئيسية لفترة طويلة بما يكفي للتأثير المحتمل على استجابة الصفحة. يمكن أن تتأثر مقاييس المجال التي تقيس مدى الاستجابة، مثل INP، بارتفاع TBT. يشير تحقيق أجرته آني سوليفان حول الارتباط بين مقياسَي TBT وINP على الأجهزة الجوّالة إلى أنّه من المرجّح أكثر أن تحقّق المواقع الإلكترونية نتائج INP جيدة عندما يكون وقت حظر سلاسل المحادثات الرئيسية أقل من الوقت المحدّد.
وقد أدى هذا الارتباط إلى جانب قصة الناشرين المخاوف المتعلقة بارتفاع TBT، دفعت Taboola إلى تركيز اهتمامها على تقليل مساهمتها في هذا المقياس.
RELEASE.js سلسلة التعليمات الرئيسية لمدة 691 ملّي ثانية.
باستخدام TBT كمقياس وكيل لمقياس INP، بدأت Taboola في تتبُّع وقت تنفيذ JavaScript وتحسينه للحدّ من تأثيره المحتمل على "مؤشرات أداء الويب الأساسية". وبدأوا بما يلي:
- تحديد النصوص البرمجية التي تحتوي على مشاكل في الحقل وتحسينها باستخدام Long Tasks API
- تقدير مساهمات TBT باستخدام PageSpeed Insights API لتقييم من 10,000 إلى 15,000 عنوان URL كل يوم.
ومع ذلك، لاحظت Taboola أن تحليل TBT باستخدام هذه الأدوات كان له بعض القيود:
- لا يمكن أن تنسب واجهة Long Tasks API المهمة إلى نطاق المصدر أو نص برمجي معيّن، ما يجعل من الصعب تحديد مصادر المهام الطويلة.
- وتحدِّد واجهة برمجة التطبيقات Long Tasks API فقط المهام الطويلة، بدلاً من مجموعة من المهام وتغييرات التنسيق التي يمكن أن تتسبب في تأخير العرض.
لمواجهة هذه التحديات، انضمت Taboola إلى مرحلة التجربة والتقييم في واجهة برمجة تطبيقات Long Animation Frames (LoAF) في محاولة للتعرّف بشكل أفضل على تأثيرها الحقيقي على سرعة ردود المستخدمين. تتيح مراحل التجربة والتقييم إمكانية الوصول إلى ميزات جديدة أو تجريبية، ما يسمح للمطوّرين باختبار الميزات الناشئة التي يمكن للمستخدمين تجربتها لفترة محدودة.
من الضروري التشديد على أنّ أصعب جانب في هذا التحدي تتمثّل في تحسين مقياس INP بدون التأثير سلبًا في أي مؤشر أداء رئيسي من "إعلانات Google" أو التسبب في تأخير توفير موارد الناشرين.
استخدام "نموذج أوّلي" لتقييم تأثير "مدى استجابة الصفحة لتفاعلات المستخدم" (INP)
يحدث إطار الرسوم المتحركة الطويل عندما يتأخر تحديث العرض إلى ما يزيد عن 50 مللي ثانية. ومن خلال تحديد أسباب بطء تحديثات واجهة المستخدم، بدلاً من المهام الطويلة وحدها، تمكّنت Taboola من تحليل تأثيرها في سرعة استجابة الصفحات على الحقل. لقد سمحت مراقبة LoAF لـ Taboola بما يلي:
- ربط الإدخالات بمهام محدَّدة في Taboola
- عليك ملاحظة مشاكل الأداء في ميزات معيَّنة قبل نشرها في قناة الإصدار العلني.
- يمكنك جمع بيانات مجمّعة للمقارنة بين نُسخ مختلفة من الرموز البرمجية في اختبارات A/B، وإعداد تقارير عن مقاييس النجاح الرئيسية.
لغة 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لاحتساب نتيجة Taboola INP.
ساعدت البيانات التي تم جمعها باستخدام LoAF على إنشاء جدول تحديد المصدر التالي، والذي يحدد المناطق التي يمكن فيها تطبيق فرص تحقيق أرباح.
TRECS Engine: الاستراتيجية الجديدة لتحقيق الأرباح
بالإضافة إلى استخدام LoAF لفهم فرص تحسين النصوص البرمجية بشكل أفضل، أعادت Taboola تصميم محرك العرض بالكامل لتقليل وقت تنفيذ JavaScript والحظر بشكل كبير.
TRECS (اقتراحات Taboola Recommendationsible Service (خدمة العملاء القابلة للتوسّع) في Taboola: يحافظ على العرض من جهة العميل ورمز JavaScript الحالي للناشر، مع تقليل عدد وحجم الملفات الإلزامية المطلوبة لتحميل اقتراحات Taboola.
بعد تحديد مهام حظر العرض باستخدام LoAF، يتم استخدام "أداة خافت الأداء" يمكنه تقسيم هذه المهام قبل الرجوع إلى سلسلة المحادثات الرئيسية باستخدام scheduler.postTask(). يضمن هذا التصميم تنفيذ الأعمال المهمة الموجَّهة للمستخدمين في أقرب وقت ممكن، مثل عرض التحديثات، بغض النظر عن أي مهام حالية قد تَشغل سلسلة التعليمات الرئيسية.
في ما يلي مقتطف JavaScript من "أداة التلاشي الأداء" برنامج تشغيل المهام:
/**
* 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 الجديد.
لتحديد تأثير TRECS و Performance Fader، أجرت Taboola اختبارًا A/B لقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) مقارنةً بالمحرّك الحالي بدون عرض نص برمجي ضمن لجنة من الشركاء الناشرين.
يعرض الجدول التالي نتائج مقياس INP بالمللي ثانية بالنسبة إلى الشريحة المئوية الخامسة والسبعين لأربعة ناشرين مجهولين في شبكة Taboola.
من الجيّد أنّ مقاييس النشاط التجاري، مثل "نسبة النقر إلى الظهور على الإعلان" و"الأرباح لكل 1,000 ظهور"، لم تتأثر سلبًا عندما كانت ميزتا TRECS و"أداة اختفاء الأداء" مفعّلة على لوحة الاختبار. في ظل هذا التحسين الإيجابي على مقياس INP بدون تحقيق أي نتائج سلبية على النحو المتوقّع في مؤشرات الأداء الرئيسية في "إعلانات Google"، ستعمل Taboola تدريجيًا على تحسين معدّل والتصور حول منتجها.
عند استخدام أداة Lighthouse الأخرى التي تم تشغيلها على العميل نفسه، تم توضيح تحسُّن كبير في وقت حظر سلسلة التعليمات الرئيسية من خلال Taboola عند استخدام المحرّك الجديد.
RELEASE.js، في تقليل الوقت الذي يغطّيه الجدول الزمني بمقدار 485 ملّي ثانية (-70%).
يوضّح هذا أنّ استخدام LoAF لتحديد أسباب INP واستخدام أساليب المحقِّق للأرباح اللاحقة باستخدام أداة "اختفاء الأداء" يساعد شركاء Taboola على تحقيق أقصى قدر من النجاح في أداء الإعلانات والصفحات.
الخاتمة
إنّ تحسين INP عملية معقّدة، لا سيّما عند استخدام نصوص برمجية تابعة لجهات خارجية على المواقع الإلكترونية للشركاء. قبل بدء عملية التحسين، يساعد إسناد مقياس INP إلى نصوص برمجية محدّدة إلى إزالة أي تخمينات وضرر محتمل يمكن أن يلحق بمقاييس أداء المواقع الإلكترونية الأخرى.أثبتت واجهة برمجة التطبيقات LoAF API أنّها أداة قيّمة لتحديد مشاكل INP ومعالجتها، لا سيما مشاكل الأطراف الثالثة المضمّنة، وذلك من خلال السماح لهم بتحديد فرص تحسين حِزم تطوير البرامج (SDK) الخاصة بهم مع إزالة التداخل من التكنولوجيات الأخرى على الصفحة.
وعند استخدامه جنبًا إلى جنب مع استراتيجية جيدة لتحقيق النتائج، مثل استخدام scheduler.postTask()، يمكن أن يساعدك LoAF في ملاحظة وفهم سبب ضعف استجابة الصفحة، ما يمنحك المعلومات التي تحتاجها لتحسين INP لموقعك الإلكتروني.
نشكر كلّ من "جيلبرتو كوتشي" و"نوام روزنثال" و"ريك فيسكومي" من Google و"ديدي هاكاك" و"أنات داغان" و"عمري أرياف" من فريق الهندسة والمنتجات في "تابولا" على مساهماتهم في هذا العمل.