Zalando'daki web ekibi, Lighthouse CI'nin entegrasyonunun performansa proaktif bir yaklaşım sağladığını tespit etti. Otomatik durum kontrolleri, performans gerilemelerini önlemek için mevcut taahhütleri ana dalla karşılaştırarak bu yaklaşımı destekliyor.
35 milyondan fazla etkin müşteriye sahip Zalando, Avrupa'nın önde gelen online moda platformudur. Bu yayında, Lighthouse CI'yi neden kullanmaya başladığımızı, uygulamanın kolaylığını ve ekibimize sağladığı avantajları açıklıyoruz.
Zalando'da, web sitesi performansı ile gelir arasındaki ilişkiyi biliyoruz. Geçmişte, katalog sayfalarındaki yükleme süresinin yapay olarak artırılmasının hemen çıkma oranlarını, dönüşüm oranlarını ve kullanıcı başına geliri nasıl etkilediğini test ettik. Sonuçlar açıktı. Sayfa yüklenme süresinde 100 milisaniyelik bir iyileştirme, daha düşük hemen çıkma oranıyla daha fazla etkileşime ve oturum başına gelirde% 0,7 artışa yol açtı.
100ms
Sayfa yüklenme süresi iyileştirmesi
0,7%
Oturum başına gelir artışı
Şirketin desteği her zaman performansla sonuçlanmaz
Şirket içinde performansa yönelik güçlü bir destek olsa da performans, ürün yayınlama ölçütü olarak ayarlanmazsa kolayca gözden kaçabilir. 2020'de Zalando web sitesini yeniden tasarlarken mükemmel kullanıcı deneyimini korurken web sitesine özel yazı tipleri ve daha canlı renkler ekleyerek yeni özellikler sunmaya odaklandık. Ancak yeniden tasarlanan web sitesi ve uygulama kullanıma hazır olduğunda, ilk kullanıcı metrikleri yeni sürümün daha yavaş olduğunu gösterdi. İlk Zengin İçerikli Boyama% 53'e varan oranda daha yavaştı ve etkileşime hazır olma süresi% 59'a varan oranda daha yavaştı.
Zalando'da web
Zalando web sitesi, bir çerçeve geliştiren çekirdek bir ekip tarafından oluşturulur. Bu ekibe ön uç mikro hizmetlerine katkıda bulunan 15'ten fazla özellik ekibi de katılır. Yeni sürümü desteklerken web sitemizin bir bölümünü daha merkezi bir mimariye de geçirdik.
Mozaik adlı önceki mimari, sayfa performansını şirket içi metriklerle ölçmenin bir yolunu içeriyordu. Ancak, dahili laboratuvar performans izleme araçlarımız olmadığından, gerçek kullanıcılara kullanıma sunmadan önce performans metriklerini karşılaştırmak zordu. Her gün dağıtılmasına rağmen, performans iyileştirmeleri üzerinde çalışan geliştiriciler için yaklaşık bir günlük bir geri bildirim döngüsü vardı.
Web Vitals ve Lighthouse'un yardımı
Yeni kurulumumuza iyi uyum sağlamadıkları için kendi metriklerimizden tam olarak memnun değildik. Daha da önemlisi, müşteri deneyimine odaklanmıyorlardı. Özet, ancak kapsamlı ve kullanıcı odaklı bir metrik grubu sağladığı için Core Web Vitals'a geçtik.
Sürümden önce performansı iyileştirmek için uygun bir laboratuvar ortamı oluşturmamız gerekiyordu. Bu sayede, alan verilerinin 90. yüzdelik dilimimizi temsil eden test koşullarının yanı sıra yeniden üretilebilir ölçümler elde ettik. Artık performans iyileştirmeleri üzerinde çalışan mühendisler, en büyük etkiyi yaratmak için çabalarını nereye odaklayacaklarını biliyordu. Lighthouse denetleme raporlarını zaten yerel olarak kullanıyorduk. Bu nedenle, ilk iterasyonumuzda Lighthouse düğüm modülüne dayalı bir hizmet geliştirdik. Bu hizmette, değişikliklerin hazırlık ortamımızdan test edilebilmesini sağladık. Bu sayede yaklaşık bir saatlik güvenilir bir performans geri bildirimi döngüsü elde ettik. Bu da performansı eşit hale getirmemize ve sürümümüzü kurtarmamıza olanak tanıdı.
Geliştiricilere pull istekleriyle ilgili performans geri bildirimi verme
Bununla da yetinmek istemedik. Hem performansa karşı reaktif hem de proaktif olma fırsatını değerlendirmek istedik. Lighthouse düğüm modülünden Lighthouse CI (LHCI) sunucusuna geçiş yapmak çok zor değildi. Mevcut şirket hizmetlerimizle daha iyi entegrasyon sağlamak için kendi kendine barındırılan çözümü tercih ettik. LHCI sunucu uygulamamız bir Docker görüntüsü olarak derlenir. Bu görüntü daha sonra PostgreSQL veritabanıyla birlikte Kubernetes kümemize dağıtılır ve GitHub'ımıza raporlanır.
Çerçevemiz zaten geliştiricilere bazı performans geri bildirimleri sağlıyordu. Bileşen paketi boyutları her bir taahhütte eşik değerlerle karşılaştırılıyordu. Artık Lighthouse metriklerini GitHub durum kontrolleri olarak raporlayabiliyoruz. Bunlar, performans eşiklerini karşılamazlarsa CI ardışık düzeninin başarısız olmasına neden olur. Aşağıdaki resimlerde gösterildiği gibi ayrıntılı Lighthouse raporlarının bağlantısı da sağlanır.
Performans kapsamını genişletme
Çok gerçekçi bir yaklaşımla başladık. Lighthouse şu anda yalnızca en önemli sayfalarımızdan ikisinde (ana sayfa ve ürün ayrıntıları sayfası) çalışır. Neyse ki Lighthouse CI, çalıştırma yapılandırmalarını genişletmeyi kolaylaştırır. Web sitemizin belirli sayfalarında çalışan özellik ekipleri, eşleşen URL kalıplarını ve iddialarını ayarlayabilir. Bu sayede, performans kapsamımızın artacağından eminiz.
Artık daha büyük sürümler oluştururken çok daha emin olduğumuzu söyleyebiliriz. Geliştiriciler de kodlarının performansıyla ilgili çok daha kısa bir geri bildirim döngüsü elde edebilir.