Sahada Web Verileri'ni ölçmek için en iyi uygulamalar

Mevcut analiz aracınızla Web Verileri'ni ölçme.

Philip Walton

İşletmenizin gerçek dünyadaki performansını ölçebilmek ve raporlayabilmek, sayfaları, zamanla performansı teşhis etmek ve iyileştirmek açısından kritik öneme sahiptir. Yok: alanı verileri sitenizde yaptığınız değişikliklerin başarılı olup olmadığını elde ettiğini gösterir.

Birçok popüler Gerçek Kullanıcı İzleme (RUM) analiz sağlayıcıları Core Web Vitals metriklerini zaten desteklemektedir. araçların (ayrıca diğer Web Verileri) kullanılabilir. Eğer bu RUM analiz araçlarından birini kullanıyorsanız sitenizdeki sayfaların önerilen Core Web Vitals metriklerini ne kadar iyi karşıladığını değerlendirin eşikleri ve regresyonları önleyin daha avantajlı bir konumda olursunuz.

Core Web Vitals'ı destekleyen bir analiz aracı kullanmanızı öneririz. kullandığınız analiz aracı bu metrikleri desteklemiyorsa geçiş yapmanız gerekmez. Neredeyse tüm analiz araçları, özel öğeleri tanımlamak ve metrik veya etkinlikler, yani Core Web Vitals'ı ölçmek için mevcut analiz sağlayıcınızı kullanma olasılığı yüksek ve mevcut analiz raporlarınıza ve kontrol panellerinize ekleyebilirsiniz.

Bu kılavuzda, bir üçüncü taraf veya şirket içi analiz aracıyla Core Web Vitals metriklerini (veya özel metrikleri) ölçmeyle ilgili en iyi uygulamalar ele alınmaktadır. Ayrıca hizmetlerine Core Web Vitals desteği eklemek isteyen analiz tedarikçileri için bir rehber işlevi görebilir.

Özel metrikleri veya etkinlikleri kullanma

Yukarıda belirtildiği gibi, çoğu analiz aracı özel verileri ölçmenize olanak tanır. Eğer Analytics aracı tarafından desteklendiğinden, her bir Core Web aracını Bu mekanizmayı kullanan vitals metrikleri.

Bir analiz aracında özel metrikleri veya etkinlikleri ölçmek, genellikle üç adımlık bir süreç:

1. Tanımla veya kaydolun aracınızın yöneticisindeki özel metriği (gerekirse). (Not: Tüm analiz sağlayıcıları, özel metriklerin önceden tanımlanmasını gerektirir.)
2. Ön uç JavaScript kodunuzdaki metriğin değerini hesaplayın.
3. Adın veya kimliğin doğru olduğundan emin olarak, metrik değerini Analytics arka ucunuza gönderin. 1. adımda tanımlananla eşleşir (gerekirse).

1. ve 3. adımlar için analiz aracınızın belgelerine bakın. 2. Adım için web-vitals JavaScript kitaplığını Core Web Vitals metriklerinin her birinin değerini hesaplayın.

Aşağıdaki kod örneğinde, bu metrikleri Google Ads'de bir analiz hizmetine göndermeniz gerekir.

