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

توضّح هذه الدراسة الحالة سير العمل المفصّل لتحديد الأخطاء وحلّها وتحسين ملف INP في React الذي تستخدمه شركة Trendyol من خلال الاستفادة من أدوات Google، مثل إحصاءات سرعة التحميل (PSI) في PageSpeed‏ وChrome DevTools وscheduler.yield API.

إنّ صفحة بيانات المنتج (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 في قائمة المنتجات في صفحة البحث من خلال إجراء تحليل شامل لمحاولة تحسين تجربة المستخدم قبل إجراء أي تحسينات. استنادًا إلى تقرير PSI، كانت قيمة INP لتجربة المستخدم الفعلية في PLP هي 963 ملي ثانية على الأجهزة الجوّالة، كما هو موضّح في الشكل التالي.

مؤشر INP لشركة Trendyol وفقًا لبيانات CrUX في "إحصاءات PageSpeed" كان مقياس INP في Trendyol اعتبارًا من 5 أيلول (سبتمبر) 2023 هو 963 ملي ثانية، ما يصنّفه ضمن الفئة "الأداء السيئ".
معلومات المنتج في Trendyol اعتبارًا من 5 أيلول (سبتمبر) 2023 من PSI

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

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

قراءة لمصادر المهام الطويلة في Lighthouse لموقع Trendyol الإلكتروني ومن بين المصادر الرئيسية للمهام الطويلة، نص برمجي يعالج نتائج البحث في صفحة المنتج في قائمة مقارنة (PLP) على Trendyol.
تقرير تدقيق وقت تنفيذ JavaScript في Trendyol من Lighthouse اعتبارًا من 5 أيلول (سبتمبر) 2023 من PSI.

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

لقطة شاشة لجلسة تحليل الأداء في "أدوات مطوّري البرامج في Chrome" لصفحة المنتج في قائمة مقارنة الأسعار في Trendyol تستغرق المهمة الطويلة المعروضة 737.6 ملي ثانية، وهي جزء من طلب استدعاء Intersection Observer.
ملف تعريف أداء المهام الطويلة في صفحة المنتج الرئيسية في Trendyol ضمن لوحة الأداء في "أدوات مطوّري البرامج في Chrome"

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

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

إحدى الطرق التي استخدمها المطوّرون لتقسيم المهام إلى مهام أصغر هي استخدام 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، لأنّه تم تقسيم المَهمّة الطويلة الرئيسية إلى سلسلة من المهام الأصغر حجمًا، ما يسمح بتنفيذ المهام ذات الأولوية الأعلى، مثل تفاعلات المستخدمين وعمليات التقديم اللاحقة، في وقت أقرب مما كان من الممكن.

لقطة شاشة لجلسة تحليل الأداء في "أدوات مطوّري البرامج في Chrome" لصفحة المنتج في قائمة مقارنة الأسعار في Trendyol تم تقسيم المهمة الطويلة التي كانت تستغرق سابقًا 737.6 ملي ثانية إلى عدة مهام أصغر حجمًا.
تم تقسيم المهمة إلى مهام أصغر.

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

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

لقياس تأثير تحسين INP الذي تم تنفيذه، أجرينا اختبار أ/ب لمحاولة معرفة مدى تأثُّر مقاييس النشاط التجاري. بشكل عام، أدّت التغييرات التي أجريناها على صفحة قائمة المنتجات إلى تحسّن كبير، بما في ذلك انخفاض معدّل النقر إلى الشراء بنسبة% 50، بالإضافة إلى زيادة بنسبة %1 في معدّلات النقر من صفحة البيانات إلى صفحة تفاصيل المنتج لكل جلسة مستخدِم. في الشكل التالي، يمكنك الاطّلاع على كيفية تحسين مقياس INP في ملف picuture load time بمرور الوقت:

لقطة شاشة لنسبة INP للشريحة المئوية الخامسة والسبعين في Trendyol على مدار ستة أشهر بحلول نهاية الأشهر الستة، انخفض مقياس INP في Trendyol إلى 650 ملي ثانية تقريبًا من 1,400 ملي ثانية تقريبًا.
التحسينات في مؤشر INP للشريحة المئوية الخامسة والسبعين بمرور الوقت

الخاتمة

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

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

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