كيفية مساهمة التركيز على أداء الويب في تحسين نسبة النقر إلى الظهور في Tokopedia بمقدار 35%

إنشاء لوحة معلومات لأداء الويب وتحسين JavaScript والموارد والصفحة الرئيسية لتحقيق نجاح النشاط التجاري

Tokopedia هي واحدة من أكبر شركات التجارة الإلكترونية في إندونيسيا. ومع وجود أكثر من 2.7 مليون شبكة تجار على المستوى الوطني وأكثر من 18 مليون قائمة منتجات وأكثر من 50 مليون زائر شهريًا، أدرك فريق الويب أنّ الاستثمار في أداء الويب أمر ضروري. ومن خلال بناء ثقافة تركّز على الأداء أولاً، حقّقَت الشركة زيادة قدرها 35% في نِسَب النقر إلى الظهور وزيادة بنسبة 8% في الإحالات الناجحة.

35%

زيادة في نسبة النقر إلى الظهور

8%

زيادة في معدّل الإحالات الناجحة

4 ثوانٍ

تحسُّن في مؤشر TTI

تسليط الضوء على الفرصة

تحدث فريق الويب مع فريق القيادة حول أهمية الاستثمار في أداء الويب لتحسين تجربة المستخدم وتفاعلهم، كما عرض أيضًا تأثير الأداء باستخدام الأنماط المتقدمة وواجهات برمجة التطبيقات.

النهج الذي استخدموه

JavaScript وتحسين الموارد

يُعدّ حظر العرض أو JavaScript طويلة المدى من الأسباب الشائعة لمشاكل الأداء. اتخذ الفريق عدة خطوات لتقليل ذلك:

  • تم إنشاء مكتبة وحدة تحكّم في النصوص البرمجية من أجل تحميل النصوص البرمجية التابعة لجهات خارجية بشكل انتقائي لتحسينها من أجل مسار العرض الحرج.
  • استبدلت المكتبات الأثقال بمكتبات أخفّ وزنًا.
  • تم تنفيذ ميزة تقسيم الرموز وإجراء تحسينات تناسب المحتوى في الجزء المرئي من الصفحة.
  • تم تنفيذ التحميل التكيُّفي، مثل تحميل صور عالية الجودة فقط للأجهزة على الشبكات السريعة واستخدام صور منخفضة الجودة للأجهزة على الشبكات البطيئة
  • صور التحميل الكسول في الجزء السفلي غير المرئي من الصفحة.
  • تأجيل تحميل محتوى JavaScript غير المهم
حسّنت مكتبة وحدة التحكّم في النص البرمجي مؤشر TTI بمقدار 4 ثوانٍ

تحسين الصفحة الرئيسية

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

تم تقليل حجم JavaScript للتطبيق بنسبة %88 (من 320 كيلوبايت إلى 37 كيلوبايت). تم تعزيز النتيجة في Lighthouse بمقدار 90 نقطة. تم تحقيق "سرعة عرض المحتوى على الصفحة" لأقل من ثانية واحدة. زيادة بنسبة 35% في نسبة النقر إلى الظهور. زيادة معدل الإحالات الناجحة بنسبة 8%.

وضع ميزانية للأداء ومراقبته

أنشأ الفريق لوحة بيانات لتتبُّع الأداء باستخدام Lighthouse وغيرها من الأدوات لتحسين جودة صفحات الويب، ومنها:

  • يقيس هذا المقياس جودة الشبكة ومراقبة البنية الأساسية وأداء الواجهة الأمامية وأداء الخادم.
  • يتم استخدام مجموعة من واجهات برمجة التطبيقات للنظام الأساسي للويب (مثل واجهة برمجة التطبيقات Resource Timing API وعنوان Server-Timing) و واجهة برمجة التطبيقات لإحصاءات PageSpeed (PSI) وبيانات تقرير تجربة المستخدم في Chrome لرصد مقاييس الحقول والميزات الاختبارية.
  • تحلِّل الصور من Lighthouse للمساعدة في تحديد فرص تحسين الصور.
  • فرض ميزانية بحجم الحزمة أثناء الدمج المستمر (CI). يتعذّر تنفيذ CI إذا تجاوز حجم الحزمة الميزانية.
نتيجة اختبار TTI لمدة 2.2 ثانية على الصفحة الرئيسية (نتيجة Lighthouse: 88). نتيجة اختبار TTI لمدة 1.9 ثانية على صفحات المنتجات (نتيجة Lighthouse: 86)

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

دندي سوناردي، مدير الهندسة في منصة الويب على Tokopedia

اطّلِع على صفحة دراسات الحالة "توسيع نطاق الويب" للاطّلاع على المزيد من قصص النجاح من الهند وجنوب شرق آسيا.