Lowe's Site Hızı Ekibi, otomatik bir performans testi ve izleme sistemi oluşturarak performans bütçelerine göre çekme isteklerini test eder ve üretime giden performans gerilemelerini önler.
Lowe's,yaklaşık 2.200 mağazası ve 300.000'den fazla çalışanı olan,yaklaşık 90 milyar dolarlık bir ev dekorasyonu perakendecisidir. Lowe's Site Hızı Ekibi, performans gerilemelerinin üretime dağıtılmasını önleyen otomatik bir test ve izleme sistemi oluşturarak web sitesinin performansını iyileştirdi ve en iyi perakende siteleri arasında yer aldı.
Sorun
Site Hızı Ekibi'nin hedefi, Lowe's sitesini sayfa yükleme performansı açısından en hızlı e-ticaret sitelerinden biri haline getirmektir. Lowe's web sitesi geliştiricileri, otomatik test ve izleme sistemlerini oluşturmadan önce üretim öncesi ortamlarda performansı otomatik olarak ölçemiyordu. Mevcut araçlar yalnızca üretim ortamında test yapardı. Sonuç olarak, üretime düşük kaliteli derlemeler eklendi ve kötü bir kullanıcı deneyimi oluştu. Bu düşük kaliteli derlemeler, Site Hızı Ekibi tarafından tespit edilip yazar tarafından geri alınana kadar üretimde kalır.
Çözüm
Site Hızı Ekibi, üretim öncesi ortamlar için otomatik bir performans testi ve izleme sistemi oluşturmak üzere açık kaynaklı araçlardan yararlandı. Sistem, her bir çekme isteğinin (PR) performansını ölçer ve Site Hızı Ekibi'nin performans bütçesini ve metrik ölçütlerini karşılamıyorsa PR'nin üretime gönderilmesini engeller. Sistem ayrıca SEO ve ADA uygunluğunu da ölçer.
Etki
16 hafta boyunca 102 derleme dağıtan 1 ekip örneğinde, otomatik performans testi ve izleme sistemi, düşük performans gösteren 32 derlemenin üretime geçmesini engelledi.
Site Hızı Ekibi'nin, performansta gerileme olduğunu geliştiricilere bildirmesi eskiden üç ila beş gün sürerken sistem artık geliştiricileri, üretim öncesi ortamda bir çekme isteği gönderdikten beş dakika sonra otomatik olarak performans sorunları hakkında bilgilendiriyor.
Performans gerilemeleriyle ilgili daha az çekme isteğinin işaretlenmesi, kod kalitesinin zaman içinde arttığını gösteriyor. Site Hızı Ekibi, site kalitesini sürekli olarak iyileştirmek için yönetim bütçelerini de kademeli olarak sıkılaştırıyor.
Genel olarak, sorunlu kodun net bir sahibi olması mühendislik kültürünü değiştirdi. Sorunları kimin neden olduğu hiçbir zaman net olmadığı için isteksiz bir şekilde reaktif düzeltmeler yapmak yerine ekip, sorunlu kodun sahipliği objektif olarak atanabilirken proaktif optimizasyonlar yapabilir.
Uygulama
Site Hızı Yönetimi (SSG) uygulamasının merkezinde Lighthouse CI yer alır. SSG uygulaması, her bir çekme isteğinin sayfa performansını doğrulamak ve denetlemek için Lighthouse'u kullanır.
SSG uygulaması, Site Hızı Ekibi'nin tanımladığı performans bütçesine ve metrik hedeflerine ulaşılmaması durumunda derlemenin başarısız olmasına neden olur. Yalnızca yükleme performansını değil, SEO'yu, PWA'yı ve erişilebilirliği de zorunlu kılar. Durumu yazarlara, incelemecilere ve SRE ekiplerine anında bildirebilir. Ayrıca, istisna gerektiğinde kontrolleri atlayacak şekilde yapılandırılabilir.
Otomatik Hız Yönetimi (ASG) süreç akışı
Spinnaker
Başlangıç noktası. Bir geliştirici, kodunu bir üretim öncesi ortamıyla birleştirir.
- Ön prodüksiyon ortamını CDN öğeleriyle dağıtın.
- Dağıtımın başarılı olup olmadığını kontrol edin.
- ASG uygulamasını oluşturmaya başlamak veya dağıtım hatası durumunda bildirim göndermek için bir Docker kapsayıcısı çalıştırın.
Jenkins ve Lighthouse
- ASG uygulamasını Jenkins ile derleyin.
- Chrome ve Lighthouse'un yüklü olduğu özel bir Docker container çalıştırın.
SSG uygulamasından
lighthouserc.jsondosyasını indiriplhci autorun --collect-url=https://example.comdosyasını çalıştırın.
Jenkins ve SSG uygulaması
- lhci'den
assertion-results.json'ü ayıklayın vebudgets.json'daki önceden tanımlanmış bütçelerle karşılaştırın. Çıktıyı metin dosyası olarak kaydedip gelecekteki karşılaştırmalar için Nexus'a yükleyin. - Mevcut
assertion-results.json'ü son başarılı derlemeyle (Nexus'tan indirilen) karşılaştırın ve metin dosyası olarak kaydedin. - Başarı veya başarısızlık bilgilerini içeren bir HTML e-postası oluşturun.
- Jenkins ile e-postayı ilgili dağıtım listelerine gönderin.