كيف خفّضت Trendyol مقياس INP بنسبة 50%، ما أدى إلى زيادة بنسبة 1% في نسبة النقر إلى الظهور

تصف دراسة الحالة هذه سير العمل خطوة بخطوة لتصحيح الأخطاء وتحسين INP. في React تم استخدامه بواسطة Trendyol من خلال الاستفادة من أدوات Google مثل PageSpeed الإحصاءات (PSI) وأدوات مطوري البرامج في Chrome وscheduler.yield واجهة برمجة التطبيقات.

Mustafa Birinci

Gilberto Cocchi

Thierno Thiam

هناك مكونان أساسيان لأي موقع ويب للتجارة الإلكترونية هما صفحة قائمة المنتجات (PLP) وصفحة تفاصيل المنتج (PDP). غالبًا ما تأتي زيارات التجارة الإلكترونية من صفحات قائمة المنتجات، سواء من خلال حملات البريد الإلكتروني أو وسائل التواصل الاجتماعي أو الإعلانات. نتيجة لذلك، من المهم التأكد من أن تجربة PLP بعناية لتقليل الوقت الذي يستغرقه إجراء عملية الشراء. تحديد الأولويات تعد جودة تجربة المستخدم ضرورية لتحقيق النجاح. منشورات بحثية مثل حملة Milliseconds Make Millions، التي سبق أن كشفت عن أهمية تأثير أداء الويب على المستهلكين رغبتهم في إنفاق الأموال والتفاعل للعلامات التجارية عبر الإنترنت.

Trendyol هي منصة للتجارة الإلكترونية تضم حوالي 30 مليون عميل 240,000 بائع، ما دفعنا لنصبح أول نشاط تجاري في تركيا تجاوزت قيمتها 10 مليار دولار أمريكي، وكانت إحدى أهم منصات التجارة الإلكترونية في العالم.

تحقيق هدفها المتمثل في توفير أفضل تجربة مستخدم ممكنة على نطاق واسع مع الحفاظ على مرونة المحتوى والعمل باستخدام إصدار قديم من تفاعل مع Trendyol من خلال التركيز على مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) كمقياس رئيسي التحسين. تصف دراسة الحالة هذه رحلة Trendyol لتحسين INP من خلال PLP، ما أدّى إلى انخفاض بنسبة 50% في مقياس INP وزيادة بنسبة 1% في البحث. المقياس التجاري لنتائج البحث

عملية التحقيق بشأن مدى استجابة الصفحة لتفاعلات المستخدم (INP) من Trendyol

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

بدأت Trendyol لتحسين INP على PLP بتحليل شامل تجربة المستخدم قبل أي تحسينات يتم إجراؤها. بناءً على تقرير PSI، كان لدى تجربة المستخدم الحقيقية لكل من PLP INP يبلغ 963 ملّي ثانية للأجهزة الجوّالة، كما هو موضّح في الشكل التالي.

لضمان سرعة الاستجابة، يجب أن يستهدف مالكو المواقع الإلكترونية مقياس INP أدناه أو 200 ملّي ثانية، ما يعني أنّ مقياس INP لدى Trendyol كان في "سيئة" النطاق.

لحسن الحظ، توفر PSI كل من بيانات الحقل للصفحات المضمنة في دليل مستخدم Chrome تقرير التجربة (CrUX) وبيانات تشخيصية مفصَّلة في المختبر. النظر إلى المعمل تدقيق وقت تنفيذ JavaScript من Lighthouse أن كان نص برمجي search-result-v2 مشغولاً سلسلة التعليمات الرئيسية لوقت أكثر من غيره والنصوص البرمجية على الصفحة.

لتحديد المؤثِّرات السلبية على أرض الواقع، استخدمنا لوحة الأداء في Chrome أدوات مطوّري البرامج لتحديد مشاكل تجربة PLP وحلّها وتحديد مصدر المشكلة. محاكاة أداء الأجهزة الجوّالة مع بطء وحدة المعالجة المركزية (CPU) بمقدار 4 مرات في "أدوات مطوري البرامج في Chrome" عن مهمة تتراوح مدتها بين 700 و900 مللي ثانية في سلسلة التعليمات الرئيسية. إذا تم تحديد مشغولة هذه السلسلة في مهام أخرى تزيد مدّتها عن 50 ملّي ثانية، فيجوز أن غير قادرة على الاستجابة لطلبات المستخدم في الوقت المناسب، مما يؤدي إلى تجربة المستخدم.

