Sayfalarınızın gerçek dünyadaki performansını ölçme ve raporlama yeteneğine sahip olmak, zaman içinde performansı teşhis etmek ve iyileştirmek için çok önemlidir. Saha verileri olmadan, sitenizde yaptığınız değişikliklerin gerçekten istenen sonuçlara ulaşıp ulaşmadığını kesin olarak bilmek imkansızdır.
Birçok popüler Gerçek Kullanıcı İzleme (RUM) analiz sağlayıcıları, araçlarında (ve diğer birçok Web Verisinde) zaten Önemli Web Verileri ölçümlerini desteklemektedir. Şu anda bu RUM analiz araçlarından birini kullanıyorsanız, sitenizdeki sayfaların önerilen Önemli Web Verileri eşiklerini ne kadar iyi karşıladığını değerlendirmek ve gelecekte gerilemeleri önlemek için çok iyi durumdasınız.
Önemli Web Verileri ölçümlerini destekleyen bir analiz aracı kullanmanızı tavsiye etsek de, şu anda kullanmakta olduğunuz analiz aracı bunları desteklemiyorsa, geçiş yapmanız gerekmez. Hemen hemen tüm analitik araçları, tanımlama ve ölçme için bir yol sunar. özel metrikler veya olaylarBu, Önemli Web Verileri ölçümlerini ölçmek ve bunları mevcut analiz raporlarınıza ve panolarınıza eklemek için muhtemelen mevcut analiz sağlayıcınızı kullanabileceğiniz anlamına gelir.
Bu kılavuz, Önemli Web Verileri ölçümlerini (veya herhangi bir özel ölçümü) bir üçüncü taraf veya şirket içi analiz aracıyla ölçmek için en iyi uygulamaları ele alır. Hizmetlerine Önemli Web Verileri desteği eklemek isteyen analitik satıcıları için de bir kılavuz görevi görebilir.
Özel metrikler veya etkinlikler kullanın #
Yukarıda bahsedildiği gibi, çoğu analiz aracı, özel verileri ölçmenize izin verir. Analitik aracınız bunu destekliyorsa, bu mekanizmayı kullanarak Önemli Web Verileri ölçümlerinin her birini ölçebilmelisiniz.
Bir analiz aracında özel ölçümleri veya olayları ölçmek genellikle üç adımlı bir süreçtir:
- Tanımlayın veya kaydedin aracınızın yöneticisindeki özel metrik (gerekirse). (Not: Tüm analitik sağlayıcılar, özel ölçümlerin önceden tanımlanmasını gerektirmez.)
- Ön uç JavaScript kodunuzdaki metriğin değerini hesaplayın.
- Adın veya kimliğin 1. adımda tanımlananla eşleştiğinden emin olarak metrik değeri analitik arka ucunuza gönderin (gerekirse tekrar).
1. ve 3. adımlarda, talimatlar için analiz aracınızın belgelerine başvurabilirsiniz. 2. adım için şunu kullanabilirsiniz: web hayati Önemli Web Verileri ölçümlerinin her birinin değerini hesaplamak için JavaScript kitaplığı.
Aşağıdaki kod örneği, bu ölçümleri kodda izlemenin ve bir analiz hizmetine göndermenin ne kadar kolay olabileceğini göstermektedir.
import {onCLS, onFID, 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);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
Ortalamalardan kaçının #
Bir ortalama hesaplayarak bir performans metriği için bir dizi değeri özetlemek cazip gelebilir. Ortalamalar, büyük miktarda verinin derli toplu bir özeti oldukları için ilk bakışta uygun görünür, ancak sayfa performansını yorumlamak için bunlara güvenme dürtüsüne karşı koymalısınız.
Ortalamalar sorunlu çünkü herhangi bir tek kullanıcının oturumunu temsil etmezler. Dağılımın herhangi bir aralığındaki aykırı değerler, ortalamayı yanıltıcı şekillerde çarpıtabilir.
Örneğin, küçük bir kullanıcı grubu son derece yavaş ağlarda veya maksimum değer aralığına yakın cihazlarda olabilir, ancak ortalamayı bir sorun olduğunu düşündürecek şekilde etkilemek için yeterli kullanıcı oturumunu hesaba katmaz.
Mümkün olduğunda, ortalamalar yerine yüzdelik dilimlere güvenin. Belirli bir performans metriği için dağılımdaki yüzdelikler, web siteniz için tüm kullanıcı deneyimlerini daha iyi tanımlar. Bu, alt kümelere odaklanmanıza olanak tanır. gerçek size tek bir değerin verebileceğinden daha fazla fikir verecek deneyimler.
Bir dağıtımı bildirebildiğinizden emin olun #
Önemli Web Verileri ölçümlerinin her biri için değerleri hesapladıktan ve bunları özel bir ölçüm veya olay kullanarak analiz hizmetinize gönderdikten sonra, bir sonraki adım, toplanan değerleri görüntüleyen bir rapor veya pano oluşturmaktır.
Önerilen Önemli Web Verileri eşiklerini karşıladığınızdan emin olmak için, raporunuzun her bir metriğin değerini 75. yüzdelik dilimde göstermesi gerekir.
Analitik aracınız yerleşik bir özellik olarak niceliksel raporlama sunmuyorsa, artan düzende sıralanan her metrik değerini listeleyen bir rapor oluşturarak bu verileri muhtemelen manuel olarak alabilirsiniz. Bu rapor oluşturulduktan sonra, o rapordaki tüm değerlerin sıralanmış tam listesinin %75’ini oluşturan sonuç, o metriğe ilişkin yüzde 75’lik dilim olacaktır ve verilerinizi nasıl segmente ederseniz edin (cihaz türüne, bağlantı türüne, ülkeye vb. göre) bu durum geçerli olacaktır.
Analitik aracınız size varsayılan olarak metrik düzeyinde raporlama ayrıntı düzeyi sağlamıyorsa, analitik aracınız destekliyorsa muhtemelen aynı sonucu elde edebilirsiniz. özel boyutlar. İzlediğiniz her bir metrik örneği için benzersiz, özel bir boyut değeri ayarlayarak, özel boyutu rapor yapılandırmasına eklerseniz, tek tek metrik örneklerine göre ayrılmış bir rapor oluşturabilmelisiniz. Her bir örnek benzersiz bir boyut değerine sahip olacağından gruplandırma yapılmaz.
bu Web Verileri Raporu Google Analytics kullanan bu tekniğin bir örneğidir. Raporun kodu açık kaynakböylece geliştiriciler bu bölümde özetlenen tekniklerin bir örneği olarak buna başvurabilir.
Verilerinizi doğru zamanda gönderin #
Bazı performans metrikleri, sayfanın yüklenmesi bittiğinde hesaplanabilirken, diğerleri (CLS gibi) sayfanın tüm kullanım ömrünü dikkate alır ve yalnızca sayfa boşaltılmaya başladığında kesinleşir.
Ancak bu sorunlu olabilir, çünkü her iki beforeunload Ve unload olaylar güvenilir değildir (özellikle mobilde) ve kullanımları tavsiye edilmez (çünkü bir sayfanın Geri-İleri Önbellek).
Bir sayfanın tüm ömrünü izleyen ölçümler için, ölçüm sırasındaki geçerli değeri ne olursa olsun göndermek en iyisidir. visibilitychange etkinlik, sayfanın görünürlük durumu olarak değiştiğinde hidden. Bunun nedeni, sayfanın görünürlük durumu şu şekilde değiştiğinde: hidden—o sayfadaki herhangi bir komut dosyasının yeniden çalışabileceğinin garantisi yoktur. Bu, özellikle tarayıcı uygulamasının herhangi bir sayfa geri araması başlatılmadan kapatılabildiği mobil işletim sistemlerinde geçerlidir.
Mobil işletim sistemlerinin genellikle visibilitychange sekmeler arasında geçiş yaparken, uygulamalar arasında geçiş yaparken veya tarayıcı uygulamasını kapatırken meydana gelen olay. onlar da ateş ediyor visibilitychange bir sekmeyi kapatırken veya yeni bir sayfaya giderken olay. Bu yapar visibilitychange olaydan çok daha güvenilir unload veya beforeunload olaylar.
Zaman içindeki performansı izleyin #
Analitik uygulamanızı Önemli Web Verileri metriklerini hem takip edecek hem de raporlayacak şekilde güncelledikten sonraki adım, sitenizdeki değişikliklerin zaman içinde performansı nasıl etkilediğini izlemektir.
Değişikliklerinizi sürümlendirin #
Değişiklikleri izlemeye yönelik saf (ve nihayetinde güvenilmez) bir yaklaşım, değişiklikleri üretime dağıtmak ve ardından dağıtım tarihinden sonra alınan tüm ölçümlerin yeni siteye ve dağıtım tarihinden önce alınan tüm ölçümlerin eski siteye karşılık geldiğini varsaymaktır. Ancak, herhangi bir sayıda faktör (HTTP’de önbelleğe alma, hizmet çalışanı veya CDN katmanı dahil) bunun çalışmasını engelleyebilir.
Dağıtılan her değişiklik için benzersiz bir sürüm oluşturmak ve ardından bu sürümü analiz aracınızda izlemek çok daha iyi bir yaklaşımdır. Çoğu analiz aracı, sürüm belirlemeyi destekler. Sizinkinde yoksa, özel bir boyut oluşturabilir ve bu boyutu dağıtılan sürümünüze ayarlayabilirsiniz.
Denemeler çalıştır #
Aynı anda birden çok sürümü (veya denemeyi) izleyerek sürüm oluşturmayı bir adım öteye taşıyabilirsiniz.
Analitik aracınız deney grupları tanımlamanıza izin veriyorsa, bu özelliği kullanın. Aksi takdirde, metrik değerlerinizin her birinin raporlarınızdaki belirli bir deney grubuyla ilişkilendirilebilmesini sağlamak için özel boyutları kullanabilirsiniz.
Analitiklerinizde denemeler yapıldığında, kullanıcılarınızın bir alt kümesine deneysel bir değişiklik uygulayabilir ve bu değişikliğin performansını kontrol grubundaki kullanıcıların performansıyla karşılaştırabilirsiniz. Bir değişikliğin gerçekten performansı artırdığına güvendikten sonra, değişikliği tüm kullanıcılara sunabilirsiniz.
Ölçümün performansı etkilemediğinden emin olun #
Gerçek kullanıcılar üzerindeki performansı ölçerken, çalıştırdığınız herhangi bir performans ölçüm kodunun sayfanızın performansını olumsuz etkilememesi kesinlikle önemlidir. Böyle bir durumda, performansınızın işletmenizi nasıl etkilediğine dair çıkaracağınız sonuçlara güvenilmez olacaktır çünkü analitik kodunun varlığının en büyük olumsuz etkiye sahip olup olmadığını asla bilemezsiniz.
RUM analitik kodunu üretim sitenize dağıtırken her zaman şu ilkeleri izleyin:
Analizlerinizi erteleyin #
Analytics kodu her zaman eşzamansız, engellemesiz bir şekilde yüklenmelidir ve genellikle en son yüklenmelidir. Analitik kodunuzu engelleyici bir şekilde yüklerseniz LCP’yi olumsuz etkileyebilir.
Önemli Web Verileri ölçümlerini ölçmek için kullanılan tüm API’ler, eşzamansız ve ertelenmiş komut dosyası yüklemeyi desteklemek için özel olarak tasarlanmıştır (aracılığıyla buffered bayrağı), yani betiklerinizi erken yüklemek için acele etmenize gerek yok.
Sayfa yükleme zaman çizelgesinde daha sonra hesaplanamayan bir metriği ölçüyorsanız, satır içi sadece erkenden çalıştırılması gereken kod <head> belgenizin (yani bu bir işleme engelleme isteği) ve gerisini erteleyin. Tek bir ölçüm gerektirdiği için tüm analizlerinizi erken yüklemeyin.
Uzun görevler oluşturmayın #
Analitik kodu genellikle kullanıcı girişine yanıt olarak çalışır, ancak analitik kodunuz çok sayıda DOM ölçümü gerçekleştiriyorsa veya diğer işlemci yoğun API’leri kullanıyorsa, analitik kodunun kendisi zayıf girdi yanıt hızına neden olabilir. Ayrıca, analiz kodunuzu içeren JavaScript dosyası büyükse, bu dosyayı çalıştırmak ana ileti dizisini engelleyebilir ve İlk Giriş Gecikmesini (FID) veya Sonraki Boyayla Etkileşimi (INP) olumsuz etkileyebilir.
Engellemeyen API’ler kullanın #
gibi API’ler sendBeacon() Ve requestIdleCallback() kritik olmayan görevleri, kullanıcı açısından kritik görevleri engellemeyecek şekilde çalıştırmak için özel olarak tasarlanmıştır.
Bu API’ler, bir RUM analiz kitaplığında kullanmak için harika araçlardır.
Genel olarak, tüm analitik işaretleri kullanılarak gönderilmelidir. sendBeacon() API (varsa) ve tüm pasif analiz ölçüm kodları boşta kalma sürelerinde çalıştırılmalıdır.
İhtiyacınızdan fazlasını takip etmeyin #
Tarayıcı çok sayıda performans verisi sunar, ancak verilerin mevcut olması, bunları kaydetmeniz ve analitik sunucularınıza göndermeniz gerektiği anlamına gelmez.
Örneğin, Kaynak Zamanlama API’sı sayfanıza yüklenen her bir kaynak için ayrıntılı zamanlama verileri sağlar. Ancak, tüm bu verilerin kaynak yükü performansını iyileştirmede zorunlu veya yararlı olması olası değildir.
Kısacası, verileri yalnızca orada olduğu için izlemeyin, verileri izleyen kaynakları tüketmeden önce verilerin kullanılacağından emin olun.