التسوُّق للحصول على سرعة على eBay.com

يمكنك تحسين أداء مواقع eBay وتطبيقاتها للحصول على تجربة مستخدم أسرع.

Addy Osmani
Addy Osmani

كانت السرعة مبادرة على مستوى الشركة لشركة eBay في عام 2019، حيث عزمت العديد من الفِرق على جعل المواقع الإلكترونية والتطبيقات أسرع ما يمكن للمستخدمين. ففي الواقع، مقابل كل 100 مللي ثانية لتحسين وقت تحميل صفحات البحث، شهدت eBay زيادة بنسبة 0.5% في عدد "إضافة إلى سلة التسوق".

100 ملّي ثانية

تحسين وقت التحميل

زيادة بنسبة %0.5

زيادة عدد عمليات "الإضافة إلى سلة التسوّق"

من خلال استخدام ميزانيات الأداء (التي تم الحصول عليها بعد إجراء دراسة تنافسية باستخدام تقرير تجربة المستخدم في Chrome) والتركيز على مقاييس الأداء الرئيسية التي تركّز على المستخدم، تمكّنت eBay من إجراء تحسينات كبيرة على سرعة المواقع الإلكترونية.

وأدّت جهود التحسين إلى تحسُّن بنسبة 10% في الصفحة الرئيسية، وتحسّن بنسبة 13% في صفحة البحث، وتحسّن بنسبة 3% في صفحات المنتجات.
تم إدخال تحسينات على سرعة eBay:

...وبيانات تقرير تجربة المستخدم على Chrome تُبرز هذه التحسينات أيضًا.

لقطات شاشة لطريقة عرض "إحصاءات PageSpeed" لبيانات تقرير تجربة المستخدم في Chrome تُبرز سرعة عرض المحتوى على FCP بنسبة% 70 وسرعة FID بنسبة% 88 لموقع eBay.com
بيانات تقرير تجربة المستخدم في Chrome بالنسبة إلى سرعة عرض أول محتوى مرئي ومهلة الاستجابة لأوّل إدخال لموقع eBay.com الأصلي.

لا يزال هناك المزيد من الإجراءات بانتظارك، ولكن إليك ما تعلّمته من eBay حتى الآن.

"اختصارات" أداء الويب

وبفضل التحسينات التي أجرتها شركة eBay، فإنّها بسبب تقليل عدد العناصر التي تشارك في رحلة المستخدم أو تقليل عددها (من حيث الحجم والوقت) تتناول هذه المشاركة موضوعات ذات صلة بمنتدى مطوري الويب بشكل عام، بدلاً من موضوعات خاصة بـ eBay.

تقليل الحمولة في جميع الموارد النصية

تتمثل إحدى طرق تسريع المواقع في تحميل المواقع الإلكترونية من خلال تحميل رمز أقل، وذلك من خلال eBay، التي قلّلت حمولات البيانات النصية من خلال تقليص جميع وحدات البايت غير المستخدمة وغير الضرورية من استجابات JavaScript وCSS وHTML وJSON التي يتم عرضها للمستخدمين. ففي السابق، ومع كل ميزة جديدة، واصلت eBay زيادة حمولة ردودها بدون تنظيف البيانات غير المستخدَمة. زاد هذا بمرور الوقت وأصبح مؤثِّرًا سلبيًا في الأداء. كنت تتوقف عن العمل لدى الفِرق عادةً في نشاط الإزالة هذا، ولكنّك ستتفاجأ بمقدار المقدار الذي وفّرته eBay.

يمثل "القطع" هنا وحدات البايت الضائعة في حمولة الاستجابة.

تحسين المسار الحرج لمحتوى الجزء المرئي من الصفحة

