Chrome Kullanıcı Deneyimi Raporunda First Input Delay'i Deneme

Rick Viscomi'nin hikayeleri
Rick Viscomi

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 odak noktamız, web sitelerinin kullanıcılar üzerinde görsel olarak nasıl performans gösterdiğini anlamamıza yardımcı olan İlk Zengin İçerikli Boyama (FCP) ve Onload (OL) gibi boya ve sayfa yükleme metrikleriydi. Haziran 2018 sürümünden itibaren, web sayfalarının etkileşimine odaklanan, kullanıcı merkezli yeni bir metrikle denemeler yapıyoruz: First Input Delay (FID). Bu yeni metrik, web sitelerinin kullanıcı girişine ne kadar duyarlı olduğunu daha iyi anlamamızı sağlayacak.

FID, kısa süre önce Chrome'da kaynak denemesi olarak kullanıma sunulmuştur. Bu, web sitelerinin bu yeni web platformu özelliğiyle denemeler yapmayı tercih edebileceği anlamına gelir. Benzer şekilde, FID, Chrome Kullanıcı Deneyimi Raporu'nda deneysel bir metrik olarak yer alacaktır. Bu, kaynak denemesi süresince ayrı bir "deneysel" ad alanı içinde kullanılabileceği anlamına gelir.

FID nasıl ölçülür?

Peki FID tam olarak nedir? First Input Delay duyurusu blog yayınında şu şekilde tanımlanıyor:

İlk Giriş Gecikmesi (FID), bir kullanıcının sitenizle ilk etkileşime girmesinden (ör. bir bağlantıyı tıkladığında, bir düğmeye dokunduğunda veya JavaScript destekli özel bir kontrol kullandığında) tarayıcının bu etkileşime gerçekten yanıt vermeyi başardığı ana kadar geçen süreyi ölçer.

Meşgul bir ana iş parçacığının, kullanıcı etkileşimine yanıtı nasıl geciktirdiğini gösteren animasyon.

Bu, birinin kapı zilini çaldırmasından kapıyı cevaplamasına kadar geçen süreyi ölçmek gibidir. Uzun sürerse bunun birçok nedeni olabilir. Örneğin, kişi kapıdan uzaktadır veya hızlı hareket edemiyordur. Benzer şekilde, web sayfaları başka işler yapmakla meşgul olabilir veya kullanıcının cihazı yavaş olabilir.

Chrome Kullanıcı Deneyimi Raporu'nda FID'yi Keşfetme

Milyonlarca kaynaktan elde edilen bir aylık FID verileriyle birlikte, keşfedilmeyi bekleyen birçok ilgi çekici analiz bulunuyor. Bu bilgilerin BigQuery'deki Chrome Kullanıcı Deneyimi Raporu'ndan nasıl çıkarılacağı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 gecikme, kullanıcıya anında hissettirmelidir.

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, ama veri kümesindeki tüm kaynaklarla karşılaştırıldığında ne oluyor?

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. Yani developers.google.com, ortalamanın üzerindedir.

Şimdi de bu verileri dilimlere ayırarak masaüstü ve mobil cihazlardaki hızlı FID yüzdesi arasında bir fark olup olmadığını inceleyelim. Bir hipotez, mobil cihazların FID değerlerinin daha yavaş olduğudur. Bunun nedeni, muhtemelen masaüstü bilgisayarlara kıyasla donanımın daha yavaş olmasıdır. CPU daha az güçlüyse daha uzun süre daha yoğun olabilir ve FID deneyimleri daha yavaş olabilir.

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ü, telefon ve tablet form faktörlerine kıyasla daha yüksek kümülatif hızlı FID deneyimi yoğunluğuna sahiptir. Bu farkların neden olduğunu (ör. CPU performansı) anlamak, Chrome Kullanıcı Deneyimi Raporu'nun kapsamı dışında A/B testi gerektirir.

Bir kaynağın hızlı FID deneyimlerine sahip olup olmadığını nasıl belirleyeceğimizi gördüğümüze göre, gerçekten iyi performans gösteren bazı kaynaklara göz atalım.

1. örnek: http://secretlycanadian.com

gizlilycanadian.com&#39;un WebPageTest film şeridi

Bu kaynakta 100 ms'nin altındaki FID deneyimleri 98%'dir. Bunu nasıl yaparlar? WebPageTest'te nasıl oluşturulduğunu analiz ettiğimizde, oldukça fazla görsel içeren bir WordPress sayfası olduğunu ancak laboratuvar makinemizde yaklaşık 500 ms'de çalışan 168 KB JavaScript'e sahip olduğunu görebiliriz. Bu, sayfayı 28. yüzde birlik dilimde tutan HTTP Arşivi'ne göre bu, pek fazla JavaScript türü değildir.

gizlilycanadian.com&#39;un AWebPageTest şelalesi

2,7 ila 3,0 saniyeyi kapsayan pembe çubuk, HTML'yi Ayrıştırma aşamasıdır. Bu süre boyunca 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). Bundan sonra, işlenmesi gereken tüm uzun görevler, ana iş parçacığının hareketsiz kalmasını sağlamak için bölünür. 11. satırdaki pembe çizgiler, JavaScript'in nasıl hızlı patlamalar halinde yayıldığını göstermektedir.

2. Örnek: https://www.wtfast.com

wtHızlı.com&#39;un WebPageTest film şeridi

Bu kaynak 96% anında FID deneyimine sahip. 267 KB JavaScript'i (HTTP Arşivi'nde 38. yüzdelik dilim) yükler ve laboratuvar makinesinde 900 ms boyunca işler. Film şeridi, sayfanın arka planın yaklaşık 5 saniye, içeriğin boyanmasının ise yaklaşık 2 saniye sürdüğünü göstermektedir.

wtfast.com&#39;un WebPageTest şelalesi

Sonuçların en ilginç tarafı, ana iş parçacığı 3 ila 5 saniye arasında meşgulken etkileşimli hiçbir şeyin bile görünmemesidir. FID'yi artıran şey aslında bu sayfa FCP'sinin yavaşlığıdır. Bu, kullanıcı deneyimini temsil etmek için çok sayıda metrik kullanmanın önemine dair iyi bir örnektir.

Keşfetmeye başlayın

Web'in Durumu'nun bu haftaki bölümünde FID hakkında daha fazla bilgi edinebilirsiniz:

Chrome Kullanıcı Deneyimi Raporu'nda FID'nin yer alması, etkileşim deneyimleri için bir temel oluşturmamıza olanak tanır. Bu temel çizgiyi kullanarak gelecekteki sürümlerdeki değişimini gözlemleyebilir veya bağımsız kaynakları karşılaştırabiliriz. Kendi sitenizin alan ölçümlerinde FID verilerini toplamaya başlamak istiyorsanız bit.ly/event-timing-ot adresine giderek kaynak denemesine kaydolun ve Etkinlik Zamanlaması özelliğini seçin. Elbette, web'deki etkileşimin durumuyla ilgili ilginç bilgiler için veri kümesini keşfetmeye başlayın. Bu hâlâ deneysel bir metrik olduğundan lütfen bize geri bildirim gönderin ve analizlerinizi Chrome Kullanıcı Deneyimi Raporu tartışma grubunda veya Twitter'da @ChromeUXReport'da paylaşın.