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

توضّح دراسة الحالة هذه سير العمل المفصّل بشأن تصحيح الأخطاء وتحسين مدى استجابة الصفحة لتفاعلات المستخدم (INP) في ميزة "التفاعل" المستخدَمة في Trendyol من خلال الاستفادة من أدوات Google، مثل PageSpeed Insights (PSI) وأدوات مطوّري البرامج في Chrome وscheduler.yield واجهة برمجة التطبيقات.

مصطفى بيرينسي

جيلبرتو كوتشي

تييرنو ثيام

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

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

لتحقيق هدفها المتمثل في توفير أفضل تجربة ممكنة للمستخدم على نطاق واسع مع الحفاظ على مرونة المحتوى والعمل باستخدام إصدار قديم من React، ركّزت شركة 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) وحلّها وتحديد مصدر المشكلة. تم رصد مهمة تتراوح مدتها بين 700 و900 مللي ثانية في سلسلة التعليمات الرئيسية، وذلك من خلال محاكاة أداء وحدة المعالجة المركزية (CPU) في "أدوات مطوّري البرامج في Chrome" بمقدار 4 مرات. إذا كانت سلسلة التعليمات الرئيسية مشغولة بمهام أخرى أطول من 50 مللي ثانية، قد لا تتمكن تلك السلسلة من الاستجابة في الوقت المناسب، ما ينتج عنه تجربة سيئة للمستخدم.

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

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

إحدى الطرق التي استخدمها المطوّرون لتقسيم المهام إلى مهام أصغر تشمل 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 لتنفيذ بنية واجهة مصغرة باستخدام الإصدار 16.9.0 من React. باستخدام React 18، يمكن تحقيق الأداء نفسه، ولكن يتعذّر على Trendyol إجراء الترقية في الوقت الحالي لعدّة أسباب.

نتائج النشاط التجاري

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

الخلاصة

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

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

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