2022'de Chrome Kullanıcı Deneyimi Raporu web topluluğunun gerçek web dünyasının dağıtımını ve evrimini anlamasına kullanıcı performansı. Bugüne kadar boyama ve sayfa yükleme metriklerine odaklandık Örneğin First Contentful Paint (FCP) ve Onload (OL) gibi Web sitelerinin kullanıcılar için görsel performansını anlamak. Şununla başlamak: Haziran 2018 sürümünde, kullanıcı odaklı yeni bir metrikle deniyoruz. web sayfalarının etkileşimine odaklanır: İlk Giriş Gecikmesi (FID) tıklayın. Bu yeni metrik, duyarlı reklam öğelerinin dönüşüm oranını kullanıcının girişine yardımcı olması gerekir.
FID kısa bir süre önce Chrome'da kaynak denemesi için geçerlidir Böylece web siteleri, bu yeni web platformuyla denemeler yapmayı tercih edebilir. özelliğini kullanabilirsiniz. Benzer şekilde FID, Chrome Kullanıcı Deneyimi Raporu'nda Deneysel metriktir; bu metrik, deneme süresi boyunca kullanılabilir. ayrı bir "deneysel" çalışma içinde kaynak denemesi tıklayın.
FID nasıl ölçülür?
Peki FID tam olarak nedir? Elektronik fonksiyonlar İlk Giriş Gecikmesi duyuru blog yayını:
ziyaret edin.İlk Giriş Gecikmesi (FID), kullanıcının ilk etkileşimde bulunduğu andan itibaren geçen süreyi ölçer (ör. bir bağlantıyı tıkladıklarında, bir düğmeye dokunduğunda veya özel bir JavaScript destekli kontrol) çalıştırılabildiği zamana o etkileşime karşılık vermelidir.
Birinin kapı zilini çalmasından cevap vermesine kadar geçen süreyi ölçmek gibi kapıyı açar. İşlemin uzun sürmesinin birçok nedeni olabilir. Örneğin, Belki kişi kapıdan uzaktadır veya hızlı hareket edemiyordur. Benzer şekilde, web sayfaları başka işlerle meşgul olabilir veya kullanıcının cihazı yavaşlar.
Chrome Kullanıcı Deneyimi Raporu'nda FID'i keşfetme
Milyonlarca kaynaktan elde edilen bir aylık FID verileri sayesinde zaten zengin bir hazine tek bir yerde toplamaktır. Şimdi Arkadaş Bitkiler projesinde bu bilgileri BigQuery'deki Chrome Kullanıcı Deneyimi Raporu'ndan nasıl çıkaracağınızı göstereceğim.
developers.google.com için hızlı FID deneyimlerinin yüzdesini sorgulayarak başlayalım. Hızlı deneyimi, FID değerinin 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 anında 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 değişir. Çok iyi ama diğer kaynaklarla karşılaştırıldığında var mı?
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. Bu nedenle, developers.google.com ortalamanın üzerinde.
Sonra, bu verileri dilimlere ayırıp iki dilimdeki veriler ile aralarındaki fark mobilde hızlı FID yüzdesi. Hipotezlerden biri, mobil cihazların cihazların FID değerleri daha yavaştır. Bu durumun nedeni, masaüstü bilgisayarlarda da kullanılabilir. CPU daha az güçlüyse daha uzun bir süre boyunca ve daha yavaş FID deneyimlerine neden olur.
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ünde daha yüksek kümülatif yoğunluk var telefon ve tablet form faktörlerine göre daha hızlı FID deneyimi. Nedenini anlama veya harici A/B testi yapılmasını gerektirir. Örneğin, CPU performansı Chrome Kullanıcı Deneyimi Raporu'nun kapsamına girer.
Bir kaynağın hızlı FID deneyimlerine sahip olup olmadığını nasıl belirleyeceğimizi iyi performans gösteren birkaç kaynağa bakalım.
1. Örnek: http://secretlycanadian.com
Bu kaynak %98 100 ms'den düşük FID deneyimleri Bunu nasıl başarıyorlar? Yerleşik yapısı analiz ediliyor WebPageTest, oldukça fazla resim içeren bir WordPress sayfası olduğunu ancak 168 KB'lık Laboratuvar makinemizde yaklaşık 500 ms'de çalışan JavaScript. Pek fazla değil, HTTP Arşivi'ne göre çok fazla JavaScript, Bu değer, sayfayı 28. yüzdelik dilime dahil eder.
2,7 ila 3 saniye uzunluğunda pembe çubuk, HTML'yi ayrıştır aşamasıdır. Bu sırada Sayfanın etkileşimli olmadığı ve görsel olarak eksik göründüğü süre (bkz. "3.0 sn." bakın). Bundan sonra tamamlanması gereken tüm uzun görevler yardımcı olur. Pembe çizgiler 11. satır JavaScript çalışmasının hızlı patlamalar halinde nasıl yayıldığını göstermektedir.
2. Örnek: https://www.wtfast.com
Bu kaynak %96 oranında anında FID'ye sahip paylaşmaya istekli olmalıdır. 267 KB (HTTP Arşivi'nde 38. yüzdelik dilim) JavaScript yükler ve makine üzerinde 900 ms süreyle işler. Film şeridi, sayfanın arka planı boyamak yaklaşık 5 saniye, boyanması yaklaşık 2 saniye sürüyor daha iyi olur.
Sonuçların en ilginç yönü ana iş parçacığı meşgulken bile etkileşimli hiçbir şeyin görünür olmamasıdır. 3-5 saniye arasında değişir. Sorunun nedeni sayfanın FCP'sinin yavaşlığıdır. FID değerini iyileştirir. Bu, birçok metrik kullanmanın önemini gösteren iyi bir örnektir. temsil etmesi gerekir.
Keşfetmeye başlayın
FID hakkında daha fazla bilgiyi Web'in Durumu'nun bu haftaki bölümünde bulabilirsiniz:
Chrome Kullanıcı Deneyimi Raporu'nda FID'in mevcut olması, bir temel oluşturmamıza olanak tanır. bir bakmışsınızdır. Bu temel çizgisini kullanarak, yeni modelin veya her bir kaynak için karşılaştırma yapabilirsiniz. Başlangıç olarak FID'yi kendi sitenizin alan ölçümlerinde topluyor, kaynak için kaydolun bit.ly/event-timing-ot adresine giderek deneyin Etkinlik Zamanlaması özelliğini seçin. Elbette keşfetmeye başlayın web'deki etkileşimin durumuyla ilgili ilginç bilgiler içeren bir veri kümesi sunar. Bu metrik hâlâ deneme aşamasında olduğu için lütfen geri bildirimlerinizi bizimle paylaşın Chrome Kullanıcı Deneyimi Raporu tartışma grubundaki analiziniz veya Twitter'da @ChromeUXReport.