أطول مهمة كانت نتيجة استدعاء Intersection Observer API على النص البرمجي لنتائج البحث داخل مكوِّن React. في هذه المرحلة، بدأنا تقسيم هذه المهمة الطويلة إلى أجزاء صغيرة لمنح المتصفّح الفرص للاستجابة للعمل ذي الأولوية الأعلى - بما في ذلك تفاعلات المستخدم.

اتضح أن استخدام عملية setState التي تؤدي إلى تشغيل React فإن العرض داخل استدعاء "مراقب التقاطع" يأتي بتكلفة عالية، الأمر الذي قد يمثل مشكلة للأجهزة ذات الجودة المنخفضة من خلال شغل سلسلة التعليمات الرئيسية طويل جدًا.

إحدى الطرق التي استخدمها مطوّرو البرامج لتقسيم المهام إلى مهام أصغر يشمل setTimeout. استخدمنا هذه التقنية لتأجيل تنفيذ مكالمة واحدة (setState) في مهمة منفصلة. رغم أن setTimeout يتيح تأجيل تنفيذ JavaScript، لا يوفّر أي تحكّم في الأولوية. قاد الانضمام إلى مرحلة التجربة والتقييم في scheduler.yield في محاولة لضمان هي مواصلة تنفيذ النص البرمجي بعد الاستسلام لسلسلة المحادثات الرئيسية:

/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
  if('scheduler' in window && 'yield' in scheduler) {
    return await scheduler.yield();
  }

  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
  entries.forEach(handleIntersection);
  const maxNumberOfEntries = Math.max(...this.intersectingEntries);

  if (Number.isFinite(maxNumberOfEntries)) {
    await this.yieldToMain();

    this.setState({ count: maxNumberOfEntries });
  }
}, { threshold: 0.5 });

من خلال إضافة هذه الطريقة إلى رمز PLP، تم تحسين INP، حيث المهمة الطويلة الرئيسية إلى سلسلة من المهام الأصغر، مما يسمح مع أولوية أعلى للعمل، مثل تفاعلات المستخدم وأعمال العرض اللاحقة تحدث في وقت أقرب مما لو كانت ستحدث.

تجدر الإشارة إلى أنّ Trendyol تستخدم إطار عمل PuzzleJs لتنفيذ واجهة أمامية مصغَّرة. بنية React باستخدام الإصدار 16.9.0. باستخدام React 18، يمكن تحقيق الأداء نفسه ولكن لعدد من الأسباب، لم تتمكن Trendyol من الترقية في هذا الوقت.

نتائج الأعمال

لقياس تأثير تحسين INP الذي تم تنفيذه، أجرينا اختبار أ/ب الاطلاع على كيفية تأثر مقاييس الأعمال. بشكل عام، أدت تغييراتنا على PLP إلى تحسُّنًا كبيرًا، بما في ذلك خفض "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) بنسبة% 50 بالإضافة إلى %1 زيادة في نِسب النقر إلى الظهور من صفحة البيانات إلى صفحة تفاصيل المنتج لكل جلسة مستخدم. في الشكل التالي، يمكنك معرفة مدى تحسُّن INP في PLP بمرور الوقت:

الخاتمة

إنّ تحسين مقياس INP هو عملية معقّدة وتكرارية، ولكن يمكن تسهيلها. من خلال سير عمل واضح. هناك طريقة بسيطة لتصحيح الأخطاء وتحسين يعتمد مدى استجابة الصفحة لتفاعلات المستخدم (INP) على ما إذا كنت تجمع بيانات المجال الخاصة بك. إذا كنت غير ذلك، تُعدّ PSI وLighthouse نقطة انطلاق جيدة. بمجرد تحديد الصفحات التي تحتوي على مشاكل، يمكنك استخدام "أدوات مطوري البرامج" للبحث بشكل أعمق ومحاولة إعادة إنتاج المشكلات.

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

شكر خاص لكل من "جيريمي واغنر" و"باري بولارد" و"حسين دجيرده" وتعاونت Google مع الفريق الهندسي في Trendyol على مساهماتهم في هذا العمل.