import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToAnalytics({name, value, id}) {
  const body = JSON.stringify({name, value, id});
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

Ortalamalardan kaçın

Bir performans metriği için bir değer aralığını ana hatlarıyla ortalama hesaplamayı içerir. Ortalamalar, bir ihtiyaç duyduğunuzda düzenli bir şekilde düzenlemelisiniz, ancak önemli verilere güvenme dürtüsüne performansını yorumlamak için kullanır.

Ortalamalar sorunlu herhangi bir kullanıcının oturumunu temsil etmezler. Her iki aralıktaki aykırı değerler dağılımında ortalamayı yanıltıcı şekillerde çarpıtabilir.

Örneğin, küçük bir kullanıcı grubu çok yavaş ağlarda veya cihazlarda olabilir. maksimum değer aralığına yakın olan, ancak yeterli kullanıcı sağlamayan bir sorun olduğuna işaret edecek şekilde ortalamayı etkiler.

Mümkün olduğunda, ortalamalar yerine yüzdelik dilimleri kullanın. Şu andaki yüzdelik dilimler: dağılımını (ör. belli bir performans metriğinin dağılımı) tam dönüşüm aralığını daha iyi en iyi uygulamaları paylaşacağız. Bu da farklı alt kümelerin alt kümelerine gerçek deneyimler sunar. Bu, size hiçbir zaman tek bir değerden daha fazla bilgi verir yapabilir.

Dağıtım bildirebildiğinizden emin olma

Her Core Web Vitals metriklerinin değerlerini hesaplayıp gönderdikten sonra bunları özel bir metrik veya etkinlik kullanarak analiz hizmetinize sunuyorsanız, sıradaki adım toplanan değerleri gösteren bir rapor veya gösterge tablosu oluşturmak için kullanılır.

Önerilen Core Web Vitals metriklerini karşıladığınızdan emin olmak için eşikler olarak ayarlamak istiyorsanız raporunuza değerini girin.

Analiz aracınız yerleşik bir özellik olarak yüzdelik raporlama sunmuyorsa ancak yine de anahtar kelime tekliflerini içeren bir rapor oluşturarak bu verileri her metrik değeri artan düzende sıralanır. Bu rapor oluşturulduktan sonra, tam, sıralanmış listesinin% 75'i bu şekilde bu rapor, söz konusu metriğin 75. yüzdelik dilimi olur ve bu, verilerinizi nasıl segmentlere ayırmış olursanız olun (cihaz türü, bağlantı türü, ülke vb.) ifade eder.

Analiz aracınız metrik düzeyinde raporlama ayrıntı düzeyini varsa analiz aracınız varsayılan olarak özel seçin. Bir izlediğiniz her bir metrik örneği için benzersiz, özel boyut değeri ayrı ayrı metriklere göre ayrılmış bir rapor oluşturabilmeniz gerekir. (ör. özel boyutu rapor yapılandırmasına dahil ederseniz) ek süre tahminlerinde bulunabilir. Her örneğin benzersiz bir boyut değeri olduğundan gruplandırma yapılmaz.

Web Verileri Raporu Google Analytics'in kullanıldığı bu tekniğin bir örneğidir. Şuna ait kod: açık kaynaklıysa Böylece, geliştiriciler bu kılavuzda ana hatlarıyla açıklanan tekniklere örnek olarak bölümüne bakın.

Verilerinizi doğru zamanda gönderin

Bazı performans metrikleri, sayfanın yüklenmesi tamamlandıktan sonra hesaplanabilir. diğerleri (CLS gibi) sayfanın tüm kullanım ömrünü göz önünde bulundurur ve yalnızca Nihai URL, sayfa kaldırılmaya başladığında sonlandırılır.

Ancak hem beforeunload hem de unload etiketinden dolayı bu durum sorun yaratabilir. etkinlikler güvenilir değildir (özellikle mobil cihazlarda) ve kullanımları önerilir (çünkü bunlar, bir sayfanın Geri İleri-İleri Sarma için uygun olmasını Önbellek).

Bir sayfanın tüm kullanım ömrünü izleyen metrikler için en iyi seçenek, metriğin geçerli değeri visibilitychange etkinliği sırasındadır. sayfanın görünürlük durumu hidden olarak değişir. Bunun nedeni, bir sayfada bir kez görünürlük durumu hidden olarak değiştiğinde, o sayfa tekrar çalıştırılabilir. Bu, özellikle mobil cihaz yönetimi için tarayıcı uygulamasının kendisinin herhangi bir sayfa geri çağırması olmadan kapatılabileceği sistemler tetikleniyor.

Mobil işletim sistemlerinin genellikle visibilitychange etiketini tetiklediğini unutmayın. Sekmeler arasında geçiş yaparken, uygulamalar arasında geçiş yaparken veya tarayıcı uygulamasının kendisini kapatırken gerçekleşen bir etkinlik oluyor. Ayrıca, bir sekmeyi kapatırken veyavisibilitychange açın. Bu da, visibilitychange etkinliğinin unload veya beforeunload etkinlik.

Zaman içindeki performansı izleyin

Analiz uygulamanızı güncelleyerek bir sonraki adım, sitenizde yaptığınız değişikliklerin nasıl değiştiğini izlemektir. zamanla performansı etkiler.

Değişiklikleriniz için sürüm oluşturun

Değişiklikleri takip etmek için naif (ve nihayetinde güvenilir olmayan) bir yaklaşım, üretim değişikliklerinden sonra da dağıtım tarihi yeni siteye ve eski siteye karşılık geldiği unutulmamalıdır. Ancak, bir dizi etken (HTTP, hizmet çalışanı veya CDN katmanında önbelleğe alma dahil) bunu engelleyebilir engellenebilir.

Çok daha iyi bir yaklaşım, dağıtılan her değişiklik için benzersiz bir sürüm oluşturmaktır. bu sürümü analiz aracınızda izleyebilirsiniz. Çoğu analiz aracının desteği bir sürüm ayarlama. Sizinki de yoksa özel bir boyut oluşturup bu boyutu dağıttığınız sürüme ekleyebilirsiniz.

Deney yapma

Birden fazla sürümü izleyerek sürüm oluşturmayı bir adım ileri denemeler) görebilirsiniz.

