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