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