قصة نجاح بائع تجزئة للأزياء في مجال التجارة الإلكترونية في ربط مؤشرات الأداء الأساسية ومقاييس الأداء بمقاييس النشاط التجاري، ما أدّى إلى زيادة في مؤشرات الأداء الرئيسية وإنشاء "آلة حاسبة لحالة الأداء التجارية" لتعزيز القرارات المتعلّقة بالمنتجات وثقافة الأداء.
في الكثير من الشركات، يُعدّ أداء سرعة المواقع الإلكترونية و"مؤشرات أداء الويب الأساسية" من مسؤولية الفِرق الهندسية. يمكن أن تصبح سرعة الموقع الإلكتروني غير مرئية لمجالات أخرى من النشاط التجاري إذا لم يتم فهم قيمة النشاط التجاري والعميل. يمكن أن يؤدي ذلك إلى تجاهل الأداء عند اتخاذ قرارات رئيسية وتحديد خرائط الطريق.
لتحسين ثقافة الأداء بين الفرق وإجراء تحسينات ملحوظة على تجربة الويب، أطلق متجر بيع الأزياء الفاخرة بالتجزئة Farfetch مشروعًا لتحديد واستخدام مقاييس الأداء الحقيقية التي تركز على العملاء. وكان الهدف من ذلك ربط هذه المقاييس بمقاييس الأعمال كطريقة لتوضيح كيفية تأثير الأداء في مؤشرات الأداء الرئيسية للشركة.
ومع ذلك، لم تنتهِ طموحاتها عند هذا الحد. في نهاية المطاف، كان الهدف من المشروع هو إجراء تغيير ثقافي على نطاق واسع، وذلك من خلال تقسيم المستودعات داخل المؤسسة وتقديم لغة جديدة نحو الأعمال لمنح الجميع طريقة مشتركة للتحدث حول ما كان يعتبر مواضيع تقنية. أراد Farfetch أن يكون أداء سرعة الموقع الإلكتروني كمسئولية مشتركة، وتسهيل عملية اتخاذ القرار المدروس، ووضعه كركيزة أساسية لتحسين تجربة الويب.
![رسم تخطيطي يتناقض مع السرعة كمسؤولية مطور البرامج مقابل السرعة كمسئولية مشتركة. في الحالة السابقة، تكون كل مرحلة معزولة، بينما في المرحلة الثانية، تحدث كل مرحلة داخل نفس الصومعة.](https://web.developers.google.cn/static/case-studies/farfetch/image/a-diagram-contrasting-spe-81025e3b51a84.png?authuser=5&hl=ar)
للبدء، أدرك "فارفيتش" أنّ قسمًا واحدًا لا يمكنه تحقيق ذلك كما في السابق وجمّع فريقًا أساسيًا من الخبراء من مختلَف المجالات في الشركة، مثل الهندسة والبنية الأساسية والهندسة والمنتج، وطبّق منه استراتيجية مفصّلة لتجديد نظرة الشركة على هذا الموضوع.
الخطوة 1: تحديد المقاييس وقياسها ومراقبتها
أولاً، كان بإمكان Farfetch امتلاك أدوات المراقبة المناسبة لفهم الحالة الحالية والانحرافات عبر نقاط الاتصال والتطبيقات الخاصة بالرحلة.
واعتمد فريق العمل على كلّ من البيانات المختبرية ومراقبة المستخدمين (البيانات الفعلية فقط) لتتبُّع "مؤشرات أداء الويب الأساسية" ومقاييس الأداء الإضافية التي تركّز على المستخدم لتحليل الحالة الحالية للسرعة. واستخدموا JavaScript ومكتبة web-vitals.js
لجمع البيانات، ما سمح لفريق إحصاءات المنتجات بالاطّلاع على مقاييس الأداء إلى جانب مقاييس النشاط التجاري في الجلسة نفسها، وبالتالي البدء في فحص مدى تأثير أحدهما على الآخر.
عملت هذه المجموعة المتعدّدة التخصّصات على فهم المقاييس الأكثر أهمية للنشاط التجاري. وللقيام بذلك، راجع الفريق مسار الرحلة المهم لمستخدمي Farfetch وحاول ربط هذه الرحلة بعلامات الأداء. بالإضافة إلى المقاييس التي حدّدتها Google في "مؤشرات أداء الويب الأساسية"، يمثّل كل منها واجهة مميزة من تجربة المستخدم، تم أيضًا استخدام لغة JavaScript مخصّصة لتتبُّع الوقت المستغرق حتى أول بايت (TTFB) وسرعة عرض أول محتوى مرئي (FCP) وسرعة عرض أول محتوى مرئي ومدة التفاعل (TTI).
يتم جمع المقاييس باستخدام عدة طرق في Performance API وLong Tasks API ورموز polyfill من Google. يمكنك الاطّلاع على مزيد من التفاصيل في مشاركة مدوّنة Farfetch Tech هذه في منتصف عام 2020 التي نشرها "مانويل غارسيا"، كبير المهندسين الرئيسيين في مجال الويب.
في ما يتعلق بتحليلات البيانات، يمتلك Farfetch حل تتبع متعدد القنوات خاص به وتستخدمه تطبيقات الواجهة الأمامية التي تسمى Omnitracking. ويتتبّع هذا الإصدار الأحداث الناتجة عن مشاهدات الصفحات وإجراءات المستخدمين وإجراءات النظام. نموذج بيانات Omnitracking هو الحلّ الذي توفّره تطبيقات Farfetch للحالات التحليلية واستكشاف البيانات وإعداد التقارير، ويتم وضعه أعلى الأحداث التي يتم إنشاؤها بواسطة أدوات التتبُّع. إن الهدف من نموذج البيانات هو مساعدة ودعم أي شخص يحتاج إلى فهم ما يلي:
- سلوك المستخدمين
- تجربة المستخدم في تطبيقات Farfetch
- استخدام التطبيقات
- الإحالات الناجحة الكبيرة والصغرى
- التحليل على جميع القنوات ومسار الإحالة الناجحة
بعد ذلك، كانت الفكرة هي إضافة بيانات الأداء لكل مشاهدة صفحة على Farfetch.com، التي تم التقاطها بواسطة JavaScript، إلى طبقة البيانات هذه. يضمن اتّباع هذا النموذج حدوث مطابقة بين بيانات الأداء ومقاييس مسار الإحالة الناجحة الرئيسية لكلّ جلسة وقاعدة الاستكشاف التحليلي عن الموضوع.
أخيرًا، وضع Farfetch ميزانيات أداء مستندة إلى الوقت لكل مقياس في صفحات الرحلة الرئيسية وعملية إدارة للتعامل مع خرق الميزانية. وقد بدأوا أيضًا في دمج مقاييس الأداء في مسارات CI لفهم انحرافات الميزانية في أقرب وقت ممكن خلال عملية التطوير.
الخطوة 2: التواصل عبر لغة النشاط التجاري
ومع توفّر بيانات الأداء الآن ضمن مجموعات بيانات ذكاء الأعمال الداخلية في Farfetch، بدأ فريق التحليلات في استكشاف النماذج والأنماط الرياضية في البيانات التي يمكن أن تشير إلى وجود ارتباط بين مقاييس الأداء ومؤشرات الأداء الرئيسية للأنشطة التجارية (على سبيل المثال، معدّل التحويل والنسبة المئوية لزيارات الصفحة الواحدة)، ما يوفّر عرضًا جديدًا للتأثير المالي لسرعة الموقع الإلكتروني وتجربة المستخدم في النشاط التجاري. وقد أتاح ذلك مناقشة الأداء بلغة مشتركة مع صناع القرار في الأنشطة التجارية. وتضمّن التحليل جميع "مؤشرات أداء الويب الأساسية" والمقاييس الأخرى التي اعتبرها "فارفيتش" قيّمة. وقد كشف عن رؤى مؤثرة حقًا.
وبما أنّ Google تنصح باستخدام سرعة عرض سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) بأقل من 2.5 ثانية لتوفير أفضل تجربة للمستخدم، درس Bard هذا الحدّ بعناية ووجد نتائج مفيدة.
أظهر تحليل الارتباط الإحصائي لـ Farfetch أنه بعد هذه النقطة، بدأ معدل التحويل في الانخفاض، فضلاً عن ارتفاع معدل الخروج. يوضِّح ذلك أنّ المستخدمين بدأوا يشعرون بالسلب بسبب بطء تحميل الصفحة، وانخفاض معدّل الإحالات الناجحة في المتوسط -1.3% مع كل 100 ملّي ثانية من سرعة عرض أكبر جزء من المحتوى على الصفحة.
![رسم بياني لمقياس LCP، حيث يمثّل المحور الصادي معدل الإحالة الناجحة والنسبة المئوية لزيارات الصفحة والمحور السيني هو وقت سرعة LCP نظرًا لسرعة LCP، تنخفض النسبة المئوية لزيارات الصفحة الواحدة ويزداد معدل الإحالات الناجحة.](https://web.developers.google.cn/static/case-studies/farfetch/image/a-graph-lcp-where-y-ax-17f98c162afc.png?authuser=5&hl=ar)
وتحقّق تطبيق Farfetch أيضًا من انخفاض في معدّل الخروج بنسبة -3.1% لكل 0.01 أقل في نتيجة متغيّرات التصميم التراكمية (CLS)، ما أعاد التأكيد مجددًا على تأثير ثبات الصفحة في الحفاظ على المستخدمين على الموقع الإلكتروني.
![رسم بياني لمتغيّرات التصميم التراكمية، حيث يمثّل المحور الصادي معدّل الإحالة الناجحة والنسبة المئوية لزيارات الصفحة، والمحور السيني هو نتيجة متغيّرات التصميم التراكمية (CLS). وتعرِض أدنى نتائج متغيّرات التصميم التراكمية (CLS) أعلى نسبة مئوية من زيارات صفحة واحدة، في حين تزيد الإحالات الناجحة عند نقاط متغيّرات التصميم التراكمية (CLS) أقل.](https://web.developers.google.cn/static/case-studies/farfetch/image/a-graph-cls-where-y-ax-da95352df4937.png?authuser=5&hl=ar)
على الرغم من تتبُّع مهلة الاستجابة لأوّل إدخال (FID) وتحليلها بشكل مستمر، يقيس التطبيق أيضًا مقياس TTI، وقد ثبت أنّ هذا المقياس له تأثير كبير في مسار الإحالة الناجحة للنشاط التجاري في Farfetch.
لإجراء ذلك، تم إدخال رمز polyfill من Google إلى الموقع الإلكتروني لتخزين هذا المقياس. استخدام واجهة برمجة تطبيقات "مهام طويلة" لإعداد تقارير عن المهام الطويلة (المهام التي تستغرق أكثر من 50 مللي ثانية في سلسلة التعليمات الرئيسية للمتصفِّح)
بعد ذلك، تمكّن فريق الإحصاءات من العثور على زيادة معدل الإحالات الناجحة بنسبة 2.8% لكل عملية تخفيض في الثانية، ما كان يُثبت دافعًا قويًا إلى تحسين كفاءة الرمز البرمجي وإزالة سلسلة التعليمات الرئيسية للمتصفّح.
![رسم بياني لـ TTI، حيث يمثل المحور "Y" معدل التحويل والنسبة المئوية لزيارات الصفحة الواحدة، والمحور "X" هو وقت TTI. وكلما ارتفع وقت مؤشر تطوُّر لعدد الصفحات، انخفض معدل الإحالات الناجحة وتزداد النسبة المئوية لزيارات الصفحة الواحدة.](https://web.developers.google.cn/static/case-studies/farfetch/image/a-graph-tti-where-y-ax-64833dcd51ddc.png?authuser=5&hl=ar)
في النهاية، تمكن هذا التحليل أيضًا من إظهار أن بعض المقاييس لم يكن لها تأثير كبير على مؤشرات الأداء الرئيسية للأعمال، أو أن بعضها سيكون أكثر صلة في مراحل مختلفة من رحلة المستخدم. وقد ساعد ذلك في التعرّف بشكل كامل على الفرص المتاحة في كل نقطة من مسار الإحالة الناجحة.
الخطوة الثالثة: تضمين التغيير الثقافي
كان عرض الإحصاءات أعلاه إلى جانب أبحاث المستخدمين النوعية حول إدراك المستخدمين لسرعة الموقع الإلكتروني أمرًا بالغ الأهمية لإنشاء المواءمة مع أهداف الشركة، وتأمين الوعي على المستوى التنفيذي، والحصول على التأييد لاتّخاذ القرارات المستندة إلى الأداء في جميع خرائط طريق المنتج. أصبح من الممكن الآن إثبات مقدار الأداء الذي يستحقه تطبيق Farfetch.
ولتبسيط عملية تحديد الأولويات، أنشأ Bard أداة خدمة ذاتية أطلق عليها اسم "الآلة الحاسبة لحالة النشاط التجاري لسرعة الموقع"، واستلهمت أفكارًا من الآلة الحاسبة لتأثير السرعة من Google. وهي تتيح لأي مدير منتجات إنشاء دراسة الجدوى من أجل تحسين الأداء من خلال احتساب تأثير النشاط التجاري بسرعة. من خلال استخدام نموذج بيانات يستخدم الارتباط بين معدّل الإحالات الناجحة ومقاييس تجربة المستخدم، يمكنك التكيّف مع نطاقات المنتجات والأجهزة ونقاط الاتصال المختلفة الخاصة برحلة المستخدم.
![لقطة شاشة لآلة حساب حالة النشاط التجاري لسرعة الموقع الإلكتروني على Farfetch](https://web.developers.google.cn/static/case-studies/farfetch/image/a-screenshot-farfetchs-938300a6a924b.png?authuser=5&hl=ar)
في الوقت نفسه، توفّرت مجموعة من لوحات البيانات التحليلية ذاتية الخدمة إمكانية وصول على مستوى النشاط التجاري لمؤشرات الأداء في الوقت الفعلي وتأثيرها في النشاط التجاري. وأصبح الأداء الآن مضمَّنًا بشكل كامل في عملية تطوير المنتج، وتتمتع فِرق المنتجات بإمكانية الوصول بسهولة إلى المقاييس وأدوات التدقيق ومراقبة ميزانية الأداء. بالإضافة إلى ذلك، بفضل دمج طبقة البيانات، تتوفّر مقاييس الأداء أيضًا في أدوات اختبار Farfetch A/B، ما يمنح مديري المنتجات مؤشرًا آخر فعّالاً للإحصاءات.
في الأشهر الأخيرة، يسير الفريق الأساسي أيضًا في المسار الصحيح لإنشاء هذه الثقافة ليس فقط في فرق تطوير الواجهة الأمامية ولكن أيضًا داخل نطاق النظام الأساسي، باستخدام منهجيات مماثلة لمراقبة وإثبات تأثير الخدمات والمعاملات الصغيرة الرئيسية.
وقد تم تقديم عدد من العروض التقديمية المستندة إلى Farfetch حول هذا الموضوع بالإضافة إلى إشارات خارجية. على سبيل المثال، تمت الإشارة إلى محادثة في مؤتمر Google I/O لعام 2021 حول تأثير "مؤشرات أداء الويب الأساسية" في الأنشطة التجارية. ساهم هذا أيضًا في إعطاء صلة مستمرة بالموضوع وترسخ استراتيجية الفريق بشأن الثقافة.
الخطوة 4: تحسين المقاييس
في النهاية، كان لابد من كل هذه الأعمال للمساهمة في تحسين مقاييس سرعة مواقعها الإلكترونية بصورة موضوعية، وضمان أنّ فِرق العمل ستتّبع أفضل الممارسات في المجال وتبحث عن فرص لتحسين الأداء.
من أهم الفرص التي تم رصدها في عام 2021 كانت الحاجة إلى تحسين سرعة LCP في نوعَي الصفحات الرئيسيين من Farfetch: صفحات المنتجات وصفحات بيانات المنتجات.
عملت الفِرق على تحديد طريقة تحميل المحتوى الرئيسي لتلك الصفحات. وقد تمكّنوا من خلال الاستفادة من دراسة جدوى توضّح تأثير مطاردة هذه الفرصة في تحقيق ما يلي:
- تكييف مكوِّن تحميل صورة المنتج من حل قائم على JavaScript إلى تنفيذ أصلي.
- تحديد أولوية الصور وتقسيمها إلى أصول بالغة الأهمية وغير مهمّة
- يجب تحميل الصور المهمة مبكرًا مع تضمين المصدر في رمز HTML واستخدام السمة
<link rel="preload">
ليتم تنزيلها في أقرب وقت ممكن. - استخدِم السمة
<img loading="lazy">
للصور غير المهمة باستخدام رمز polyfill باستخدام أداة Intersection Monitorer على المتصفّحات غير المتوافقة، مثل Safari.
وبذلك، نجحوا في تحقيق ذلك من خلال اختبار أ/ب للفرضية وتأثيرها في الأعمال التجارية. على سبيل المثال، انخفضت هذه الجهود في صفحات المنتجات عن 600 ملي ثانية، وأظهر اختبار أ/ب زيادة في معدل الإحالات الناجحة في نطاق يتراوح بين 1% و5% مع مستوى الثقة المحدّد للشركة.
في ما يلي التحسينات التي تمكّن الفريق من إجرائها من حيث النسبة المئوية لمشاهدات الصفحة على الويب التي تُعتبر "جيدة" و"بحاجة إلى تحسين" و"سيئة"، استنادًا إلى تعريف Google لنتيجة سرعة عرض أكبر جزء من المحتوى على الصفحة.
![رسم بياني شريطي مكدّس لمتوسط سرعة عرض أكبر جزء من المحتوى على الصفحة في حدود "مؤشرات أداء الويب الأساسية" لصفحات بيانات Farfetch. وزادت الصفحات التي بلغت الحد الأدنى "جيد" من% 37 إلى %53.](https://web.developers.google.cn/static/case-studies/farfetch/image/a-stacked-bar-graph-medi-82d8eb75b571a.png?authuser=5&hl=ar)
![رسم بياني شريطي مكدّس لمتوسط سرعة عرض أكبر جزء من المحتوى على الصفحة في حدود "مؤشرات أداء الويب الأساسية" لصفحات بيانات Farfetch. وارتفعت الصفحات التي بلغت الحد الأدنى "جيد" من% 36 إلى %48.](https://web.developers.google.cn/static/case-studies/farfetch/image/a-stacked-bar-graph-medi-68b0207f7a34e.png?authuser=5&hl=ar)
مكافآت توفير موقع إلكتروني أسرع وممارسات عمل أفضل
سمح بناء ثقافة حول الأداء والأدوات مثل حاسبة حالة العمل للجميع بالبدء في التحدث بلغة مشتركة يمكن لمديري المنتجات والأطراف المعنية والمهندسين على حد سواء فهمها. وقد أدّى ذلك إلى حدوث مناقشات مستمرة حول كيفية تحديد أولويات المبادرات الجديدة وتحسينات الأداء.
يوضّح "روي سانتوس"، مدير المنتجات الرئيسي الأول في قنوات الويب في "فارفيتش"، قائلاً: "أردنا إنهاء دورة الأداء بأنّها مصدر قلق متعلق بالتكنولوجيا فقط، وهو شيء يملكه الفريق الهندسي فقط لمعالجة المشكلة وحلها. "كان ربط مقاييس الأداء بمقاييس النشاط التجاري فعالاً بشكل مدهش لتمرير الرسالة بسرعة كبيرة جدًا. يقود النشاط التجاري الشركة، وساهم ربط نجاحها بمقاييس السرعة في تشجيع مجموعة أوسع من الأطراف المعنية على فهم قرارات المقايضة والتنقّل فيها".
في قطاع التجارة الإلكترونية الفاخرة، يمكن أن يحدد ما إذا كان موقعك سريعًا أم بطيئًا كيفية ظهور المستهلكين لعلامتك التجارية وجودة الخدمة التي تقدمها ككل. بالنسبة إلى المستخدمين، تشير الجودة إلى الرفاهية، وينطبق ذلك على كل جانب من جوانب تجربتهم، بما في ذلك مستوى أداء موقعك الإلكتروني. ونظرًا لتأثير سرعة الموقع الإلكتروني في معدّل الإحالات الناجحة، يحتل الأداء الآن موضعًا آمنًا عند التخطيط المستقبلي في Farfetch.