ليست كل وحدات البكسل على الشاشة مهمة بنفس القدر. إنّ المحتوى في الجزء المرئي من الصفحة أكثر أهمية من الجزء في الجزء السفلي غير المرئي من الصفحة. إنّ تطبيقات iOS وAndroid/سطح المكتب وتطبيقات الويب على دراية بذلك، ولكن ماذا عن الخدمات؟ تتميّز بنية الخدمة في eBay بطبقة تسمى خدمات التجربة، التي تتحدث إليها الواجهات الأمامية (التطبيقات وخوادم الويب الخاصة بالنظام الأساسي). تمّ تصميم هذه الطبقة خصّيصًا لتكون مستندة إلى العرض أو الجهاز، بدلاً من الاعتماد على العناصر مثل العنصر أو المستخدم أو الطلب. وبعد ذلك، قدّمت eBay بعد ذلك مفهوم المسار الحرج لـ "خدمات التجربة". عندما يأتي طلب إلى هذه الخدمات، تعمل هذه الخدمات على الحصول على بيانات المحتوى في الجزء المرئي من الصفحة فورًا، من خلال استدعاء خدمات ما قبل البيانات الأخرى بالتوازي. بمجرد أن تصبح البيانات جاهزة، يتم مسحها على الفور. يتم إرسال بيانات الجزء غير المرئي من الصفحة في مقطع لاحق أو يتم تحميلها ببطء. النتيجة: يمكن للمستخدمين رؤية محتوى الجزء المرئي من الصفحة بشكل أسرع.

ويشير "التقصير" هنا إلى الوقت الذي تقضيه الخدمات في عرض المحتوى ذي الصلة.

تحسين الصور

تُعدّ الصور من أكبر المساهمين في أعداد الصفحات الكبيرة. حتى التحسينات الصغيرة لها تأثير كبير، إذ أجرت eBay تحسينين للصور.

أولاً، تم توحيد طريقة eBay على تنسيق الصور WebP لنتائج البحث على جميع الأنظمة الأساسية، بما في ذلك على أنظمة التشغيل iOS وAndroid والمتصفحات المتوافقة. صفحة نتائج البحث هي الصفحة الأكثر كثافة في الصور على eBay، وكانت تستخدم WebP مسبقًا، ولكن ليس بنمط ثابت.

لقطات شاشة للوحة شبكة DevTools التي تمّت فلترتها لعرض طلبات الصور من WebP من eBay.com
صور WebP يتم عرضها على المتصفحات المتوافقة على eBay.com.

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

يمثل "القطع" هنا وحدات بايت الصورة المهدورة التي يتم إرسالها إلى المستخدمين.

الجلب المُسبَق التنبؤي لمواد العرض الثابتة

لا تقتصر جلسة المستخدم على eBay على مجرّد صفحة واحدة. إنه تدفق. على سبيل المثال، يمكن أن يكون التدفق انتقالاً من الصفحة الرئيسية إلى صفحة البحث إلى صفحة العناصر. فلماذا لا تساعد الصفحات في التدفق بعضها البعض؟ هذه فكرة الجلب المسبق التنبؤي، حيث تجلب إحدى الصفحات بشكلٍ مسبق مواد العرض الثابتة المطلوبة للصفحة التالية المحتملة.

باستخدام ميزة الجلب المُسبَق التنبؤي، عندما ينتقل مستخدم إلى الصفحة المتوقّعة، تكون مواد العرض مضمّنة في ذاكرة التخزين المؤقت في المتصفّح. ويتم ذلك في مواد عرض CSS وJavaScript التي يمكن من خلالها استرداد عناوين URL مسبقًا. هناك شيء واحد يجب ملاحظته هنا وهو أنه يساعد فقط في عمليات التنقل لأول مرة. وفي عمليات الانتقال اللاحقة، ستكون مواد العرض الثابتة متوفّرة في ذاكرة التخزين المؤقت.

تُجري eBay عمليات جلب مُسبقة توقّعية للأصول الثابتة. يجلب الصفحة الرئيسية مسبقًا مواد العرض لشبكة البحث و"بحث Google" يجلب مواد العرض مسبقًا للعنصر، وما إلى ذلك. ويتم حاليًا النظر في الجلب المُسبَق المستند إلى تكنولوجيات تعلُّم الآلة والجلب المُسبَق.

يشير "القطع" هنا إلى وقت الشبكة لمواد العرض الثابتة CSS وJavaScript في عملية التنقل الأولى.

الجلب المسبق لأهم نتائج البحث

عندما يُجري أحد المستخدمين بحثًا على eBay، فإنّ بيانات تحليلات eBay تشير إلى أنّه من المرجّح جدًا أن ينتقل المستخدم إلى عنصر ضمن أهم 10 نتائج بحث. لذلك يجلب eBay الآن العناصر مسبقًا من البحث ويحتفظ بها جاهزة عندما ينتقل المستخدم. يحدث الجلب المُسبَق على مستويَين.