Analiz aracınız deneme gruplarını tanımlamanıza izin veriyorsa bu özelliği kullanın. Aksi takdirde, metrik değerlerinizin her birinin raporlarınızdaki belirli bir deneme grubuyla ilişkilendirilebilir.

Analytics'te deneme yaparak, en iyi sonuçları elde etmek için bir kullanıcı alt grubunda deneme amaçlı değişiklik yapabilir ve kullanıcıların performansında değişikliğe neden olan bir değişiklik gösterir. Planınızı bir değişikliğin performansı artırdığından emin olursanız, değişikliği tüm kullanıcıları kapsar.

Ölçümlerin performansı etkilemediğinden emin olma

Gerçek kullanıcıların performansını ölçerken, teste katılanların veya çalıştırmanız gereken performans ölçüm kodunun, performansını artırır. Çıkarılırsa çıkarmaya çalıştığınız tüm sonuçlar da güvenilmez olacaktır. Bunun nedeni, bu durumun olup olmadığını öğrenmem uzun sürer mi? olumsuz etki yaratabilir.

RUM analiz kodunu üretim sitesi:

Analizlerinizi erteleyin

Analytics kodu her zaman eşzamansız bir şekilde ve engellemeyen bir şekilde yüklenmelidir ve en son yüklenmesi gerekir. Analiz kodunuzu Bu, LCP'yi olumsuz yönde etkileyebilir.

Core Web Vitals metriklerini ölçmek için kullanılan tüm API'ler spesifik olarak eşzamansız ve ertelenmiş komut dosyası yüklemeyi desteklemek için tasarlanmıştır ( buffered işaretidir). Komut dosyalarınızı erkenden yüklemek için acele etmenize gerek yoktur.

Daha sonra hesaplanamayan bir metriği ölçtüğünüzde sayfa yükleme zaman çizelgesini kullanıyorsanız yalnızca erken çalıştırılması gereken kodu satır içine almalısınız içine <head> ekleyin (yani oluşturmayı isteğinde bulunun) ve kalanları erteleyin. Tüm çünkü tek bir metrik gerektiriyor.

Uzun görevler oluşturma

Analytics kodu genellikle kullanıcı girişine göre çalışır. Ancak Analytics kodunuz çok sayıda DOM ölçümü yapıyor veya işlemciyi yoğun şekilde kullanan başka API'ler kullanıyor. analiz kodunun kendisi giriş duyarlılığına neden olabilir. Ayrıca, analiz kodunuzu içeren JavaScript dosyasının boyutu büyük olduğu için ana ileti dizisini engelleyebilir ve bir sayfanın Sonraki Boyamayla Etkileşim (INP) özelliğini olumsuz yönde etkileyebilir.

Engellemeyen API'ler kullanın

Benzer API'ler sendBeacon(). ve requestIdleCallback() kritik olmayan görevleri şirket içinde benzersiz bir şekilde kullanıcı açısından kritik görevleri engellemenize olanak tanır.

Bu API'ler, RUM analiz kitaplığında kullanılabilecek mükemmel araçlardır.

Genel olarak, tüm analiz işaretçileri sendBeacon() API kullanılarak gönderilmelidir. (varsa) ve pasif analiz ölçüm kodunun tamamı boşta kalma süreleri.

Örneğin, Resource Timing API sayfanızda yüklenen her kaynak için ayrıntılı zamanlama verileri sağlar. Ancak tüm bu verilerin her zaman olduğu gibi değil, her durumda fayda sağlamaları da kaynak yükü performansını iyileştirir.

Kısacası, verileri mevcut olduğu için izlemekle yetinmeyin, verilerin kullanıldığından emin olun tükettiğini düşünelim.