Zalando'nun web ekibi, Lighthouse CI'nın entegre edilmesinin performans için proaktif bir yaklaşım sağladığını ve otomatik durum denetimlerinin, performans gerilemelerini önlemek için mevcut kaydı ana dalla karşılaştırabildiğini tespit etti.
35 milyondan fazla aktif müşterisi bulunan Zalando, Avrupa'nın lider online moda platformudur. Bu yayında neden Lighthouse CI'yı kullanmaya başladığımızı, uygulama kolaylığını ve ekibimize avantajlarını açıklıyoruz.
Zalando olarak web sitesi performansı ile gelir arasındaki ilişkiyi biliyoruz. Geçmişte, Katalog sayfalarında yükleme süresini yapay olarak artırmanın hemen çıkma oranlarını, dönüşüm oranlarını ve kullanıcı başına geliri nasıl etkilediğini test ettik. Sonuçlar netti. Sayfa yüklenme süresindeki 100 milisaniye iyileşme, daha düşük hemen çıkma oranıyla daha fazla etkileşim ve oturum başına gelirde% 0,7 artış sağladı.
100ms
Sayfa yüklenme süresinde iyileşme
%0,7
Oturum başına gelir arttı
Şirketin ikna olması her zaman performans anlamına gelmez
Şirket içinde güçlü bir performans onayı olsa da, performans bir ürün teslimat kriteri olarak belirlenmemişse kolayca kaçırılabilir. 2020'de Zalando web sitesini yeniden tasarlarken, mükemmel kullanıcı deneyimini korurken yeni özellikler sunmaya ve web sitesine özel yazı tipleri ile daha canlı renklerle bir revizyon uygulamaya odaklandık. Ancak, yeniden tasarlanan web sitesi ve uygulama kullanıma hazır olduğunda, ilk kullanıcıların metrikleri yeni sürümün daha yavaş olduğunu ortaya koydu. İlk Zengin İçerikli Boyama% 53'e kadar yavaştı ve ölçülmüş Etkileşim Süresi% 59'a kadar yavaşladı.
Zalando'da web
Zalando web sitesi, bir çerçeve geliştiren çekirdek bir ekip tarafından oluşturuldu ve ön uç mikro hizmetlere katkıda bulunan 15'ten fazla özellik ekibi ile. Bir yandan yeni sürümü desteklerken diğer yandan web sitemizin bir kısmını daha merkezi bir mimariye geçirdik.
Mozaik adı verilen önceki mimari, sayfa performansını şirket içi metriklerle ölçmenin bir yolunu içeriyordu. Ancak şirket içinde laboratuvar performansı izleme araçlarımız olmadığından performans metriklerini gerçek kullanıcılara sunmadan önce karşılaştırmak zordu. Her gün dağıtım yapılmasına rağmen performans iyileştirmeleri üzerinde çalışan geliştiriciler için yaklaşık bir günlük geri bildirim döngüsü yaşandı.
Kurtarıcınız Web Vitals ve Lighthouse
Yeni kurulumumuza uyum sağlamadığı için şirket içi metriklerimizden tamamen memnun kalmadık. Daha da önemlisi, müşteri deneyimi odaklı değildi. Core Web Vitals'a, sıkıştırılmış, ancak kapsamlı ve kullanıcı odaklı bir metrik grubu sağladıklarından geçiş yaptık.
Yayın öncesinde performansı iyileştirmek için uygun bir laboratuvar ortamı oluşturmamız gerekiyordu. Bu sayede, alan verilerimizin 90. yüzdelik dilimindeki test koşullarının yanı sıra tekrarlanabilir ölçümler elde ettik. Artık performans iyileştirmeleri üzerinde çalışan mühendisler en büyük etkiyi yaratmak için çalışmalarını nereye odaklayacaklarını biliyorlardı. Lighthouse denetim raporlarını zaten yerel olarak kullanıyorduk. Bu nedenle ilk iterasyonumuz, değişikliklerin hazırlık ortamımızdan test edilebileceği Lighthouse düğüm modülüne dayalı bir hizmet geliştirmekti. Bu da yaklaşık bir saatlik güvenilir performans geri bildirim döngüsünü sağladı. Bu da performansı eşit düzeye çıkarmamızı ve sürümümüzü kaydetmemizi sağladı.
Geliştiricilere pull istekleri hakkında performans geri bildirimi verme
Yalnızca performansa reaktif olmakla kalmayıp aynı zamanda proaktif olma fırsatını değerlendirmek istediğimiz için bunlarla yetinmek istemedik. Lighthouse düğüm modülünden Lighthouse CI (LHCI) sunucusuna geçiş yapmak zor olmadı. Mevcut şirket hizmetlerimizle daha iyi bir entegrasyon sağlamak için kendi kendine barındırılan çözümü tercih ettik. LHCI sunucu uygulamamız Docker görüntüsü olarak derlenir, ardından bu görüntü daha sonra bir PostgreSQL veritabanıyla birlikte Kubernetes kümemize dağıtılır ve GitHub'a rapor edilir.
Çerçevemiz geliştiricilere performansla ilgili geri bildirim sağlamaya başlamıştı. Bileşen paket boyutları her kayıtta eşik değerleriyle karşılaştırılıyordu. Artık Lighthouse metriklerini GitHub durum kontrolleri olarak raporlayabiliyoruz. Bunlar, performans eşiklerini karşılamamaları halinde CI ardışık düzeninin başarısız olmasına neden olur ve aşağıdaki görüntülerde gösterilen ayrıntılı Lighthouse raporlarının bağlantısıyla birlikte.
Performans kapsamını genişletme
Oldukça pragmatik bir yaklaşımla başladık. Şu anda Lighthouse yalnızca en önemli sayfalarımızdan ikisinde çalışmaktadır: ana sayfa ve ürün ayrıntıları sayfası. Neyse ki Lighthouse CI, çalıştırma yapılandırmalarının genişletilmesini kolaylaştırır. Web sitemizin belirli sayfalarında çalışan özellik ekipleri, eşleşen URL kalıplarını ve onaylamalarını ayarlayabilir. Bu kullanıma sunulduğunda, performans kapsamımızın artacağından oldukça eminiz.
Artık daha büyük sürümler oluştururken kendimize çok daha fazla güveniyoruz ve geliştiriciler, kodlarının performansı hakkında çok daha kısa bir geri bildirim döngüsünden yararlanabilir.