Birçok şirkette, web sitesi hızı performansı ve Önemli Web Verileri hâlâ çoğunlukla mühendislik ekiplerinin sorumluluğu olarak görülüyor. İşletmenin ve müşteri deneyiminin değeri anlaşılmazsa site hızı, işletmenin diğer alanları için görünmez hale gelebilir. Bu, önemli kararlar alınırken ve yol haritaları tanımlanırken performansın göz ardı edilmesine neden olabilir.
Lüks e-ticaret moda perakendecisi Farfetch, ekipler genelinde performans kültürünü iyileştirmek ve web deneyimlerinde önemli iyileştirmeler sağlamak için gerçek müşteri merkezli performans ölçümlerini tanımlamaya ve kullanmaya yönelik bir proje başlattı. Performansın şirketin KPI’larını nasıl etkilediğini aydınlatmanın bir yolu olarak bunları iş ölçümleriyle ilişkilendirmeyi amaçladılar.
Hırsları bununla da bitmedi. Nihayetinde, projenin amacı, geniş ölçekte kültürel değişimdi – organizasyon içindeki siloları yıkmak ve eskiden teknik konular olarak kabul edilen konular hakkında herkese ortak bir konuşma yolu sağlamak için iş odaklı yeni bir dil getirmekti. Farfetch, paylaşılan bir sorumluluk olarak web sitesi hız performansına sahip olmak, bilgiye dayalı karar vermeyi kolaylaştırmak ve bunu iyi bir web deneyimi yapan şeyin ana direği olarak yerleştirmek istedi.
Başlamak için Farfetch, tek bir departmanın bunu daha önce olduğu 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şturarak adım adım bir strateji uygulamaya koydu. şirketin bu konuya bakış açısını yenilemek için.
1. Adım: Metrikleri tanımlama, ölçme ve izleme #
Her şeyden önce, Farfetch’in yolculuk temas noktaları ve uygulamalarındaki mevcut durumu ve sapmaları anlamak için doğru izleme araçlarına sahip olması gerekiyordu.
Core Web Vitals’i izlemek için hem laboratuvar verilerini hem de gerçek kullanıcı izlemeyi (saha verileri) ve hız performansının mevcut durumunu analiz etmek için ek kullanıcı merkezli performans ölçümlerini kullandılar. JavaScript kullandılar ve web-vitals.js kütüphane ürün analitiği ekibinin aynı oturumda iş metriklerinin yanı sıra performans metriklerinin de görünürlüğünü kazanmasına ve böylece birinin diğerini nasıl etkilediğini incelemeye başlamasına olanak tanıyan verileri yakalamak.
Multidisipliner grup, hangi metriklerin işletme için en önemli olduğunu anlamak için yola çıktı. Bunu yapmak için, Farfetch kullanıcılarının kritik yolculuk yoluna baktılar ve bu yolculuğu performans belirteçleriyle ilişkilendirmeye çalıştılar. Google’ın ana hatlarıyla belirttiği ve her biri kullanıcı deneyiminin farklı bir yönünü temsil eden Önemli Web Verileri ölçümlerine ek olarak, İlk Bayta Kadar Süre (TTFB), İlk İçerikli Boyama (FCP), İlk Boyama ve Bitiş Süresini izlemek için özel JavaScript kullandılar. Etkileşimli (TTI).
Metrikler, çeşitli yöntemler kullanılarak toplanır. Performans API’sı, Uzun Görevler API’sı ve Google’ın çoklu dolguları. Daha fazla ayrıntı şu adreste bulunabilir: bu 2020 ortası Farfetch Tech Blog gönderisi Web Kıdemli Baş Mühendisi Manuel Garcia tarafından.
Veri analitiği tarafında, Farfetch, Omnitracking adı verilen ön uç uygulamalar tarafından kullanılan kendi çok kanallı izleme çözümüne sahiptir. Sayfa görünümleri, kullanıcı eylemleri ve sistem eylemleri tarafından oluşturulan olayları izler. Omnitracking Veri Modeli, Farfetch’in izleyiciler tarafından oluşturulan olayların üzerine yapılan analitik, veri keşfi ve raporlama durumları için çözümüdür. Veri modelinin amacı, aşağıdakileri anlaması gereken herkese yardım etmek 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
O zaman fikir, farfetch.com’daki her sayfa görüntülemenin JavaScript tarafından yakalanan performans verilerini bu veri katmanına eklemekti. Bu modeli takip etmek, her oturum için performans verileri ile ana dönüşüm hunisi metrikleri arasında bir eşleşme ve konuyla ilgili analitik bir keşif için temel sağlar.
Son olarak Farfetch, ana yolculuk sayfalarındaki her metrik için zamana dayalı performans bütçeleri ve bütçe ihlallerini ele alacak bir yönetişim süreci oluşturdu. Ayrıca, geliştirme akışındaki bütçe sapmalarını mümkün olan en kısa sürede anlamak için performans ölçümlerini CI ardışık düzenlerine dahil etmeye başladılar.
2. Adım: İş diliyle iletişim kurmak #
Farfetch’in dahili iş zekası veri kümelerinde artık mevcut olan performans verileriyle, analitik ekibi, performans ölçümleri ile iş KPI’ları (örneğin, dönüşüm oranı ve tek sayfalık ziyaretlerin yüzdesi) arasında bir korelasyon gösterebilecek verilerdeki matematiksel modelleri ve kalıpları keşfetmeye başladı. işletme için site hızının ve kullanıcı deneyiminin mali etkisine ilişkin yeni bir bakış açısı sağlar. Bu, performansın iş karar vericileri ile ortak bir dilde tartışılmasını sağladı. Analiz, tüm Önemli Web Verilerini ve Farfetch’in değerli bulduğu diğer ölçümleri içeriyordu. Gerçekten etkili içgörüler ortaya çıkardı.
Farfetch, Google’ın optimum kullanıcı deneyimi sağlamak için Largest Contentful Paint’in (LCP) 2,5 saniyenin altında kalmasını önerdiğini göz önünde bulundurarak bu eşiği dikkatle inceledi ve anlamlı sonuçlar buldu.
Farfetch istatistiksel korelasyon analizi, bu noktanın ötesinde, çıkış oranının artmasının yanı sıra dönüşüm oranının düşmeye başladığını gösterdi. Bu, kullanıcıların gerçekten yavaş sayfa yükleme algısının dezavantajını hissetmeye başladığını ve LCP’nin her 100 ms’lik artışıyla dönüşüm oranının ortalama -%1,3 azaldığını gösteriyor.
Farfetch ayrıca, Kümülatif Düzen Kayması (CLS) puanındaki her 0,01 daha az için çıkış oranında %3,1’lik bir düşüş olduğunu doğrulayarak, kullanıcıları bir web sitesinde tutmak için sayfa kararlılığının etkisini yeniden doğruladı.
Sayfa etkileşimi ve akışkanlığı ile ilgili olarak, İlk Giriş Gecikmesi (FID) sürekli olarak izlense ve analiz edilse de Farfetch, Farfetch iş dönüşüm hunisi için oldukça etkili bir ölçüm olduğu kanıtlanan TTI’yi de ölçer.
Bunun için enjekte ettiler Google’ın TTI çoklu dolgusu bu metriği depolamak için web sitesine. Uzun görevleri raporlamak için Uzun Görevler API’sini kullanma (tarayıcının ana iş parçacığında 50 milisaniyeden uzun süren görevler).
Analitik ekibi daha sonra, TTI’daki her saniyelik düşüş için dönüşüm oranının %2,8 arttığını ve daha iyi kod verimliliği ve tarayıcının ana ileti dizisinin tıkanmasını gidermek için güçlü bir gerekçe oluşturduğunu bulabildi.
Sonuç olarak bu analiz, bazı metriklerin iş KPI’ları üzerinde önemli bir etkisinin olmadığını veya bazılarının kullanıcı yolculuğunun farklı aşamalarında daha alakalı olduğunu da gösterebildi. Bu, dönüşüm hunisinin her noktasında eldeki fırsatların tam olarak anlaşılmasını sağladı.
3. Adım: Kültürel değişimi yerleştirmek #
Site hızına ilişkin kullanıcı algısına ilişkin nitel kullanıcı araştırmasının yanı sıra yukarıdaki içgörüleri sergilemek, şirket hedefleriyle uyum sağlamak, yönetici düzeyinde farkındalığı güvence altına almak ve ürün yol haritalarında performansa dayalı karar verme için katılım sağlamak için çok önemliydi. Farfetch için performansın ne kadar değerli olduğunu kanıtlamak artık mümkündü.
Önceliklendirmeyi kolaylaştırmak için Farfetch, Site Hızı İş Durum Hesaplayıcısı adını verdikleri bir self servis araç oluşturdu. Google’ın Hız Etki Hesaplayıcısı. Herhangi bir ürün yöneticisinin iş etkisini anında hesaplayarak performans iyileştirmelerinden bir iş gerekçesi oluşturmasına olanak tanır. Dönüşüm oranı ile kullanıcı deneyimi metrikleri arasındaki ilişkiyi kullanan bir veri modeliyle, farklı ürün kapsamlarına, cihazlara ve kullanıcı yolculuğu temas noktalarına uyum sağlamak için esnektir.
Bu arada, bir dizi self-servis analitik pano, gerçek zamanlı performans göstergelerinin ve bunların iş üzerindeki etkilerinin işletme çapında görünürlüğünü sağladı. Performans artık ürün geliştirmeye tamamen entegre hale geliyor ve ürün ekipleri ölçümlere, denetim araçlarına ve performans bütçesi izlemeye kolay erişimin keyfini çıkarıyor. Ayrıca, veri katmanı entegrasyonu nedeniyle, performans ölçümleri Farfetch A/B test araçlarında da mevcuttur ve bu da ürün yöneticilerine başka bir güçlü içgörü vektörü sağlar.
Son aylarda çekirdek ekip, ana mikro hizmetlerin ve işlemlerin etkisini izlemek ve kanıtlamak için benzer metodolojiler kullanarak bu kültürü yalnızca ön uç geliştirme ekiplerinde değil, aynı zamanda platform alanında da yerleştirme yolunda ilerliyor.
bir dizi oldu Farfetch güdümlü sunumlar bu konuyla ilgili değil, aynı zamanda harici sözler. Örneğin, hakkında bir söz Önemli Web Verilerinin iş üzerindeki etkisi hakkında bir 2021 Google I/O konuşması. Bu aynı zamanda temaya sürekli olarak ilgi gösterilmesine katkıda bulundu ve ekibin kültür stratejisini sağlamlaştırdı.
4. Adım: Metrikleri iyileştirme #
Sonunda, tüm bu çalışmaların Farfetch’e web sitesi hız ölçümlerini nesnel olarak iyileştirmesine ve ekiplerinin sınıfının en iyisi uygulamalarını takip etmesini ve geliştirme fırsatlarını takip etmesini garanti etmesine katkıda bulunması gerekiyordu.
2021’de tespit edilen ana fırsatlardan biri, Farfetch’in iki ana sayfa türü olan ürün sayfaları ve ürün listeleme sayfaları üzerinde LCP’yi iyileştirme ihtiyacıydı.
Ekipler, bu sayfaların ana içeriğini nasıl yüklediklerini ele aldı. Bu fırsatı kovalamanın etkisini gösteren bir iş vakasıyla donanmış olarak, şunları yapabildiler:
- Ürün resmi yükleme bileşenini JavaScript tabanlı bir çözümden yerel bir uygulamaya uyarlayın.
- Görüntülerin önceliğini tanımlayın ve bunları kritik ve kritik olmayan varlıklara ayırın.
- Kaynak zaten HTML’de satır içi olacak şekilde ve kullanarak kritik görüntüleri erkenden yükleyin
<link rel="preload">böylece en kısa sürede indirirler. - Kullan
<img loading="lazy">Safari gibi desteklenmeyen tarayıcılarda Kesişme Gözlemcisi kullanan bir çoklu dolgu ile kritik olmayan görüntüler için öznitelik.
Bununla iğneyi hareket ettirebildiler ve hipotezi ve iş etkisini A/B testi yoluyla kanıtlayabildiler. Örneğin, ürün sayfalarında bu çaba 600ms’den fazla azaldı ve A/B testi, şirketin tanımladığı güven düzeyiyle dönüşüm oranında %1-5 aralığında bir artış gösterdi.
Google’ın LCP puanı tanımına göre “iyi”, “geliştirilmesi gerekiyor” ve “zayıf” olarak değerlendirilen sayfa görüntüleme yüzdesi açısından ekibin yapabildiği iyileştirmeler aşağıda verilmiştir.
Daha hızlı bir sitenin ve daha iyi çalışma uygulamalarının ödülleri #
Performans ve iş senaryosu hesaplayıcı gibi araçlar etrafında bir kültür oluşturmak, herkesin ürün yöneticileri, paydaşlar ve benzer şekilde mühendisler tarafından anlaşılabilecek ortak bir dil konuşmaya başlamasını sağladı. Bu, yeni girişimlere ve performans geliştirmelerine nasıl öncelik verileceği konusunda devam eden tartışmaları hızlandırdı.
Farfetch’in Web Kanalları Kıdemli Baş Ürün Müdürü Rui Santos, “Yalnızca mühendislik ekibinin sahip olduğu ve yalnızca mühendislik ekibinin sahip olduğu bir sorun olarak performans döngüsünü kırmak istedik” diye açıklıyor. “Performans metriklerini iş metrikleriyle birleştirmek, mesajı çok, çok hızlı bir şekilde iletmek için şaşırtıcı derecede etkiliydi. İş şirketi yönlendiriyor ve başarısını hız metriklerine bağlamak, daha geniş bir paydaş grubunu takas 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 hizmet kalitenizi bir bütün olarak nasıl gördüğünü belirleyebilir. Kullanıcılar için kalite, lüks anlamına gelir ve bu, web sitenizin performansı da dahil olmak üzere, deneyimlerinin her yönü için geçerlidir. Site hızının dönüşüm oranı üzerinde kanıtlanmış bir etki oluşturmasıyla, performans artık Farfetch’te ileriye dönük planlamada güvenli bir konuma sahip.