Bu e-ticaret moda perakendecisi, Core Web Vitals ve performans metriklerini işletme metrikleriyle ilişkilendirdi, TPG'lerde artış elde etti ve ürün kararlarını desteklemek ve performans kültürünü yönlendirmek için bir "Performans İşletme Durumu Hesap Makinesi"ni oluşturdu.
Pek çok şirkette web sitesi hızı performansı ve Önemli Web Verileri, hâlâ mühendislik ekiplerinin sorumluluğu olarak görülmeye devam ediyor. İşletme ve müşteri deneyimi yeterince anlaşılmıyorsa site hızı işletmenin diğer alanları tarafından görülmeyebilir. Bu da önemli kararlar alınırken ve yol haritaları belirlenirken performansın gözden kaçmasına neden olabilir.
Ekipler genelinde performans kültürünü iyileştirmek ve web deneyimlerinde önemli gelişmeler sağlamak için lüks e-ticaret moda perakendecisi Farfetch, gerçek müşteri odaklı performans metriklerini tanımlamaya ve kullanmaya yönelik bir proje başlattı. Bu çalışmaların amacı, performansın şirketin TPG'lerini nasıl etkilediğini göstermek için bu metrikleri işletme metrikleriyle ilişkilendirmekti.
Ama tutkuları bununla bitmedi. Sonuç olarak, projenin hedefi geniş çaplı kültürel değişimdi. Kuruluş içindeki kopuklukları ortadan kaldırmak ve eskiden teknik konular olarak düşünülen konular hakkında herkesin ortak bir yol çizmesini sağlamak için iş odaklı yeni bir dil kullanıma sunmaktı. Farfetch, web sitesi hız performansını ortak bir sorumluluk olarak görmek, bilinçli karar almayı kolaylaştırmak ve bunu iyi bir web deneyiminin temel yapı taşı olarak yerleştirmek istiyordu.
![Hızı, geliştiricinin sorumluluğu ile ortak bir sorumluluk olarak karşılaştırarak hızı karşılaştıran bir diyagram. İlk örnekte her aşama birbirinden ayrı tutulur, ikinci aşamada ise her aşama aynı silo içinde gerçekleşir.](https://web.dev/static/case-studies/farfetch/image/a-diagram-contrasting-spe-81025e3b51a84.png?authuser=6&hl=tr)
Farfetch ilk olarak bunu tek bir departmanın eskisi gibi başaramayacağını fark etti ve şirketin çeşitli alanlarından (mühendislik, altyapı, mimari ve ürün) uzmanlardan oluşan çekirdek bir ekip oluşturdu. Ekip, şirketin bu konuya olan bakışını yenilemek için adım adım bir strateji oluşturdu.
1. Adım: Metrikleri tanımlama, ölçme ve izleme
Her şeyden önce, Farfetch'ın yolculuk temas noktaları ve uygulamalarındaki mevcut durumu ve sapmaları anlamak için doğru izleme araçlarına sahip olması gerekiyordu.
Önemli Web Verileri'ni izlemek için hem laboratuvar verilerinden hem de gerçek kullanıcı izleme özelliğinden (alan verileri) yararlandılar. Bunun yanı sıra, hız performansının mevcut durumunu analiz etmek için kullanıcı odaklı performans metriklerini de kullandılar. Verileri toplamak için JavaScript'i ve web-vitals.js
kitaplığını kullandılar. Bu da ürün analizi ekibinin aynı oturumda iş metriklerinin yanı sıra performans metriklerini de görmesini ve böylece birinin diğerini nasıl etkilediğini incelemeye başlamasını sağladı.
Multidisipliner grup, işletme açısından en önemli metrikleri anlamak için işe koyuldu. Bunu yapmak için Farfetch kullanıcılarının kritik yolculuğunu incelediler ve bu yolculuğu performans işaretçileriyle ilişkilendirmeye çalıştılar. Google'ın ana hatlarıyla belirttiği Önemli Web Verileri metriklerine ek olarak, her biri kullanıcı deneyiminin farklı bir yönünü temsil eden özel JavaScript kullanarak İlk Bayt Zamanı (TTFB), İlk Zengin İçerikli Boyama (FCP), İlk Boyama ve Etkileşime Hazır Olma Süresi (TTI) metriklerini de kullandılar.
Metrikler; Performance API, Long Tasks API ve Google'ın çoklu dolguları kullanılarak toplanır. Web'de Kıdemli Baş Mühendis olan Manuel Garcia'nın 2020 yılının ortalarında Farfetch Tech Blogu yayınlarından daha fazla bilgi edinebilirsiniz.
Veri analizi tarafında ise Farfetch, Omnitracking adı verilen kullanıcı arabirimi uygulamaları tarafından kullanılan kendi çok kanallı izleme çözümüne sahiptir. Sayfa görüntülemeleri, kullanıcı işlemleri ve sistem işlemlerinin oluşturduğu etkinlikleri izler. Omniİzleme Veri Modeli, Farfetch'ın analiz, veri keşfi ve raporlama durumlarına yönelik çözümüdür. Bu çözüm, izleyiciler tarafından oluşturulan etkinliklere ekleme yapar. Veri modelinin amacı, aşağıdakileri anlaması gereken herkese yardımcı olmak ve onları desteklemektir:
- Kullanıcı davranışı
- Farfetch uygulamalarında kullanıcı deneyimi
- Uygulama kullanımı
- Makro ve mikro dönüşümler
- Kanallar arası ve dönüşüm hunisi analizi
Buradaki fikir, farfetch.com'daki her bir sayfa görüntülemenin JavaScript tarafından yakalanan performans verilerini bu veri katmanına eklemekti. Bu modelin uygulanması, her bir oturum için performans verileri ile ana dönüşüm hunisi metrikleri arasında bir eşleşme ve konuyla ilgili analitik keşfin temeli arasında bir eşleşme olmasını garanti etmiştir.
Son olarak Farfetch, ana yolculuk sayfalarında her metrik için zamana dayalı performans bütçeleri ve bütçe ihlallerini ele almak üzere bir yönetim süreci oluşturdu. Ayrıca geliştirme akışında bütçe sapmalarını en kısa sürede anlamak için CI ardışık düzenlerine performans metriklerini dahil etmeye başladılar.
2. Adım: İşletme dilini kullanarak iletişim kurma
Performans verilerinin artık Farfetch'ın şirket içi iş zekası veri kümelerinde mevcut olmasıyla analiz ekibi, verilerde performans metrikleri ile işletme TPG'leri (örneğin, dönüşüm oranı ve tek sayfalık ziyaretlerin yüzdesi) arasında bir ilişki olduğunu gösterebilecek matematiksel modelleri ve kalıpları keşfetmeye başladı. Böylece, site hızı ve kullanıcı deneyiminin işletme açısından finansal etkisi yeni bir bakış açısıyla ortaya çıktı. Bu, performansın işletmeyle ilgili karar mercileriyle ortak bir dille konuşulabilmesini sağladı. Analiz, tüm Önemli Web Verileri ve Farfetch'ın değerli bulduğu diğer metrikleri içeriyordu. Gerçekten etkili bilgiler ortaya çıkardı.
Google'ın, ideal kullanıcı deneyimini sağlamak için Largest Contentful Paint (LCP) değerinin 2,5 saniyenin altında kalmasını önerdiğini düşünen Farfetch, bu eşiği dikkatle inceledi ve anlamlı sonuçlar buldu.
Farfetch istatistiksel korelasyon analizi, bu noktadan sonra dönüşüm oranının düşmeye başladığını ve çıkış oranının yükseldiğini göstermiştir. Bu, kullanıcıların yavaş sayfa yükleme algısının dezavantajlı olduğunu hissetmeye başladığını ve her 100 ms.daha uzun LCP ile dönüşüm oranının ortalama% 1,3 azaldığını gösteriyor.
![Y ekseninin dönüşüm oranı ile sayfa ziyaretlerinin yüzdesi ve X ekseninin LCP süresi olduğu bir LCP grafiği. LCP daha hızlı arttıkça, tek sayfalık ziyaretlerin yüzdesi azalır ve dönüşüm oranı artar.](https://web.dev/static/case-studies/farfetch/image/a-graph-lcp-where-y-ax-17f98c162afc.png?authuser=6&hl=tr)
Farfetch, ayrıca Cumulative Layout Shift (CLS) puanındaki her 0,01 düşüş için çıkış oranında% 3,1 oranında düşüş olduğunu doğrulayarak kullanıcıları web sitesinde tutmak için sayfa kararlılığının etkisini bir kez daha teyit etti.
![Y ekseninin dönüşüm oranı ile sayfa ziyaretlerinin yüzdesi, X ekseninin CLS puanı olduğu CLS grafiği. En düşük CLS puanları, tek sayfalık ziyaretlerin en yüksek yüzdesini gösterir. Dönüşümler ise daha düşük CLS puanlarında artar.](https://web.dev/static/case-studies/farfetch/image/a-graph-cls-where-y-ax-da95352df4937.png?authuser=6&hl=tr)
İlk Giriş Gecikmesi (FID) sürekli olarak takip edilip analiz edilse de, sayfa etkileşimi ve akışkanlığı ile ilgili olarak Farfetch, Farfetch iş dönüşümü dönüşüm hunisi için son derece etkili bir metrik olan TTI'yı da ölçmektedir.
Bunun için, bu metriği depolamak üzere web sitesine Google'ın TTI çoklu dolgusunu yerleştirdiler. Uzun görevleri (tarayıcının ana iş parçacığında 50 milisaniyeden uzun süren görevler) raporlamak için Uzun Görevler API'sını kullanma.
Bunun ardından, analiz ekibi, TTI'daki her saniye azalmada dönüşüm oranının% 2,8 arttığını gördü.Bu da, daha iyi kod verimliliği için güçlü bir argüman sundu ve tarayıcının ana iş parçacığının açılmasını sağladı.
![Y ekseninin dönüşüm oranı ile tek sayfalık ziyaretlerin yüzdesi ve X ekseninin TTI süresi olduğu bir TTI grafiği. TTI süresi arttıkça, dönüşüm oranı azalır ve tek sayfalık ziyaretlerin yüzdesi artar.](https://web.dev/static/case-studies/farfetch/image/a-graph-tti-where-y-ax-64833dcd51ddc.png?authuser=6&hl=tr)
Sonuç olarak bu analiz, bazı metriklerin işletme TPG'leri üzerinde önemli bir etkiye sahip olmadığını veya bazılarının kullanıcı yolculuğunun farklı aşamalarında daha alakalı olabileceğini de gösterdi. Bu sayede, dönüşüm hunisinin her bir noktasında mevcut olan fırsatların tam olarak anlaşılması sağlandı.
3. Adım: Kültürel değişimi benimseme
Yukarıdaki analizlerin yanı sıra kullanıcıların site hızıyla ilgili algısı hakkında yapılan nitel kullanıcı araştırması, şirket hedefleriyle uyumun sağlanması, yönetici düzeyinde farkındalık sağlanması ve ürün yol haritaları genelinde performansa dayalı kararların benimsenmesi açısından çok önemliydi. Artık Farfetch için performansın ne kadar değerli olduğunu kanıtlamak mümkün olmuştu.
Farfetch, öncelikleri belirlemeyi kolaylaştırmak için Google'ın Hız Etki Hesaplayıcı aracından esinlenerek Site Hızı İş Durumu Hesaplama Aracı adını verdiği self servis bir araç geliştirdi. Tüm ürün yöneticilerinin işletme üzerindeki etkisini anında hesaplayarak performans iyileştirmelerinden bir iş senaryosu oluşturmasına imkan sağlar. Dönüşüm oranı ve kullanıcı deneyimi metrikleri arasındaki ilişkiyi kullanan bir veri modeli sayesinde farklı ürün kapsamlarına, cihazlara ve kullanıcı yolculuğu temas noktalarına uyarlanabilir.
![Farfetch'ın Site Hızı İş Olayı Hesaplama Aracı'nın ekran görüntüsü.](https://web.dev/static/case-studies/farfetch/image/a-screenshot-farfetchs-938300a6a924b.png?authuser=6&hl=tr)
Bu arada, bir dizi self servis analitik gösterge tablosu, gerçek zamanlı performans göstergelerinin ve bunların işletme üzerindeki etkisinin işletme genelinde görülebilmesini sağladı. Performans artık ürün geliştirme sürecinin bir parçası hâline geliyor. Ürün ekipleri de metriklere, denetim araçlarına ve performans bütçesi izlemesine kolayca erişebiliyor. Dahası, veri katmanı entegrasyonu sayesinde performans metrikleri, Farfetch A/B test araçlarında da kullanılabilir. Böylece ürün yöneticilerine bir başka güçlü analiz vektörü sunulur.
Son aylarda çekirdek ekip, temel mikro hizmetlerin ve işlemlerin etkisini izlemek ve kanıtlamak için benzer metodolojiler kullanarak bu kültürü yalnızca kullanıcı arabirimi geliştirme ekiplerinde değil, platform alanında da oluşturma konusunda işe yaradı.
Bu konu üzerinde Farfetch'ten yola çıkarak birçok sunu yapılmış olsa da dışarıdan bahsedildi. Örneğin, 2021'de Google I/O'da Core Web Vitals'ın işletme üzerindeki etkisiyle ilgili bir konuşmada bahsetmiş olabilirsiniz. Bu, temayla sürekli alakalı olmalarına da katkıda bulundu ve ekibin kültür stratejisini sağlamlaştırdı.
4. Adım: Metrikleri iyileştirme
Nihayetinde tüm bu çalışmaların, Farfetch'ın web sitesi hız metriklerini nesnel olarak iyileştirmesine katkıda bulunması ve ekiplerinin sınıfının en iyi uygulamalarını takip etmesini ve iyileştirme fırsatlarını izlemesini garanti etmesi gerekiyordu.
2021'de tespit edilen ana fırsatlardan biri, Farfetch'ın iki ana sayfa türü olan ürün sayfaları ve ürün listeleme sayfalarında LCP'yi iyileştirme ihtiyacıydı.
Ekipler bu sayfaların ana içeriğini nasıl yüklediklerini ele aldı. Bu fırsatın peşinde koşmanın etkisini gösteren bir iş gerekçesi ellerinde şunları başardılar:
- Ürün resmi yükleme bileşenini JavaScript tabanlı bir çözümden yerel uygulamaya uyarlayın.
- Resimlerin önceliğini tanımlayın ve bunları kritik ve kritik olmayan öğelere bölün.
- Kritik resimleri erkenden yükleyin. Kaynak zaten HTML'de satır içinde olmalı ve
<link rel="preload">
kullanarak bu resimlerin bir an önce indirilmesini sağlamalısınız. - Kritik olmayan görüntüler için, Safari gibi desteklenmeyen tarayıcılarda Intersection Observer kullanan bir çoklu dolguyla
<img loading="lazy">
özelliğini kullanın.
Bu sayede, A/B testi aracılığıyla ibreyi ve işletme üzerindeki etkiyi kanıtladılar. Örneğin, ürün sayfalarında bu çaba 600 ms'den fazla kısaltıldı ve A/B testi, şirketin tanımlı güven düzeyiyle dönüşüm oranında% 1-5 aralığında bir artış gösterdi.
Aşağıda, Google'ın LCP puanı tanımına göre"iyi", "iyileştirme gerekiyor " ve"kötü" olarak kabul edilen sayfa görüntülemelerin yüzdesi açısından ekibin yapabildiği iyileştirmeler aşağıda verilmiştir.
![Farfetch listeleme sayfaları için Core Web Vitals eşikleri genelindeki ortalama LCP'nin yığın çubuk grafiği. "İyi" eşiğindeki sayfaların oranı% 37'den %53'e yükselmiştir.](https://web.dev/static/case-studies/farfetch/image/a-stacked-bar-graph-medi-82d8eb75b571a.png?authuser=6&hl=tr)
![Farfetch listeleme sayfaları için Core Web Vitals eşikleri genelindeki ortalama LCP'nin yığın çubuk grafiği. "İyi" eşiğindeki sayfaların oranı% 36'dan %48'e yükselmiştir.](https://web.dev/static/case-studies/farfetch/image/a-stacked-bar-graph-medi-68b0207f7a34e.png?authuser=6&hl=tr)
Daha hızlı bir sitenin ve daha iyi çalışma uygulamalarının getirdiği avantajlar
Performans kültürü ve iş senaryosu hesaplayıcı gibi araçlar çevresinde bir kültür oluşturmak, herkesin ürün yöneticileri, paydaşlar ve mühendisler tarafından anlaşılabilecek ortak bir dil konuşmasına olanak tanıdı. Bu durum, yeni girişimlerin ve performans geliştirmelerinin nasıl önceliklendirileceği konusunda süregelen tartışmalara yol açtı.
Farfetch'ın Web Kanallar Kıdemli Baş Ürün Müdürü Rui Santos,"Performans döngüsünü kırmak ve yalnızca teknik konularla ilgilenmek ve düzeltmek için yalnızca mühendislik ekibine ait olmak istedik," diye açıklıyor. "Performans metrikleri ile işletme metrikleri arasında bağlantı kurmak, mesajı çok hızlı bir şekilde iletmede şaşırtıcı derecede etkili oldu. İşletme, şirketi yönlendiriyor ve başarı ile hız metrikleri arasında bağlantı kurmak, daha geniş bir paydaş grubunu değiş tokuş kararlarını anlamaya ve yönlendirmeye teşvik etti."
Lüks e-ticaret segmentinde, sitenizin hızlı veya yavaş olması tüketicilerin markanızı ve bir bütün olarak hizmet kalitenizi nasıl göreceğini belirler. Kullanıcılar için kalite lüks demek. Bu, web sitenizin performansı da dahil olmak üzere kullanıcı deneyimlerinin her yönü için geçerli. Site hızının dönüşüm oranı üzerinde kanıtlanmış bir etkisi olduğu için performans, Farfetch'da ileriye yönelik planlamada artık güvenli bir konumda yer alıyor.