كيف استطاعت شركة Zalando تقليل وقت الملاحظات المتعلّقة بالأداء من يوم واحد إلى 15 دقيقة باستخدام أداة Lighthouse CI

وجد فريق الويب في Zalando أن دمج Lighthouse CI قد ساعد في تطبيق نهج استباقي على الأداء، من خلال عمليات التحقّق الآلية من الحالة التي يمكنها مقارنة الالتزام الحالي بالفرع الرئيسي لمنع أي تراجع في الأداء.

Jan Brockmeyer
Jan Brockmeyer
Jeremy Colin
Jeremy Colin

مع أكثر من 35 مليون عميل نشط، Zalando هي المنصة الرائدة في أوروبا في مجال الموضة على الإنترنت. في هذه المشاركة، نشرح سبب بدء استخدام Lighthouse CI، وسهولة التنفيذ، والمزايا التي يستفيد منها فريقنا.

نحن في Zalando، نعرف العلاقة بين أداء الموقع الإلكتروني والأرباح. في السابق، أجرينا اختبارًا لمدى تأثير زيادة وقت التحميل على صفحات الكتالوج في معدلات الارتداد ومعدلات الإحالات الناجحة والأرباح لكل مستخدم بشكل زائف. وكانت النتائج واضحة. أدى تحسين وقت تحميل الصفحة بمقدار 100 مللي ثانية إلى زيادة التفاعل مع انخفاض معدل الارتداد وزيادة بنسبة 0.7% في الأرباح لكل جلسة.

100 ملّي ثانية

تحسين وقت تحميل الصفحة

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

زيادة الأرباح لكل جلسة

لا يؤدي دعم الشركة دائمًا إلى الأداء

على الرغم من التأييد القوي للأداء داخل الشركة، إذا لم يتم تعيين الأداء كمعايير لتسليم المنتج، فيمكن أن يفلت بسهولة. عندما كنّا نعيد تصميم موقع Zalando الإلكتروني في العام 2020، ركّزنا على تقديم ميزات جديدة مع الحفاظ على تجربة مستخدم ممتازة وإضافة تحسينات على الموقع الإلكتروني باستخدام خطوط مخصّصة وألوان أكثر حيوية. ومع ذلك، عندما أصبح الموقع الإلكتروني والتطبيق المعاد تصميمهما جاهزين للإصدار، كشفت مقاييس المستخدم في وقت مبكر أن الإصدار الجديد كان أبطأ. وزادت سرعة "سرعة عرض أول محتوى مرئي" بنسبة تصل إلى 53%، وكانت إحصاءات "وقت التفاعل" أبطأ بنسبة تصل إلى 59%.

الويب في Zalando

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

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

"مؤشرات أداء الويب" وLighthouse يساعد في إنقاذ

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

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

تقديم ملاحظات بشأن الأداء للمطوّرين حول طلبات السحب

لم نرغب في التوقف عند هذا الحد، لأننا أردنا اغتنام الفرصة ليس فقط للتفاعل مع الأداء، بل أيضًا الاستباقية. لم يكن الانتقال من وحدة عقدة Lighthouse إلى خادم Lighthouse CI (LHCI) صعبًا للغاية. لقد اخترنا استخدام حل الاستضافة الذاتية لمنحنا اندماجًا أفضل مع خدمات الشركة الحالية. يتم إنشاء تطبيق خادم LHCI كصورة Docker، ومن ثمَّ يتم نشره في مجموعة Kubernetes مع قاعدة بيانات PostgreSQL، وإعداد التقارير إلى GitHub.

كان إطار العمل لدينا يقدّم حاليًا بعض الملاحظات بشأن الأداء للمطوّرين، حيث تتم مقارنة أحجام حِزم المكوّنات بقيم الحدّ الأدنى في كل عملية تنفيذ. أصبح بإمكاننا الآن الإبلاغ عن مقاييس Lighthouse في إطار عمليات التحقق من حالة GitHub. يؤدي ذلك إلى تعذُّر مسار CI في حال عدم استيفاء الحد الأدنى للأداء، من خلال توفير رابط يؤدّي إلى تقارير Lighthouse التفصيلية كما هو موضّح في الصور التالية.

صورة لواجهة مستخدم GitHub تعرض خطوطًا من عمليات التحقّق الناجحة.
تسهّل عمليات التحقّق من حالة Lighthouse CI GitHub على المطوّرين فهم الانحدار ومعالجته قبل وصوله إلى مرحلة الإنتاج.
صورة مقارنة في Lighthouse CI تُظهر مدى مقارنة الالتزام بالفرع الرئيسي
تقرير الالتزام التفصيلي من Lighthouse CI مقارنةً بالفرع الرئيسي.

توسيع نطاق تغطية الأداء

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

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