تحسين أداء مواقع eBay الإلكترونية وتطبيقاتها لتوفير تجربة أسرع للمستخدمين
كانت السرعة مبادرة على مستوى الشركة في eBay في عام 2019، حيث حرصت العديد من الفِرق على جعل الموقع الإلكتروني والتطبيقات سريعَين قدر الإمكان للمستخدمين. في الواقع، شهد eBay زيادة بنسبة 0.5% في عدد عمليات "الإضافة إلى سلة التسوّق" مقابل كل تحسُّن خلال 100 ملي ثانية في مدّة تحميل صفحة البحث.
100ملي ثانية
تحسين وقت التحميل
0.5%
زيادة في عدد عمليات "الإضافة إلى سلة التسوّق"
من خلال اعتماد الميزانيات المستندة إلى الأداء (المستمدة بعد إجراء دراسة تنافسية باستخدام تقرير تجربة المستخدم في Chrome) والتركيز على مقاييس الأداء الرئيسية التي تركّز على المستخدم، تمكّنت eBay من إجراء تحسينات كبيرة على سرعة الموقع الإلكتروني.
وتُبرز بيانات "تقرير تجربة المستخدم في Chrome" هذه التحسينات أيضًا.
لا يزال هناك المزيد من العمل، ولكن إليك ما تعلمته eBay حتى الآن.
"انخفاضات" في أداء الويب
تمكّنت eBay من إجراء التحسينات هذه من خلال تقليل أو "قطع" (في الحجم والوقت) للعناصر المختلفة التي تشارك في رحلة المستخدِم. تتناول هذه المشاركة مواضيع ذات صلة بمنتدى مطوّري الويب بشكل عام، بدلاً من المواضيع المتعلّقة بمنصة eBay.
تقليل الحمولة على جميع موارد النصوص
إنّ إحدى الطرق لجعل المواقع الإلكترونية سريعة هي تحميل عدد أقل من الرموز البرمجية. خفضت eBay أحجام الحمولات النصية من خلال اقتطاع كل البايت غير المستخدَمة وغير الضرورية من JavaScript وCSS وHTML واستجابات JSON التي يتم عرضها للمستخدمين. في السابق، مع كل ميزة جديدة، واصلت eBay زيادة حمولة ردودها، بدون إزالة ما لم يتم استخدامه. وقد تراكمت هذه المشاكل بمرور الوقت و أصبحت تحدّ من الأداء. كان الفريق عادةً يسوفّر في تنفيذ نشاط التنظيف هذا، ولكن ستتفاجأ بحجم المساحة التي تم توفيرها في eBay.
"القطع" هنا هو البايتات المهدرة في الحمولة المرسَلة للردّ.
تحسين مسار الطلبات المهمّ للمحتوى الظاهر في أعلى الصفحة
لا يكون كل بكسل على الشاشة مهمًا بالدرجة نفسها. إنّ المحتوى فوق الشاشة أكثر أهمية من المحتوى الظاهر أسفل الشاشة. ويدرك مستخدمو تطبيقات iOS/Android/أجهزة الكمبيوتر المكتبي والويب هذا الأمر، ولكن ماذا عن الخدمات؟ تحتوي بنية الخدمات في eBay على طبقة تُسمى خدمات التجربة، التي تتواصل معها الواجهات الأمامية (التطبيقات والخوادم على الويب الخاصة بالمنصة). تم تصميم هذه الطبقة خصيصًا لتكون مستندة إلى العرض أو الجهاز، بدلاً من أن تكون مستندة إلى عنصر مثل السلعة أو العميل أو الطلب. بعد ذلك، طرحت eBay مفهوم المسار الحرج لخدمات التجربة. عندما يصل طلب إلى هذه الخدمات، تعمل على الحصول على بيانات المحتوى المعروض في أعلى الصفحة على الفور، من خلال طلب خدمات أخرى في الوقت نفسه. بعد أن تصبح البيانات جاهزة، تتم إزالتها على الفور. يتم إرسال البيانات التي تظهر أسفل الصفحة في قطعة لاحقة أو يتم تحميلها بشكل بطيء. النتيجة: يمكن للمستخدمين الاطّلاع على المحتوى المعروض في أعلى الصفحة بشكل أسرع.
"الوقت المستغرق" هنا هو الوقت الذي تستغرقه الخدمات لعرض المحتوى الملائم.
تحسينات الصور
تشكّل الصور أحد أكبر العوامل التي تؤدي إلى زيادة حجم الصفحة. حتى التحسينات الصغيرة تُحدث فرقًا كبيرًا. أجرت eBay عملية تحسينَين للصور.
أولاً، اعتمدت eBay تنسيق WebP للصور لنتائج البحث على جميع المنصات، بما في ذلك iOS وAndroid والمتصفّحات المتوافقة. صفحة نتائج البحث هي الصفحة التي تتضمّن أكبر عدد من الصور على eBay، وكانت الشركة تستخدم تنسيق WebP، ولكن ليس بأسلوب متّسق.
ثانيًا، على الرغم من أنّه تم تحسين صور بطاقات بيانات eBay بشكل كبير (من حيث الحجم والتنسيق)، لم يتم تطبيق الدقة نفسها على الصور المنظَّمة (على سبيل المثال، الوحدة العلوية في الصفحة الرئيسية). تتضمّن eBay الكثير من الصور المنظَّمة يدويًا والتي يتم تحميلها من خلال أدوات مختلفة. في السابق، كان على القائم بالتحميل إجراء التحسينات، ولكن الآن تفرض eBay القواعد ضمن الأدوات، وبالتالي سيتم تحسين جميع الصور المحمَّلة بشكل مناسب.
"القطع" هنا هو عدد وحدات البايت غير المُستخدَمة من الصورة التي يتم إرسالها إلى المستخدمين.
الترجيع التوقّعي لملفات مواد العرض الثابتة
لا تقتصر جلسة المستخدِم على صفحة واحدة فقط على eBay. إنه مسار. على سبيل المثال، يمكن أن يكون المسار عبارة عن تنقّل من الصفحة الرئيسية إلى صفحة بحث إلى صفحة سلعة. لماذا لا تساعد الصفحات في مسار الإحالة الناجحة بعضها البعض؟ هذه هي فكرة الجلب المُسبَق التوقّعي، حيث تجلب صفحة واحدة مسبقًا مواد العرض الثابتة المطلوبة للصفحة التالية المحتمَلة.
باستخدام ميزة "التحميل المُسبَق التوقّعي"، عندما ينتقل المستخدِم إلى الصفحة المتوقّعة، تكون مواد العرض متوفّرة في ذاكرة التخزين المؤقت للمتصفّح. ويتم ذلك لملفات CSS وJavaScript، حيث يمكن استرداد عناوين URL مسبقًا. تجدر الإشارة إلى أنّ هذه الميزة لا تساعد إلا في عمليات التنقّل لأول مرة. وفي عمليات التنقّل اللاحقة، ستكون مواد العرض الثابتة متوفّرة في ذاكرة التخزين المؤقت.
"القطع" هنا هو وقت الاتصال بالشبكة لمواد العرض الثابتة لتنسيقَي CSS وJavaScript في عملية التنقّل الأولى.
جلب أهم نتائج البحث مسبقًا
عندما يبحث أحد المستخدِمين على eBay، تشير بيانات إحصاءات eBay إلى أنّه من المرجّح جدًا أن ينتقل المستخدِم إلى سلعة ضمن أهم 10 سلع في نتائج البحث. لذلك، تُحمِّل eBay الآن العناصر من البحث مسبقًا وتبقيها جاهزة عندما ينتقل المستخدم. تحدث عملية التحميل المُسبَق على مستويَين.
يتم تنفيذ المستوى الأول من جانب الخادم، حيث تخزِّن خدمة السلع أهم 10 سلع في نتائج البحث. عندما ينتقل المستخدم إلى أحد هذه العناصر، توفّر eBay الآن وقت معالجة الخادم. يتم الاستفادة من ميزة التخزين المؤقت من جهة الخادم في التطبيقات المخصّصة للمنصة ويتم طرحها على مستوى العالم.
يتم تطبيق المستوى الآخر في ذاكرة التخزين المؤقت للمتصفّح، وهي متوفّرة في أستراليا. كان الجلب المُسبَق للعناصر تحسينًا متقدّمًا بسبب الطبيعة الديناميكية للعناصر. هناك أيضًا العديد من الاختلافات الدقيقة: مرّات ظهور الصفحة، والسعة، وعناصر المزاد، وما إلى ذلك. يمكنك الاطّلاع على مزيد من المعلومات حول ذلك في عرض LinkedIn's Performance Engineering Meetup، أو يمكنك متابعة مدونة eBay للحصول على مزيد من المعلومات التفصيلية حول هذا الموضوع.
يمكن أن يكون "القطع" هنا هو وقت معالجة الخادم أو وقت الشبكة، حسب مكان تخزين العنصر مؤقتًا.
تنزيل الصور من نتائج البحث بسرعة
في صفحة نتائج البحث، عند إصدار طلب بحث على مستوى عالٍ، يحدث أمران. وتشمل الخطوة الأولى عملية استرجاع المعلومات أو ترتيبها، حيث يتم عرض العناصر الأكثر صلة بالموضوع والتي تتطابق مع طلب البحث. الخطوة الثانية هي إضافة معلومات إضافية ذات صلة بسياق المستخدِم إلى العناصر التي تمّت تذكرها، مثل تكاليف الشحن. تُرسِل eBay الآن الصور العشرة الأولى للعناصر إلى المتصفّح على الفور في مجموعة مع العنوان، حتى يمكن بدء عمليات التنزيل قبل وصول بقية الترميز. نتيجةً لذلك، ستظهر الصور الآن بشكل أسرع. يتم طرح هذا التغيير على مستوى العالم لمنصّة الويب.
"القطع" هنا هو وقت بدء تنزيل صور نتائج البحث.
التخزين المؤقت في الأجهزة الطرفية لبيانات الاقتراحات التلقائية
عندما يكتب المستخدمون أحرفًا في مربّع البحث، تظهر اقتراحات منبثقة. لا تتغيّر هذه الاقتراحات لمجموعات الأحرف لمدة يوم واحد على الأقل. وهي مرشحة مثالية لتخزينها مؤقتًا وعرضها من CDN (لمدة 24 ساعة كحد أقصى)، بدلاً من إرسال الطلبات إلى مركز بيانات. تستفيد الأسواق الدولية بشكل خاص من ميزة التخزين المؤقت في شبكة توصيل المحتوى (CDN).
ومع ذلك، كان هناك عائق. كان لدى eBay بعض عناصر التخصيص في النافذة المنبثقة للاقتراحات، التي لا يمكن تخزينها مؤقتًا بكفاءة. لحسن الحظ، لم تكن هذه مشكلة في التطبيقات المخصّصة للمنصة، لأنّه يمكن فصل واجهة المستخدِم للتخصيص عن واجهة الاقتراحات. بالنسبة إلى الويب، في الأسواق الدولية، كان وقت الاستجابة أكثر أهمية من الفائدة الصغيرة للتخصيص. بعد حلّ هذه المشكلة، أصبح لدى eBay الآن اقتراحات تلقائية يتم عرضها من ذاكرة التخزين المؤقت لشبكة توصيل المحتوى (CDN) على مستوى العالم للتطبيقات المخصّصة للمنصات والأسواق خارج الولايات المتحدة على eBay.com.
و "الوقت المستغرَق" هنا هو وقت استجابة الشبكة ووقت معالجة الخادم لاقتراحات البحث المبرمَجة.
ذاكرة التخزين المؤقت في Edge للمستخدمين غير المعروفين على الصفحة الرئيسية
بالنسبة إلى منصة الويب، يكون محتوى الصفحة الرئيسية للمستخدمين غير المعروفين هو نفسه في منطقة معيّنة. هؤلاء المستخدمون يستخدمون eBay للمرة الأولى أو يبدأون جلسة جديدة، وبالتالي لا يتمّ تخصيص الإعلانات لهم. على الرغم من أنّ تصميمات الإعلانات على الصفحة الرئيسية تتغيّر بشكل متكرّر، لا يزال هناك مجال لتخزين المحتوى المؤقت.
قرّرت eBay الاحتفاظ بمحتوى المستخدم غير المعروف (HTML) مؤقتًا في ذاكرة التخزين المؤقت على شبكة الحواف (PoPs) لفترة قصيرة. يمكن للمستخدمين لأول مرة الآن الحصول على محتوى الصفحة الرئيسية من خادم قريب منهم، بدلاً من مركز بيانات بعيد. لا تزال eBay تختبر هذه الميزة في الأسواق الدولية، حيث سيكون لها تأثير أكبر.
و "الوقت المستغرَق" هنا هو وقت استجابة الشبكة ووقت معالجة الخادم للمستخدمين غير المعروفين.
التحسينات لمنصات أخرى
تحسينات على تحليل تطبيقات iOS/Android
تتواصل تطبيقات iOS/Android مع خدمات الخلفية التي يكون تنسيق استجابتها عادةً JSON. يمكن أن تكون حِزم JSON هذه كبيرة. بدلاً من تحليل ملف JSON بالكامل لعرض محتوى معيّن على الشاشة، طرحت eBay خوارزمية تحليل فعّالة تعمل على تحسين المحتوى الذي يجب عرضه على الفور.
يمكن للمستخدمين الآن الاطّلاع على المحتوى بشكل أسرع. بالإضافة إلى ذلك، يبدأ eBay في تطبيق Android في إعداد أدوات التحكّم في عرض البحث فور بدء المستخدم في الكتابة في مربّع البحث (كان هذا التحسين متوفّرًا في نظام التشغيل iOS). في السابق، لم يكن ذلك يحدث إلا بعد أن يضغط المستخدمون على زر البحث. يمكن للمستخدمين الآن الوصول إلى نتائج البحث بشكل أسرع. "الوقت المستغرق" هنا هو الوقت الذي تستغرقه الأجهزة لعرض المحتوى ذي الصلة.
تحسينات على وقت بدء تشغيل تطبيقات Android
ينطبق ذلك على تحسينات وقت التشغيل على البارد لتطبيقات Android. عند تشغيل تطبيق على البارد، يتم تنفيذ الكثير من عمليات الإعداد على مستوى نظام التشغيل وعلى مستوى التطبيق. يساعد تقليل وقت الإعداد على مستوى التطبيق المستخدمين في رؤية الشاشة الرئيسية بشكل أسرع. أجرت eBay بعض عمليات وضع التقارير ولاحظت أنّ بعض عمليات الإعداد غير مطلوبة لعرض المحتوى وأنّ بعضها يمكن إجراؤه بشكل بطيء.
الأهم من ذلك، لاحظت eBay أنّ هناك طلب إحصاءات تابعًا لجهة خارجية يؤدي إلى حظر المحتوى ويؤخّر عرضه على الشاشة. ساهمت إزالة طلب الحظر وجعله غير متزامن في تحسين أوقات بدء التشغيل البارد. ويشير "الوقت المستغرق" هنا إلى وقت بدء تشغيل تطبيقات Android غير الضروري.
الاستنتاجات
ساهمت جميع "التخفيضات" التي أجرتها eBay في الأداء بشكلٍ جماعي في تحقيق هذا الإنجاز، وقد حدث ذلك على مدار فترة زمنية. تم طرح الإصدارات على مراحل على مدار العام، حيث خفّض كل إصدار عشرات المللي ثانية، ووصل في النهاية إلى النقطة التي وصل إليها eBay الآن:
الأداء هو ميزة وميزة تنافسية. تؤدي التجارب المحسّنة إلى زيادة تفاعل المستخدمين والإحالات الناجحة وعائد الاستثمار. في ما يتعلّق بموقع eBay، تراوحت هذه التحسينات بين الإجراءات البسيطة وبعض الإجراءات المتقدّمة.
اطّلِع على تحسين السرعة من خلال إجراء آلاف التحسينات للتعرّف على مزيد من المعلومات، وانتبِه إلى المقالات الأكثر تفصيلاً التي ينشرها مهندسو eBay حول عملهم على تحسين الأداء في المستقبل القريب.