35 milyondan fazla aktif müşterisiyle, Zalando Avrupa’nın önde gelen çevrimiçi moda platformudur. Bu gönderide Lighthouse CI’yi neden kullanmaya başladığımızı, uygulama 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ında yükleme süresinin yapay olarak nasıl artırıldığını test ettik etkilenen hemen çıkma oranları, dönüşüm oranları ve kullanıcı başına gelir. Sonuçlar açıktı. 100 milisaniyelik sayfa yükleme süresi iyileştirmesi, daha düşük hemen çıkma oranıyla etkileşimin artmasına ve oturum başına gelirde %0,7’lik bir artışa yol açtı.
100Hanım
Sayfa yükleme süresi iyileştirmesi
0.7%
Oturum başına artan gelir
Şirket katılımı her zaman performansa dönüşmez #
Şirket içindeki güçlü performans satın almasına rağmen, eğer performans bir ürün teslim kriteri olarak belirlenmezse kolayca gözden kaçabilir. 2020’de Zalando web sitesini yeniden tasarlarken, Yeni özellikler mükemmel kullanıcı deneyimini korurken ve web sitesine özel yazı tipleri ve daha canlı renklerle bir makyaj uygularken. Ancak, yeniden tasarlanan web sitesi ve uygulama piyasaya sürülmeye hazır olduğunda, erken benimseyen ölçümleri, yeni sürümün daha yavaş olduğunu ortaya çıkardı. First Contentful Paint %53’e kadar daha yavaştı ve ölçülen Etkileşime Geçme Süremiz %59’a kadar daha yavaş olduğunu bildirdi.
Zalando’da internet #
Zalando web sitesi, bir çerçeve geliştiren çekirdek bir ekip tarafından oluşturulmuştur. ön uç mikro hizmetlerine katkıda bulunan 15’in üzerinde özellik ekibiyle. Yeni sürümü desteklerken, web sitemizin bir bölümünü de daha merkezi bir mimariye geçirdik.
Önceki mimari denilen Mozaik şirket içi ölçümlerle sayfa performansını ölçmenin bir yolunu içeriyordu. Ancak, dahili laboratuvar performans izleme araçlarına sahip olmadığımız için gerçek kullanıcılara sunmadan önce performans ölçümlerini 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 Verileri ve Deniz Feneri yardıma koşuyor #
Yeni kurulumumuza iyi uyum sağlamadıkları için kurum içi ölçümlerimizden tamamen memnun değildik. Daha da önemlisi, müşteri deneyimi odaklı değillerdi. Yoğun, ancak kapsamlı ve kullanıcı merkezli bir ölçüm seti sağladıkları için Önemli Web Verileri’ne geçtik.
Yayınlanmadan önceki performansı iyileştirmek için uygun bir laboratuvar ortamı oluşturmamız gerekiyordu. Bu, saha verilerimizin yüzde 90’ını temsil eden test koşullarına ek olarak tekrarlanabilir ölçümler sağladı. Artık performans iyileştirmeleri üzerinde çalışan mühendisler, en büyük etkiyi yaratmak için çabalarını nereye odaklayacaklarını biliyorlardı. Lighthouse denetim raporlarını zaten yerel olarak kullanıyorduk. Bu yüzden ilk yinelememiz, şuna dayalı bir hizmet geliştirmekti: Deniz feneri düğüm modülü, değişikliklerin hazırlama ortamımızdan test edilebileceği yer. Bu bize yaklaşık bir saatlik güvenilir bir performans geri bildirim döngüsü sağladı, bu da performansı eşit seviyeye getirmemize ve sürümümüzü kurtarmamıza olanak sağladı!
Çekme isteklerinde geliştiricilere performans geri bildirimi verme #
Sadece performansa karşı reaktif değil, aynı zamanda proaktif olma fırsatını değerlendirmek istediğimiz için burada durmak istemedik. Lighthouse düğüm modülünden Lighthouse CI (LHCI) sunucusuna geçiş yapmak çok da zor olmadı. Mevcut şirket hizmetlerimizle daha iyi bir entegrasyon sağlamak için kendi kendine barındırılan çözümü seçtik. LHCI sunucu uygulamamız, daha sonra bir PostgreSQL veritabanıyla birlikte Kubernetes kümemize dağıtılan ve GitHub’ımıza rapor veren bir Docker görüntüsü olarak oluşturulur.
Çerçevemiz zaten geliştiricilere bazı performans geri bildirimleri sağlıyordu; bileşen paket boyutları, her taahhütte eşik değerlerle karşılaştırılıyordu. Artık Lighthouse metriklerini GitHub durum kontrolleri olarak raporlayabiliyoruz. Bunlar, aşağıdaki resimlerde gösterildiği gibi ayrıntılı Lighthouse raporlarına bir bağlantı ile performans eşiklerini karşılamazlarsa CI ardışık düzeninin başarısız olmasına neden olur.
Performans kapsamını genişletme #
Çok pragmatik bir yaklaşımla başladık. Şu anda Lighthouse yalnızca en önemli iki sayfamızda çalışıyor: ana sayfa ve ürün detay sayfası. 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 modellerini ve iddialarını ayarlayabilir. Bunun yerine getirilmesiyle, performans kapsamımızın artacağından oldukça eminiz.
Artık daha büyük sürümler oluştururken kendimize çok daha güveniyoruz ve geliştiriciler, kodlarının performansı hakkında çok daha kısa bir geri bildirim döngüsünün keyfini çıkarabilirler.