Gerçek Kullanıcı Metrikleri ile Web Verilerini Nasıl Kıyaslama Yapılır ve İyileştirilir

Bu makale, geliştiricilerin sorunları müşterileri etkilenmeden önce belirlemelerine yardımcı olan ve kullanıcıların beklediği ve hak ettiği deneyim standardını sağlayan Raygun'daki sevgili arkadaşlarımız tarafından desteklenmiştir. Teşekkür ederim!

Performansı nasıl ölçersiniz? Bazen bir uygulamanın ilk istekten tam olarak işlenmesine kadar geçen süredir. Diğer zamanlarda, bir görevin ne kadar hızlı gerçekleştirildiği ile ilgilidir. Ayrıca, kullanıcının bir eylem hakkında geri bildirim almasının ne kadar sürdüğü de olabilir. Doğru bağlam sağlandığında, tüm bu tanımların (ve diğerlerinin) doğru olacağından emin olabilirsiniz.

Ne yazık ki, performansı ölçmek için gümüş kurşun yoktur. Farklı ürünlerin farklı kıyaslamaları olacaktır ve iki uygulama aynı metriklere göre farklı performans gösterebilir, ancak yine de öznel "iyi" ve "kötü" kararlarımıza oldukça benzer şekilde sıralanır.

Dili düzene sokmak ve işbirliğini ve standardizasyonu teşvik etmek amacıyla sektörümüz yaygın konseptler geliştirdi. Bu şekilde geliştiriciler, çözümleri paylaşabilir, öncelikleri belirleyebilir ve işlerin etkili bir şekilde yapılmasına odaklanabilir.

Performans ve Algılanan Performans

Bu pasajı örnek olarak alın:

 const sum = new Array(1000) .fill(0) .map((el, idx) => el + idx) .reduce((sum, el) => sum + el, 0) console.log(sum)

Bunun amacı önemsizdir ve konsola bir sayı çıktısı almak için önemli miktarda zaman harcamaktan başka bir şey yapmaz. Bu kodla karşılaşıldığında, (haklı olarak) iyi performans göstermediği söylenebilir. Çalıştırması hızlı bir kod değildir ve farklı döngü türleri ile optimize edilebilir veya bu görevleri tek bir döngüde gerçekleştirebilir.

Bir diğer önemli şey, bir web sayfasının oluşturulmasını engelleme potansiyeline sahip olmasıdır. Tarayıcı sekmenizi dondurur (veya hatta çöker). Yani bu durumda, kullanıcı tarafından algılanan performans, görevin kendisinin performansı ile el eledir.

Ancak, bu görevi bir web işçisinde yürütebiliriz. Oluşturma engellemesini önleyerek, görevimiz daha hızlı gerçekleşmeyecek - bu nedenle performansın hala aynı olduğu söylenebilir - ancak kullanıcı yine de uygulamamızla etkileşime girebilecek ve uygun geri bildirim sağlanabilecek. Bu, son kullanıcımızın uygulamamızı ne kadar hızlı algılayacağını etkiler. Daha hızlı değil, ancak daha iyi Algılanan Performansa sahip.

Not : Web Çalışanları ve React hakkında daha fazla bilgi edinmek istiyorsanız, GitHub'daki tepki-web çalışanları kavram kanıtımı keşfetmekten çekinmeyin.

Web Önemlileri

Web performansı, potansiyel olarak izleyebileceğiniz ve geliştirebileceğiniz binlerce ölçüm içeren geniş bir konudur. Web Vitals, Google'ın web performansını standartlaştırmaya verdiği yanıttır. Bu standardizasyon, geliştiricilerin son kullanıcı deneyimi üzerinde en büyük etkiye sahip olan metriklere odaklanmasını sağlar.

• İlk Contentful Paint (FCP)
  Yüklemenin başladığı andan içeriğin ekranda işlendiği ana kadar geçen süre.
• En Büyük İçerikli Boya (LCP)
  En büyük görüntünün veya metin bloğunun oluşturma süresi, görünüm alanında görünür. Sayfa yüklemelerinin %75'i için iyi bir puan 2,5 saniyenin altındadır.
• İlk Giriş Gecikmesi (FID)
  Kullanıcının sayfayla etkileşime girdiği andan tarayıcının isteği işleyebildiği zamana kadar geçen süre.
  Sayfa yüklemelerinin %75'i için iyi bir puan 100 ms'nin altındadır.
• Kümülatif Düzen Kaydırma (CLS)
  Sayfanın ömründe meydana gelen her beklenmedik kayma için tüm tek tek düzen kaymalarının toplam toplamı. İyi bir puan, sayfa yüklemelerinin %75'inde 0,1'dir.
• Etkileşim Zamanı (TTI)
  Sayfanın yüklenmeye başladığı andan ana alt kaynaklarının yüklendiği ana kadar geçen süre.
• Toplam Engelleme Süresi (TBT)
  Ana iş parçacığının engellendiği İlk İçerikli Boyama ile Etkileşim Süresi arasındaki süre (kullanıcı girişine yanıt yok).

Bunlardan hangisi en önemli?

Önemli Web Verileri, Google'ın son kullanıcı deneyimi üzerinde en büyük etkiye sahip olduğunu belirlediği Web Verilerinin alt kümesidir. 2022 itibariyle, Üç Önemli Web Verisi vardır: En Büyük İçerikli Boyama (hız), Kümülatif Düzen Kayması (kararlılık) ve İlk Giriş Gecikmesi (etkileşim).

Önerilen Okuma : Temel Web Verileri için Geliştirici Kılavuzu

