توضّح دراسة الحالة هذه سير العمل المفصّل بشأن تصحيح الأخطاء وتحسين مدى استجابة الصفحة لتفاعلات المستخدم (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) من Trendyol وفقًا لقراءة CrUX في PageSpeed Insights. اعتبارًا من 5 أيلول (سبتمبر) 2023، كان مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) الخاص بـ Trendyol يبلغ 963 مللي ثانية، وهو ما يقع في النطاق "الضعيف".](https://web.developers.google.cn/static/case-studies/trendyol-inp/image/fig-1.png?authuser=5&hl=ar)
لضمان سرعة الاستجابة، يجب أن يسعى مالكو المواقع الإلكترونية إلى قياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) أقل أو أقل من 200 ملّي ثانية، ما يعني أنّ مقياس INP في Trendyol كان في النطاق "ضعيف" في ذلك الوقت.
لحسن الحظ، توفّر PSI بيانات المجال الخاصة بالصفحات المضمَّنة في تقرير تجربة المستخدم على Chrome (CrUX) وبيانات التشخيص التفصيلية للمختبر. بعد الاطّلاع على البيانات المعملية، تبيّن من خلال التدقيق في وقت تنفيذ JavaScript في Lighthouse أنّ نص search-result-v2
البرمجي كان يشغل سلسلة التعليمات الرئيسية لفترة أطول من النصوص البرمجية الأخرى على الصفحة.
![قراءة لمصادر المهام الطويلة في Lighthouse لموقع Trendyol أحد المصادر الرئيسية للمهام الطويلة هو النص البرمجي الذي يعالج نتائج البحث على PLP في Trendyol.](https://web.developers.google.cn/static/case-studies/trendyol-inp/image/fig-2.png?authuser=5&hl=ar)
لتحديد المؤثِّرات السلبية في الواقع، استخدمنا لوحة الأداء في "أدوات مطوري البرامج في Chrome" لتحديد مشاكل تجربة "دليل صفحة المنتج" (PLP) وحلّها وتحديد مصدر المشكلة. تم رصد مهمة تتراوح مدتها بين 700 و900 مللي ثانية في سلسلة التعليمات الرئيسية، وذلك من خلال محاكاة أداء وحدة المعالجة المركزية (CPU) في "أدوات مطوّري البرامج في Chrome" بمقدار 4 مرات. إذا كانت سلسلة التعليمات الرئيسية مشغولة بمهام أخرى أطول من 50 مللي ثانية، قد لا تتمكن تلك السلسلة من الاستجابة في الوقت المناسب، ما ينتج عنه تجربة سيئة للمستخدم.
![لقطة شاشة لجلسة تحليل بيانات الأداء في "أدوات مطوري البرامج في Chrome" لدليل PLP في Trendyol يتم تشغيل المهمة الطويلة الموضحة لمدة 737.6 مللي ثانية، وهي جزء من معاودة الاتصال في أداة مراقبة التقاطع.](https://web.developers.google.cn/static/case-studies/trendyol-inp/image/fig-3.png?authuser=5&hl=ar)
تسبّب استدعاء 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، حيث تم تقسيم المهمة الطويلة الرئيسية إلى سلسلة من المهام الأصغر، ما يسمح بإنجاز العمل ذي الأولوية العالية، مثل تفاعلات المستخدم وعمليات العرض اللاحقة، في وقت أقرب مما كان سيحدث في حالات أخرى.
![لقطة شاشة لجلسة تحليل بيانات الأداء في "أدوات مطوري البرامج في Chrome" لدليل PLP في Trendyol تم تقسيم المهمة الطويلة التي كانت تعمل في السابق لمدة 737.6 مللي ثانية إلى عدة مهام أصغر.](https://web.developers.google.cn/static/case-studies/trendyol-inp/image/fig-4.png?authuser=5&hl=ar)
تجدر الإشارة إلى أنّ Trendyol تستخدم إطار عمل PuzzleJs لتنفيذ بنية واجهة مصغرة باستخدام الإصدار 16.9.0 من React. باستخدام React 18، يمكن تحقيق الأداء نفسه، ولكن يتعذّر على Trendyol إجراء الترقية في الوقت الحالي لعدّة أسباب.
نتائج النشاط التجاري
لقياس تأثير تحسين INP الذي تم تنفيذه، أجرينا اختبار أ/ب لمعرفة مدى تأثّر مقاييس الأعمال. بشكل عام، أدت التغييرات التي أجريناها على PLP إلى تحسُّن كبير، بما في ذلك خفض بنسبة 50% في مقياس INP وارتفاعًا بنسبة 1% في نِسب النقر إلى الظهور من صفحة البيانات إلى صفحة تفاصيل المنتج لكل جلسة مستخدم. في الشكل التالي، يمكنك رؤية مدى تحسُّن INP على PLP بمرور الوقت:
![لقطة شاشة تُظهر مدى استجابة الصفحة لتفاعلات المستخدم (INP) ضمن الشريحة المئوية الخامسة والسبعين في شركة Trendyol على مدار ستة أشهر وبنهاية الأشهر الستة، انخفض مقياس INP في Trendyol إلى حوالى 650 مللي ثانية من 1400 مللي ثانية تقريبًا.](https://web.developers.google.cn/static/case-studies/trendyol-inp/image/fig-5.png?authuser=5&hl=ar)
الخلاصة
إنّ تحسين مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) هو عملية معقّدة وتكرارية، ولكن يمكن تسهيلها من خلال سير عمل واضح. تعتمد طريقة بسيطة لتصحيح الأخطاء وتحسين INP لموقعك الإلكتروني على ما إذا كنت تجمع البيانات الميدانية الخاصة بك أم لا. وإذا لم تكن كذلك، تُعد PSI وLighthouse نقطة انطلاق جيدة. بمجرد تحديد الصفحات التي بها مشاكل، يمكنك استخدام "أدوات مطوري البرامج" للبحث بشكل أعمق لإعادة إنتاج المشكلات.
إنّ إعطاء لمحة عن سلسلة التعليمات الرئيسية من حين لآخر لمنح المتصفّح المزيد من الفرص
للقيام بالعمل العاجل سيجعل موقعك الإلكتروني أكثر استجابة، ما يضمن
حصول عملائك على تجربة مستخدم أفضل. تسهّل واجهات برمجة التطبيقات الجديدة للجدولة
مثل scheduler.yield()
هذه المهمة.
شكر خاص لكل من "جيريمي واغنر" و"باري بولارد" و"حسين دجيره" من Google والفريق الهندسي في Trendyol على مساهماتهم في هذا العمل.