يكون المستوى الأول من جهة الخادم، حيث تحتفظ خدمة العناصر بأهم 10 عناصر في نتائج البحث في ذاكرة التخزين المؤقت. وعندما ينتقل المستخدم إلى أحد هذه العناصر، توفر الآن خدمة eBay الآن وقت معالجة الخادم. تستخدم التطبيقات الخاصة بالنظام الأساسي ميزة التخزين المؤقت من جهة الخادم ويتم طرحها على مستوى العالم.

أما المستوى الآخر، فيتم تخزينه في ذاكرة التخزين المؤقت للمتصفح المتاحة في أستراليا. كان الجلب المُسبَق للعناصر عبارة عن تحسين متقدم بسبب الطبيعة الديناميكية للعناصر. وهناك أيضًا العديد من الفروقات الدقيقة: مرات ظهور الصفحة، والسعة، وعناصر المزاد، وغير ذلك. يمكنك معرفة المزيد حول هذا الموضوع في عرض لقاء هندسة الأداء على LinkedIn، أو يمكنك متابعتنا للاطّلاع على مشاركة مدونة تفصيلية حول هذا الموضوع من مهندسي eBay.

يجلب eBay مسبقًا أهم 5 عناصر في صفحات نتائج البحث لتحميلها لاحقًا بسرعة. ويحدث ذلك خلال وقت عدم النشاط باستخدام requestIdleCallback(). أدّى ذلك إلى تحقيق متوسط وقت أسرع في الجزء المرئي من الصفحة بمقدار 759 ملي ثانية، وهو مقياس مخصّص يشبه "سرعة عرض أوّل محتوى مفيد على الصفحة". وقد لاحظ موقع eBay تأثيرًا إيجابيًا على الإحالات الناجحة الناتجة عن الجلب المُسبَق.

قد يكون "القطع" هنا إما وقت معالجة الخادم أو وقت الشبكة، بناءً على المكان الذي يتم فيه تخزين العنصر في ذاكرة التخزين المؤقت.

التنزيل السريع لصور البحث

في صفحة نتائج البحث، عندما يُصدر طلب بحث على مستوى عالٍ، يحدث أمران. الأولى هي خطوة التذكر/الترتيب، حيث يتم عرض العناصر الأكثر صلة التي تطابق طلب البحث. تتمثل الخطوة الثانية في زيادة حجم السلع التي تم سحبها من خلال تقديم معلومات إضافية ذات صلة بسياق المستخدم، مثل تكاليف الشحن. يرسل موقع eBay الآن على الفور أول 10 صور للسلع إلى المتصفح في مقطع مع العنوان، كي تبدأ عمليات التنزيل قبل وصول باقي الترميز. ونتيجةً لذلك، ستظهر الصور الآن بشكل أسرع. يتم طرح هذا التغيير عالميًا على النظام الأساسي للويب.

يمثل "القطع" هنا وقت بدء تنزيل صور نتائج البحث.

التخزين المؤقت لبيانات الاقتراح التلقائي

عندما يكتب المستخدمون أحرفًا في مربّع البحث، ستظهر في النافذة المنبثقة للاقتراحات. ولا يتم تغيير هذه الاقتراحات بالنسبة إلى مجموعات الأحرف لمدة يوم واحد على الأقل. فهي مرشحة بشكل مثالي لتخزينها مؤقتًا وعرضها من خلال شبكة توصيل للمحتوى (CDN) (لمدة 24 ساعة كحد أقصى)، بدلاً من الطلبات التي تصل إلى مركز البيانات. وتستفيد الأسواق الدولية بشكل خاص من التخزين المؤقت لشبكة توصيل المحتوى (CDN).

لقطة شاشة لمربّع البحث في eBay يعرض اقتراحات الإكمال التلقائي لطلب بحث

