Lowe'un web sitesi en hızlı performans gösteren e-ticaret web siteleri arasındadır

Lowe's Site Speed Ekibi, otomatik bir performans testi ve izleme sistemi oluşturarak istekleri performans bütçelerine göre test eder ve üretime giren performans gerilemelerini önler.

Abhimanyu Raibahadur
Abhimanyu Raibahadur
Ashish Choudhury
Ashish Choudhury
Dhilip venkatesh Uvarajan
Dhilip venkatesh Uvarajan
Dinakar Chandolu
Dinakar Chandolu
Garima Mimani
Garima Mimani
Safwan Samla
Safwan Samla

Lowe's, yaklaşık 90 milyar ABD doları değerinde bir ev tadilatı perakendecisidir. Yaklaşık 2.200 mağaza işletiyor ve 300.000'den fazla çalışanı var. Performans gerilemelerinin üretime dağıtılmasını önleyen otomatik bir test ve izleme sistemi oluşturan Lowe's Site Speed Ekibi web sitesinin performansını artırarak en iyi perakende siteleri arasındaki sıralamayı elde etti.

Sorun

Site Hızı Ekibi'nin hedefi, sayfa yükleme performansı açısından Lowe'un sitesini en hızlı e-ticaret sitelerinden biri yapmaktır. Lowe'un web sitesi geliştiricileri, otomatik test ve izleme sistemlerini oluşturmadan önce, üretim öncesi ortamlarda performansı otomatik olarak ölçemiyordu. Mevcut araçlar, testleri yalnızca üretim ortamında yürütüyordu. Sonuç olarak, kötü yapılar üretime atılarak kötü bir kullanıcı deneyimi oluşturuyor. Bu düşük kaliteli derlemeler, Site Hızı Ekibi tarafından tespit edilip yazar tarafından geri alınıncaya 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 kaynak araçlardan yararlandı. Sistem, her ç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'yi gönderimden üretime geçirir. Sistem, SEO ve ADA uyumluluğunu da ölçer.

Etki

16 hafta boyunca 102 derleme dağıtan 1 ekip örneğinden elde edilen otomatik performans testi ve izleme sistemi, ortalamanın altında performansa sahip 32 derlemenin üretime girmesini engelledi.

Eskiden Site Hızı Ekibi'nin geliştiricilere performans regresyonlarını üretime gönderdiklerini bildirmeleri için üç ila beş güne ihtiyaç duyuluyordu. Artık sistem, üretim öncesi ortamda bir pull isteği gönderdikten sonra beş dakika sonra performans sorunlarını otomatik olarak bildiriyor.

Performans regresyonları için daha az pull isteğinin işaretlenmesiyle ölçülen, kod kalitesi zamanla gelişir. Site Hızı Ekibi ayrıca, site kalitesini sürekli olarak iyileştirmek amacıyla yönetim bütçelerini kademeli olarak daraltmaktadır.

Genel olarak, sorunlu kodun açık bir şekilde sahiplenilmesi mühendislik kültürünü değiştirmiştir. Ekip, sorunları gerçekten kimin çıkardığı belli olmadığı için reaktif düzeltmeler yapmak yerine, sorunlu kodun objektif şekilde ilişkilendirilebileceği proaktif optimizasyonlar yapabilir.

Uygulama

Lighthouse CI, Site Hızı Yönetimi (SSG) uygulamasının temelini oluşturur. SSG uygulaması, her pull isteğinin sayfa performansını doğrulamak ve denetlemek için Lighthouse'u kullanır.

SSG uygulamasının süreç diyagramı olan şemada gösterilen adımlar, makalenin ilerleyen kısımlarında açıklanmıştır.

SSG uygulaması, Site Hızı Ekibi'nin tanımlı performans bütçesine ve metrik hedeflerine ulaşılmazsa bir derlemenin başarısız olmasına neden olur. Yalnızca yükleme performansını değil, aynı zamanda SEO, PWA ve erişilebilirliği de zorunlu kılar. Durumu yazarlara, incelemecilere ve SRE ekiplerine anında bildirebilir. İstisnalar gerektiğinde kontrolleri atlayacak şekilde de yapılandırılabilir.

Otomatik Hız Yönetimi (ASG) süreç akışı

Spinnaker

Başlangıç noktası. Geliştirici, kodunu üretim öncesi ortamda birleştirir.

  1. CDN öğeleriyle üretim öncesi ortamı dağıtın.
  2. Dağıtımın başarılı olup olmadığını kontrol edin.
  3. ASG uygulamasını derlemeye başlamak veya (dağıtım hatası durumunda) bir bildirim göndermek için bir Docker container'ı çalıştırın.

Jenkins ve Lighthouse

  1. ASG uygulamasını Jenkins ile derleyin.
  2. Chrome ve Lighthouse yüklü özel bir Docker container'ı çalıştırın. SSG uygulamasından lighthouserc.json öğesini çekin ve lhci autorun --collect-url=https://example.com komutunu çalıştırın.

Jenkins ve SSG uygulaması

  1. Lhci'den assertion-results.json çıkarın ve budgets.json içindeki önceden tanımlanmış bütçelerle karşılaştırın. Çıkışı metin dosyası olarak kaydedin ve daha sonraki karşılaştırmalarda kullanmak için Nexus'a yükleyin.
  2. Mevcut assertion-results.json dosyasını, son başarılı derlemeyle (Nexus'tan indirilen) karşılaştırın ve metin dosyası olarak kaydedin.
  3. Başarı veya başarısızlık bilgilerini içeren bir HTML e-postası oluşturun.
  4. Jenkins ile e-postayı ilgili dağıtım listelerine gönderin.