Mevcut analiz aracınızla Web Verileri'ni ölçme
Sayfalarınızın gerçek performansını ölçme ve raporlama olanağı, zaman içinde performansı teşhis etmek ve iyileştirmek için çok önemlidir. Alan verileri olmadan, sitenizde yaptığınız değişikliklerin istenen sonuçları sağlayıp sağlamadığını kesin olarak bilmek mümkün değildir.
Birçok popüler gerçek kullanıcı izleme (RUM) analiz sağlayıcısı, araçlarında Core Web Vitals metriklerini (ve birçok diğer Web Verileri metriğini) zaten destekliyor. Şu anda bu RUM analiz araçlarından birini kullanıyorsanız sitenizdeki sayfaların önerilen Önemli Web Verileri eşiklerini ne kadar karşıladığını değerlendirebilir ve gelecekte gerilemelerin önüne geçebilirsiniz.
Temel Web Vitals metriklerini destekleyen bir analiz aracı kullanmanızı öneririz ancak şu anda kullandığınız analiz aracı bunları desteklemiyorsa mutlaka geçiş yapmanız gerekmez. Hemen hemen tüm analiz araçları, özel metrikleri veya etkinlikleri tanımlayıp ölçmenin bir yolunu sunar. Bu sayede, Core Web Vitals metriklerini ölçmek ve mevcut analiz raporlarınıza ve kontrol panellerinize eklemek için mevcut analiz sağlayıcınızı kullanabilirsiniz.
Bu kılavuzda, Core Web Vitals metriklerini (veya herhangi bir özel metriği) üçüncü taraf veya şirket içi analiz araçlarıyla ölçmeyle ilgili en iyi uygulamalar ele alınmaktadır. Ayrıca, hizmetine Core Web Vitals desteği eklemek isteyen analiz tedarikçi firmaları için de rehber görevi görebilir.
Özel metrikler veya etkinlikler kullanma
Yukarıda belirtildiği gibi, çoğu analiz aracı özel verileri ölçmenize olanak tanır. Analiz aracınız bunu destekliyorsa bu mekanizmayı kullanarak Core Web Vitals metriklerinin her birini ölçebilirsiniz.
Bir analiz aracında özel metrikleri veya etkinlikleri ölçmek genellikle üç adımdan oluşan bir işlemdir:
- Özel metriği aracınızın yöneticisinde tanımlayın veya kaydettirin (gerekirse). (Not: Tüm analiz sağlayıcılar, özel metriklerin önceden tanımlanmasını gerektirmez.)
- Ön uç JavaScript kodunuzda metriğin değerini hesaplayın.
- Ad veya kimliğin 1. adımda tanımlananla eşleştiğinden emin olarak metrik değerini analiz arka uçunuza gönderin (gerekirse tekrar).
1. ve 3. adımlarda talimatlar için analiz aracınızın belgelerine bakabilirsiniz. 2. adımda, web-vitals JavaScript kitaplığını kullanarak her bir Core Web Vitals metriğinin değerini hesaplayabilirsiniz.
Aşağıdaki kod örneğinde, bu metrikleri kodda izlemenin ve bir analiz hizmetine göndermenin ne kadar kolay olabileceği gösterilmektedir.
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);
Ortalama değerlerden kaçının
Ortalama hesaplayarak bir performans metriği için bir dizi değeri toplamayı denemek cazip gelebilir. Ortalamalar, büyük miktarda verinin düzenli bir özeti olduğundan ilk bakışta kullanışlı görünse de sayfa performansını yorumlamak için bu verilere güvenme dürtüsüne karşı koymalısınız.
Ortalama değerler, tek bir kullanıcının oturumunu temsil etmediği için sorunludur. Dağılımın her iki aralığındaki uç değerler, ortalamayı yanıltıcı şekilde çarpıtabilir.
Örneğin, küçük bir kullanıcı grubu son derece yavaş ağlarda veya cihazlarda olabilir. Bu kullanıcılar, maksimum değer aralığına yakın değerlere sahip olsa da ortalamayı bir sorun olduğunu gösterecek şekilde etkileyecek kadar kullanıcı oturumu oluşturmaz.
Mümkün olduğunda ortalamalar yerine yüzdelik dilimlere güvenin. Belirli bir performans metriği için dağılımdaki yüzdelik dilim, web sitenizin kullanıcı deneyimlerinin tüm kapsamını daha iyi açıklar. Bu sayede, gerçek deneyimlerin alt kümelerine odaklanabilirsiniz. Bu, tek bir değerden elde edebileceğinizden daha fazla analiz sunar.
Dağıtımı bildirebilmeniz gerekir.
Core Web Vitals metriklerinin her birinin değerlerini hesapladıktan ve özel bir metrik veya etkinlik kullanarak bunları analiz hizmetinize gönderdikten sonra, sonraki adım toplanan değerleri gösteren bir rapor veya kontrol paneli oluşturmaktır.
Önerilen Core Web Vitals eşiklerini karşıladığınızdan emin olmak için raporunuzun her bir metriğin değerini 75. yüzdelik dilimde göstermesi gerekir.
Analiz aracınız yerleşik bir özellik olarak yüzdelik raporlama sunmuyorsa her metrik değerini artan düzende listeleyen bir rapor oluşturarak bu verileri manuel olarak elde edebilirsiniz. Bu rapor oluşturulduktan sonra, rapordaki tüm değerlerin tam ve sıralanmış listesinin% 75'inde bulunan sonuç, söz konusu metrik için 75. yüzdelik dilim olur. Verilerinizi nasıl segmentlere ayırdığınıza (cihaz türüne, bağlantı türüne, ülkeye vb. göre) bakılmaksızın bu durum geçerli olur.
Analiz aracınız varsayılan olarak metrik düzeyinde raporlama ayrıntı düzeyi sunmuyorsa analiz aracınız özel boyutları destekliyorsa muhtemelen aynı sonucu elde edebilirsiniz. İzlediğiniz her metrik örneği için benzersiz bir özel boyut değeri ayarlayarak, özel boyutu rapor yapılandırmasına dahil ederseniz metrik örneklerine göre ayrılmış bir rapor oluşturabilirsiniz. Her örnek benzersiz bir boyut değerine sahip olacağından gruplandırma yapılmaz.
Web Vitals raporu, Google Analytics'i kullanan bu tekniğe örnektir. Raporun kodu açık kaynak olduğundan geliştiriciler bu bölümde açıklanan tekniklere örnek olarak bu koda başvurabilir.
Verilerinizi doğru zamanda gönderin
Bazı performans metrikleri sayfanın yüklenmesi tamamlandıktan sonra hesaplanırken diğerleri (CLS gibi) sayfanın yayın hayatının tamamını dikkate alır ve yalnızca sayfanın yüklenmesi sona erdiğinde kesin sonuç verir.
Ancak hem beforeunload
hem de unload
etkinlikleri güvenilir olmadığından (özellikle mobil cihazlarda) ve Geri-İleri Önbelleği için bir sayfanın uygun olmasını engelleyebileceklerinden, bu durum sorunlu olabilir. Bu nedenle, bu etkinliklerin kullanılması önerilmez.
Bir sayfanın kullanım süresinin tamamını izleyen metrikler için en iyi yöntem, sayfanın görünürlük durumu hidden
olarak değiştiğinde visibilitychange
etkinliği sırasında metriğin mevcut değerini göndermektir. Bunun nedeni, sayfanın görünürlük durumu hidden
olarak değiştikten sonra bu sayfadaki herhangi bir komut dosyasının tekrar çalışabileceğinden emin olamamadır. Bu durum özellikle, tarayıcı uygulamasının herhangi bir sayfa geri çağırması tetiklenmeden kapatılabileceği mobil işletim sistemlerinde geçerlidir.
Mobil işletim sistemlerinin genellikle sekme değiştirirken, uygulama değiştirirken veya tarayıcı uygulamasını kapatırken visibilitychange
etkinliğini tetiklediğini unutmayın.
Ayrıca, bir sekme kapatıldığında veya yeni bir sayfaya gidildiğinde visibilitychange
etkinliği de tetiklenir. Bu sayede visibilitychange
etkinliği, unload
veya beforeunload
etkinliklerine kıyasla çok daha güvenilirdir.
Zaman içindeki performansı izleme
Analiz uygulamanızı hem Core Web Vitals metriklerini izleyip raporlayacak şekilde güncelledikten sonra, sitenizdeki değişikliklerin zaman içindeki performansı nasıl etkilediğini izlemeniz gerekir.
Değişikliklerinizi sürüme ayırma
Değişiklikleri izlemek için saf (ve nihayetinde güvenilir olmayan) bir yaklaşım, değişiklikleri üretime dağıtmak ve ardından dağıtım tarihinden sonra alınan tüm metriklerin yeni siteye, dağıtım tarihinden önce alınan tüm metriklerin ise eski siteye karşılık geldiğini varsaymaktır. Ancak bu işlemin çalışmasını birçok faktör (HTTP, hizmet çalışanı veya CDN katmanında önbelleğe alma dahil) engelleyebilir.
Çok daha iyi bir yaklaşım, 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 olacaktır. Çoğu analiz aracı, sürüm belirlemeyi destekler. Sizinki yoksa özel bir boyut oluşturabilir ve bu boyutu dağıtılan sürümünüze ayarlayabilirsiniz.
Deney yapma
Aynı anda birden fazla sürümü (veya denemeyi) izleyerek sürüm oluşturma işlemini bir adım daha ileri taşıyabilirsiniz.
Analiz aracınız deneme grupları tanımlamanıza izin veriyorsa bu özelliği kullanın. Aksi takdirde, metrik değerlerinizin her birinin raporlarınızdaki belirli bir deneme amaçlı grupla ilişkilendirilebilmesi için özel boyutları kullanabilirsiniz.
Analytics'inizde deneme özelliğini kullanarak deneme amaçlı bir değişikliği kullanıcılarınızın bir alt kümesine sunabilir 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 performansı gerçekten iyileştirdiğinden emin olduktan sonra bu değişikliği tüm kullanıcılara sunabilirsiniz.
Ölçümün performansı etkilemediğinden emin olma
Gerçek kullanıcılarda performansı ölçerken, çalıştırdığınız performans ölçüm kodlarının sayfanızın performansını olumsuz yönde etkilememesi son derece önemlidir. Bu durumda, analiz kodunun varlığının en büyük olumsuz etkiyi gösterip göstermediğini hiçbir zaman bilemeyeceğiniz için performansınızın işletmenizi nasıl etkilediğine dair vardığınız tüm sonuçlar güvenilir olmayacaktır.
RUM analiz kodunu üretim sitenize dağıtırken her zaman aşağıdaki ilkeleri uygulayın:
Analizlerinizi erteleme
Analytics kodu her zaman zaman uyumsuz ve engellemeyen bir şekilde yüklenmeli ve genellikle en son yüklenmelidir. Analytics kodunuzu engelleyecek şekilde yüklerseniz LCP olumsuz yönde etkilenebilir.
Core Web Vitals metriklerini ölçmek için kullanılan tüm API'ler, özellikle buffered
işaretçisi aracılığıyla asenkron ve ertelenen komut dosyası yüklemeyi desteklemek için tasarlanmıştır. Bu nedenle, komut dosyalarınızın erken yüklenmesini sağlamak için acele etmenize gerek yoktur.
Sayfa yükleme zaman çizelgesinde daha sonra hesaplanamayan bir metriği ölçtüğünüzde, oluşturma işlemini engelleyen bir istek olmaması için belgenizin <head>
bölümüne yalnızca erken çalıştırılması gereken kodu satır içi olarak eklemeniz ve geri kalanını ertelememeniz gerekir. Tek bir metrik gerektirdiği için tüm analizlerinizi erken yüklemeyin.
Uzun görevler oluşturmayın
Analytics kodu genellikle kullanıcı girişine yanıt olarak çalışır. Ancak Analytics kodunuz çok sayıda DOM ölçümü yapıyorsa veya işlemci yoğun diğer API'leri kullanıyorsa girişlerin yanıt vermesi yavaşlayabilir. Ayrıca, Analytics kodunuzu içeren JavaScript dosyası büyükse bu dosyanın yürütülmesi ana iş parçasını engelleyebilir ve sayfanın Sonraki Boyama İçin Etkileşim (INP) değerini olumsuz yönde etkileyebilir.
Engellemeyen API'ler kullanın
sendBeacon()
ve requestIdleCallback()
gibi API'ler, kritik olmayan görevleri kullanıcı için kritik olan görevleri engellemeyecek şekilde çalıştırmak üzere özel olarak tasarlanmıştı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 (varsa) kullanılarak gönderilmeli ve tüm pasif analiz ölçüm kodları boş zamanlarda çalıştırılmalıdır.
İhtiyacınız olandan fazlasını izlemeyin
Tarayıcı çok sayıda performans verisi sağlar ancak verilerin mevcut olması, bunları kaydetmeniz ve analiz sunucularınıza göndermeniz gerektiği anlamına gelmez.
Örneğin, Resource Timing API, sayfanıza yüklenen her kaynak için ayrıntılı zamanlama verileri sağlar. Ancak bu verilerin tümünün, kaynak yükleme performansını iyileştirmede gerekli veya yararlı olması pek olası değildir.
Özetle, verileri yalnızca mevcut oldukları için izlemeyin. Verileri izlemek için kaynak tüketmeden önce verilerin kullanılacağından emin olun.