ساعد ذلك في جذب انتباه الجمهور، إذ تضمّنت النافذة المنبثقة للاقتراحات بعض عناصر التخصيص في eBay، والتي لا يمكن تخزينها مؤقتًا بكفاءة. لحسن الحظ، لم تكن المشكلة في التطبيقات الخاصة بنظام التشغيل، حيث يمكن فصل واجهة المستخدم للتخصيص والاقتراحات. بالنسبة إلى الويب وفي الأسواق الدولية، كان وقت الاستجابة أكثر أهمية من الفائدة الصغيرة للتخصيص. بعد تنفيذ هذا الإجراء، أصبح لدى eBay الآن اقتراحات تلقائية يتم عرضها من ذاكرة التخزين المؤقت لشبكة توصيل المحتوى (CDN) على مستوى العالم لتطبيقات خاصة بالنظام الأساسي وللأسواق خارج الولايات المتحدة على موقع eBay.com.

يمثل "القطع" هنا وقت استجابة الشبكة ووقت معالجة الخادم للاقتراحات التلقائية.

تخزين Edge مؤقتًا للمستخدمين غير المعروفين

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

قرّرت شركة eBay تخزين محتوى المستخدم غير المعروف (HTML) مؤقتًا على الشبكة الهامشية (PoPs) لفترة قصيرة. يمكن الآن للمستخدمين الجدد الحصول على محتوى الصفحة الرئيسية من خلال خادم قريب منهم، بدلاً من مركز بيانات بعيد. لا تزال شركة eBay تجرّب هذا النوع من التطبيقات في الأسواق الدولية، حيث سيكون لها تأثيرًا أكبر.

وفي هذه الحالة، يشير "القطع" مرة أخرى إلى وقت استجابة الشبكة ووقت معالجة الخادم للمستخدمين غير المعروفين.

تحسينات للمنصات الأخرى

تحسينات على تحليل تطبيقات iOS/Android

تتواصل تطبيقات iOS/Android مع خدمات الخلفية التي يكون تنسيق الاستجابة فيها عادةً JSON. يمكن أن تكون حمولات JSON كبيرة. فبدلاً من تحليل ملف JSON بالكامل لعرض محتوى على الشاشة، وفّرت eBay خوارزمية تحليل فعّالة تحسّن المحتوى الذي يجب عرضه على الفور.

يمكن للمستخدمين الآن الاطّلاع على المحتوى بشكلٍ أسرع. علاوة على ذلك، بالنسبة إلى تطبيق Android، يبدأ eBay في تهيئة وحدات التحكم في عرض البحث بعد أن يبدأ المستخدم في الكتابة في مربع البحث (سبق أن تم تفعيل هذا التحسين في نظام iOS). كان هذا يحدث سابقًا فقط بعد أن ضغط المستخدمون على زر البحث. يمكن للمستخدمين الآن الوصول إلى نتائج البحث بشكل أسرع. ويشير "القطع" هنا إلى الوقت الذي تقضيه الأجهزة لعرض المحتوى ذي الصلة.

تحسينات في وقت بدء تشغيل تطبيق Android

وينطبق ذلك على عمليات تحسين وقت التشغيل على البارد لتطبيقات Android. عندما يكون التطبيق قيد التشغيل على البارد، يحدث الكثير من عمليات الإعداد على مستوى نظام التشغيل والتطبيق. يساعد تقليل وقت الإعداد على مستوى التطبيق المستخدمين في رؤية الشاشة الرئيسية بشكل أسرع. وقد أجرت eBay بعض التحليلات ولاحظت أنّه ليست كل عمليات الإعداد مطلوبة لعرض المحتوى وأنّ بعض عمليات الإعداد يمكن تنفيذها بطريقة كسولة.

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

الاستنتاجات

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

لقطات شاشة لتقرير تجربة المستخدم في Chrome تظهر فيه تحسينات على البيانات الميدانية لموقع eBay.com
تأثير جهود شركة eBay في مجال السرعة على الإنترنت مع مرور الوقت، كما هو موضّح في لوحة بيانات تقرير تجربة المستخدم في Chrome.

فالأداء ميزة وميزة تنافسية. تؤدي التجارب المحسَّنة إلى زيادة تفاعل المستخدمين والإحالات الناجحة وعائد الاستثمار. في حالة eBay، اختلفت هذه التحسينات بين الأشياء المنخفضة الجهد والبعض الآخر المتقدمة.

ما عليك سوى زيارة قناة Speed of Impacts لمعرفة المزيد من المعلومات وترقّب المزيد من المقالات المفصّلة التي أعدّها مهندسو eBay قريبًا حول أعمالهم المتعلّقة بالأداء.