تبيّن لفريق الويب في Zalando أنّ دمج Lighthouse CI سمح بنهج استباقي للأداء، مع عمليات التحقّق التلقائية من الحالة التي يمكنها مقارنة الإصدار الحالي بالفرع الرئيسي لمنع حدوث تراجع في الأداء.
مع أكثر من 35 مليون عميل نشط، تشكل Zalando منصة الأزياء الرائدة على الإنترنت في أوروبا. في هذه المشاركة، نوضّح سبب بدء استخدام Lighthouse CI، وسهولة التنفيذ، ومزايا ذلك لفريقنا.
في Zalando، ندرك العلاقة بين أداء الموقع الإلكتروني والأرباح. في السابق، اختبرنا تأثير زيادة وقت التحميل بشكل مصطنع على صفحات الكتالوج في معدّلات الارتداد، ومعدّلات الإحالات الناجحة، والأرباح لكل مستخدم. كانت النتائج واضحة. أدّى تحسين وقت تحميل الصفحة بمقدار 100 ملي ثانية إلى زيادة التفاعل مع انخفاض في معدّل الارتداد وزيادة في الأرباح بنسبة% 0.7 لكل جلسة.
100ملي ثانية
تحسين وقت تحميل الصفحة
0.7%
زيادة الأرباح لكلّ جلسة
لا يؤدّي موافقة الشركة دائمًا إلى تحقيق الأداء المطلوب.
على الرغم من الموافقة القوية على الأداء داخل الشركة، إذا لم يتم ضبط الأداء كمعايير لتسليم المنتجات، يمكن أن يتلاشى بسهولة. عندما أعدنا تصميم موقع Zalando الإلكتروني في عام 2020، ركّزنا على تقديم ميزات جديدة مع الحفاظ على تجربة ممتازة للمستخدمين وإجراء عملية تجديد على الموقع الإلكتروني باستخدام خطوط مخصّصة وألوان أكثر حيوية. ومع ذلك، عندما أصبح الموقع الإلكتروني والتطبيق المُعاد تصميمهما جاهزين للإصدار، كشفت مقاييس المستخدِمين الأوائل أنّ الإصدار الجديد كان أبطأ. كانت سرعة عرض أول محتوى مرئي أبطأ بنسبة تصل إلى% 53، وكانت سرعة الاستعداد للتفاعل أبطأ بنسبة تصل إلى% 59.
الويب في Zalando
تم إنشاء موقع Zalando الإلكتروني من قِبل فريق أساسي يطوّر إطار عمل، مع أكثر من 15 فريقًا لتطوير الميزات يساهمون في توفير خدمات مصغرة للواجهة الأمامية. وأثناء توفير الإصدار الجديد، نقلنا أيضًا جزءًا من موقعنا الإلكتروني إلى بنية مركزية أكثر.
كانت البنية السابقة التي تُعرف باسم Mosaic تتضمّن طريقة لقياس أداء الصفحة باستخدام مقاييس داخلية. ومع ذلك، كان من الصعب مقارنة مقاييس الأداء قبل طرحها للمستخدمين الحقيقيين، لأنّنا لم نتوفّر لدينا أدوات مراقبة الأداء في المختبر الداخلي. على الرغم من عمليات النشر اليومية، كان هناك حلقة ملاحظات تستغرق يومًا واحدًا تقريبًا للمطوّرين الذين يعملون على تحسين الأداء.
Web Vitals وLighthouse لإنقاذ الموقف
لم نكن راضين تمامًا عن المقاييس الداخلية التي نستخدمها لأنّها لم تتوافق بشكل جيد مع الإعداد الجديد. والأهم من ذلك، لم تكن هذه التجارب تركّز على تجربة العملاء. لقد انتقلنا إلى مؤشرات أداء الويب الأساسية لأنّها توفّر مجموعة من المقاييس المكثّفة والشاملة والمركزة على المستخدم.
لتحسين الأداء قبل الإصدار، كان علينا إنشاء بيئة مختبرية مناسبة. وقد وفّرت هذه التجارب قياسات قابلة للتكرار، بالإضافة إلى ظروف الاختبار التي تمثّل نسبة 90% من البيانات الميدانية. والآن، أصبح بإمكان المهندسين الذين يعملون على تحسين الأداء معرفة المكان الذي يجب أن يركزوا فيه جهودهم لتحقيق أكبر تأثير. لقد كنّا نستخدم تقارير تدقيق Lighthouse محليًا. لذلك، كانت الخطوة الأولى هي تطوير خدمة تستند إلى وحدة عقدة Lighthouse، حيث يمكن اختبار التغييرات من بيئة الاختبار. وقد وفّر لنا ذلك حلقة ملاحظات موثوقة حول الأداء تبلغ مدتها ساعة واحدة تقريبًا، ما مكّننا من تحسين الأداء وطرح الإصدار.
تقديم ملاحظات حول الأداء للمطوّرين بشأن طلبات السحب
لم نكن نريد التوقف عند هذا الحد، لأنّنا أردنا اغتنام الفرصة ليس فقط للتعامل بشكل تفاعلي مع الأداء، بل أيضًا بشكل استباقي. لم تكن عملية الانتقال من وحدة عقدة Lighthouse إلى خادم Lighthouse CI (LHCI) صعبة للغاية. لقد اخترنا الحلّ المستضاف ذاتيًا لنتمكّن من دمجه بشكل أفضل مع خدمات شركتنا الحالية. يتم إنشاء تطبيق خادم LHCI كصورة Docker، ويتم نشره بعد ذلك في مجموعة Kubernetes مع قاعدة بيانات PostgreSQL، ويتم إرسال التقارير إلى GitHub.
كان إطار العمل يقدّم بعض الملاحظات حول الأداء للمطوّرين، حيث كانت تتم مقارنة أحجام حِزم المكوّنات بقيم الحدود الدنيا في كل عملية إرسال. أصبح بإمكاننا الآن الإبلاغ عن مقاييس Lighthouse كعمليات التحقّق من حالة GitHub. تؤدي هذه الأخطاء إلى تعذّر إكمال مسار عملية دمج الإصدارات في حال عدم استيفاء متطلبات الأداء، مع تضمين رابط يؤدي إلى تقارير Lighthouse التفصيلية كما هو موضّح في الصور التالية.
توسيع نطاق تغطية الأداء
بدأنا بنهج عملي جدًا. لا تعمل أداة Lighthouse حاليًا إلا على صفحتَين من أهم صفحاتنا: الصفحة الرئيسية وصفحة تفاصيل المنتج. لحسن الحظ، تسهِّل أداة Lighthouse CI توسيع نطاق إعدادات التشغيل. يمكن لفِرق الميزات التي تعمل على صفحات معيّنة من موقعنا الإلكتروني إعداد نمط عنوان URL وبيانات الإثبات المطابقة. بعد تنفيذ هذه الخطوة، نحن على ثقة من أنّ تغطية الأداء ستزيد.
أصبحنا الآن أكثر ثقة عند إنشاء إصدارات أكبر، ويمكن للمطوّرين الاستفادة من حلقة ملاحظات أقصر بكثير حول أداء رموزهم البرمجية.