Chrome Kullanıcı Deneyimi Raporu'nun amacı, web topluluğunun gerçek kullanıcı performansının dağılımını ve gelişimini anlamasına yardımcı olmaktır. Bugüne kadar, web sitelerinin kullanıcılar için görsel olarak nasıl performans gösterdiğini anlamamıza yardımcı olan İlk Zengin İçerikli Boyama (FCP) ve Onload (OL) gibi boyama ve sayfa yükleme metriklerini ele aldık. Haziran 2018 sürümünden itibaren, web sayfalarının etkileşimine odaklanan yeni bir kullanıcı odaklı metrik olan ilk giriş gecikmesi (FID) ile denemeler yapıyoruz. Bu yeni metrik, web sitelerinin kullanıcı girişlerine ne kadar duyarlı olduğunu daha iyi anlamamızı sağlayacak.
FID, kısa süre önce Chrome'da kaynak deneme sürümü olarak kullanıma sunulmuştur. Bu, web sitelerinin bu yeni web platformu özelliğiyle denemeler yapmayı etkinleştirebileceği anlamına gelir. Benzer şekilde, FID, Chrome UX Report'ta deneysel bir metrik olarak kullanılabilir. Bu, kaynak denemesi süresince ayrı bir "deneysel" ad alanında kullanılabileceği anlamına gelir.
FID nasıl ölçülür?
Peki FID tam olarak nedir? First Input Delay duyuru blog yayınında bu özellik şöyle tanımlanmıştır:
İlk Giriş Gecikmesi (FID), bir kullanıcının sitenizle ilk kez etkileşimde bulunmasından (ör. bir bağlantıyı tıklaması, bir düğmeye dokunması veya JavaScript destekli özel bir kontrolü kullanması) ile tarayıcının bu etkileşime gerçekten yanıt verebildiği ana kadar geçen süreyi ölçer.
Bu, birinin kapı zilini çalmasından kapıya cevap vermesine kadar geçen süreyi ölçmek gibidir. Bu işlemin uzun sürmesinin birçok nedeni olabilir. Örneğin, kişi kapıdan uzakta olabilir veya hızlı hareket edemeyebilir. Benzer şekilde, web sayfaları başka bir işle meşgul olabilir veya kullanıcının cihazı yavaş olabilir.
Chrome Kullanıcı Deneyimi Raporu'nda FID'yi keşfetme
Milyonlarca kaynaktan alınan bir aylık FID verileriyle, keşfedilecek çok sayıda ilginç analiz mevcut. Bu analizlerin BigQuery'deki Chrome kullanıcı deneyimi raporundan nasıl alınacağını gösteren birkaç sorguya göz atalım.
developers.google.com için hızlı FID deneyimlerinin yüzdesini sorgulayarak başlayalım. Hızlı deneyimi, FID'nin 100 ms'den az olduğu bir deneyim olarak tanımlayabiliriz. RAIL önerilerine göre, gecikme 100 ms veya daha iyiyse kullanıcı tarafından anlık olarak algılanmalıdır.
SELECT
ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
origin = 'https://developers.google.com'
Sonuçlar, bu kaynaktaki FID deneyimlerinin %95'inin anlık olarak algılandığını gösteriyor. Bu gerçekten iyi görünüyor ancak veri kümesindeki tüm kaynaklarla karşılaştırıldığında nasıl?
SELECT
ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
Bu sorgunun sonuçları, FID deneyimlerinin %84'ünün 100 ms'den kısa olduğunu gösteriyor. Dolayısıyla developers.google.com ortalamanın üzerinde.
Şimdi, masaüstündeki ve mobil cihazlardaki hızlı FID yüzdesi arasında fark olup olmadığını görmek için bu verileri dilimlemeyi deneyelim. Bir hipoteze göre, mobil cihazların FID değerleri, muhtemelen masaüstü bilgisayarlara kıyasla daha yavaş donanım nedeniyle daha yavaştır. CPU daha az güçlüyse daha uzun süre daha yoğun olabilir ve FID deneyimlerinin daha yavaş olmasına yol açabilir.
SELECT
form_factor.name AS form_factor,
ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
form_factor
| form_factor | fast_fid |
|---|---|
| masaüstü | %96,02 |
| telefon | %79,90 |
| tablet | %76,48 |
Sonuçlar hipotezimizi doğruluyor. Masaüstü, hızlı FID deneyimlerinin kümülatif yoğunluğu açısından telefon ve tablet form faktörlerinden daha iyidir. Bu farklılıkların neden (ör. CPU performansı) ortaya çıktığını anlamak için Chrome Kullanıcı Deneyimi Raporu'nun kapsamı dışında A/B testi yapılması gerekir.
Bir kaynağın hızlı FID deneyimlerine sahip olup olmadığını nasıl belirleyeceğimizi öğrendik. Şimdi, gerçekten iyi performans gösteren birkaç kaynağa göz atalım.
1. örnek: http://secretlycanadian.com
Bu kaynakta FID deneyimlerinin %98'i 100 ms'den kısa. Bunu nasıl yapıyorlar? WebPageTest'te nasıl oluşturulduğunu analiz ettiğimizde, bunun oldukça resim ağırlıklı bir WordPress sayfası olduğunu, ancak laboratuvar makinemizde yaklaşık 500 ms'de çalışan 168 KB JavaScript'e sahip olduğunu görebiliriz. HTTP Archive'ye göre bu, çok fazla JavaScript değildir ve bu sayfayı 28. yüzdelik dilime yerleştirir.
2,7 ila 3,0 saniyelik pembe çubuk, HTML'yi ayrıştırma aşamasıdır. Bu süre zarfında sayfa etkileşimli olmaz ve görsel olarak eksik görünür (yukarıdaki film şeridinde "3.0 sn." bölümüne bakın). Ardından, işlenmesi gereken uzun görevler ana iş parçacığının etkin kalmasını sağlamak için bölünür. 11. satırdaki pembe çizgiler, JavaScript çalışmasının hızlı aralarla nasıl dağıtıldığını gösterir.
2. örnek: https://www.wtfast.com
Bu kaynak %96 oranında anında FID deneyimi içeriyor. 267 KB JavaScript (HTTP Arşivi'nde 38. yüzdelik dilim) yükler ve laboratuvar makinesinde 900 ms boyunca işler. Film şeridinde, sayfanın arka planı boyamasının yaklaşık 5 saniye, içeriği boyamasının ise yaklaşık 2 saniye sürdüğü görülüyor.
Sonuçlar ile ilgili en ilginç nokta, ana iş parçacığı 3 ila 5 saniye boyunca meşgulken etkileşimli hiçbir şeyin görünmemesidir. FID'yi iyileştiren, aslında sayfanın FCP'sinin yavaşlığıdır. Bu, kullanıcı deneyimini temsil etmek için birçok metriğin kullanılmasının önemini gösteren iyi bir örnektir.
Keşfetmeye başlayın
The State of the Web'in bu haftaki bölümünde FID hakkında daha fazla bilgi edinebilirsiniz:
Chrome UX Report'ta FID'nin bulunması, etkileşim deneyimleri için bir referans noktası belirlememizi sağlar. Bu temel çizgiyi kullanarak gelecekteki sürümlerdeki değişimini gözlemleyebilir ya da bağımsız kaynakları karşılaştırabiliriz. Kendi sitenizin alan ölçümlerinde FID toplamaya başlamak istiyorsanız bit.ly/event-timing-ot adresine gidip etkinlik zamanlaması özelliğini seçerek kaynak deneme sürümüne kaydolun. Elbette, web'deki etkileşimin durumuyla ilgili ilginç bilgiler edinmek için veri kümesini keşfetmeye başlayın. Bu metrik hâlâ deneysel aşamada olduğundan lütfen geri bildiriminizi gönderin ve analizinizi Chrome Kullanıcı Deneyimi Raporu tartışma grubunda veya Twitter'daki @ChromeUXReport hesabında paylaşın.