Chrome Kullanıcı Deneyimi Raporu ve Gerçek Kullanıcı Metrikleri

Uygulamanızda Web Vital'lerini test etmenin birden çok yolu vardır. En kolayı Chrome Devtools'unuzu açmak, Lighthouse sekmesine gitmek, tercihlerinizi kontrol etmek ve bir rapor oluşturmaktır. Buna Chrome Kullanıcı Deneyimi Raporu (CrUX) denir ve belirli gereksinimleri karşılayan Chrome kullanıcılarının 28 günlük ortalama örneklerine dayanır:

• tarama geçmişi senkronizasyonu;
• Senkronizasyon parolası kurulumu yok;
• kullanım istatistik raporlaması etkinleştirildi.

Ancak Chrome UX Raporunun kendi kullanıcılarınızı ne kadar temsil ettiğini tanımlamak oldukça zordur. Rapor bir basketbol sahası görevi görür ve geçici olarak iyileştirilecek şeylerin iyi bir göstergesini sunabilir. Bu nedenle Raygun gibi bir Gerçek Kullanıcı İzleme (RUM) aracı kullanmak çok iyi bir fikirdir. Bu, tahsis edilen bir zaman dilimi içinde tüm tarayıcılarda uygulamanızla gerçekten etkileşime giren kişiler hakkında rapor verir.

Gerçek kullanıcı ölçümlerini kendiniz izlemek, basit bir iş değildir. Dikkat edilmesi gereken çok sayıda engel var. Ancak, karmaşık olması gerekmez. Performans izleme araçlarıyla RUM metrikleri alarak kurulum yapmak kolaydır. Göz önünde bulundurulması gereken seçeneklerden biri Raygun'dur - birkaç hızlı adımda kurulabilir ve GDPR dostudur. Ayrıca, birçok hata raporlama özelliği de alırsınız.

Uygulama İzleme

Geliştiriciler genellikle gözlemlenebilirlik ve performans izlemeyi sonradan düşünülmüş olarak ele alır. Ancak izleme, yazılım ekiplerinin daha hızlı hareket etmesine, çabalara öncelik vermesine ve yolda ciddi sorunlardan kaçınmasına yardımcı olan geliştirme yaşam döngüsünün çok önemli bir yönüdür.

İzlemeyi ayarlamak basit olabilir ve gözlemlenebilirliği hesaba katan özellikler oluşturmak, ekibin bu korkunç yeniden düzenleme sprintlerinden kaçınmak için temel bakım ve kod hijyeni yapmasına yardımcı olacaktır. Uygulama izleme, geceleri huzur içinde uyumanıza yardımcı olabilir ve ekibinizi daha iyi kullanıcı deneyimleri oluşturmaya yönlendirir.

Trendleri İzleyin ve Gerilemelerden Kaçının

Aynı şekilde, özellik gerilemelerini ve hatalarını önlemek için Sürekli Entegrasyon ardışık düzenimizde (ideal olarak) çalışan testlerimiz var, yeni bir dağıtımdan hemen sonra kullanıcılarımız için performans gerilemelerini tanımlamanın bir yolunu bulmalıyız. Raygun, Geliştiricilerin Dağıtım İzleme özelliğiyle bu işi otomatikleştirmelerine yardımcı olabilir.

Performans bütçesine bağlı kalmak daha sürdürülebilir hale gelir. Bu bilgilerle ekibiniz, tüm Web Verileri genelinde performans gerilemelerini (veya iyileştirmelerini) hızla tespit edebilir, sorunlu dağıtımları belirleyebilir ve etkilenen kullanıcıları sıfırlayabilir.

Detaya Girin ve Harekete Geçin

RUM kullanırken, sonuçları kullanıcı bazında daraltmak mümkündür. Örneğin, Raygun'da, etkilenen kullanıcıların bir listesini görmek için histogramdaki bir puana veya çubuğa tıklamak mümkündür. Bu, örnek düzeyinde bilgilerle oturumları bireysel olarak daha ayrıntılı incelemeye başlamayı mümkün kılar. Bu, yalnızca genel en iyi uygulamalara güvenmek yerine doğrudan soruna yönelik eylemde bulunmaya yardımcı olur. Ve daha sonra, değişimin yansımalarını teşhis etmek.

Olağandışı Olayları Vurgulayın

Tabii ki, bu özellikler harika ve sorumlu bir geliştirici, uygulama izleme panolarına göz kulak olmalıdır. Ancak uygulamanız ölçeklendikçe, ekipler büyüdükçe ve sorumluluklar bölündükçe, sizi herhangi bir önemli performans sorunu konusunda hızla uyaran otomatik süreçler oluşturmak her zamankinden daha önemli hale geliyor. Bu nedenle, uygulamanız için uyarı tetikleyicileri ayarlamanız önerilen en iyi uygulamadır.

Toplama

Özetlemek gerekirse, Web Vitals, kullanıcının deneyimiyle doğrudan korelasyonları nedeniyle performansta yeni altın standarttır. Web Hayati Bilgilerini gerçek kullanıcı içgörülerine dayalı olarak aktif olarak izleyen ve optimize eden geliştirme ekipleri, daha hızlı ve daha dayanıklı dijital deneyimler sunacak.

Uygulamanızı ölçeklerken izlemenin yapabileceklerinin ve performans bakımını sürdürmek için çözümlerin yalnızca yüzeyini kazıdık. Rahat bir gece uykusu için Performans Bütçesini, daha iyi gözlemlenebilirliği veya diğer çözümleri nasıl kullandığınızı yorumlarda bana bildirin!