Bereksperimen dengan Penundaan Input Pertama di Laporan UX Chrome

Tujuan dari Laporan Pengalaman Pengguna Chrome adalah membantu komunitas web memahami distribusi dan evolusi performa pengguna yang sebenarnya. Hingga saat ini, fokus kami adalah pada metrik paint dan pemuatan halaman seperti First Contentful Paint (FCP) dan Onload (OL), yang telah membantu kami memahami performa situs secara visual bagi pengguna. Mulai rilis Juni 2018, kami bereksperimen dengan metrik baru yang berfokus pada pengguna yang berfokus pada interaktivitas halaman web: Penundaan Input Pertama (FID). Metrik baru ini akan memungkinkan kita untuk lebih memahami seberapa responsif {i>website<i} terhadap input pengguna.

FID baru-baru ini disediakan di Chrome sebagai uji coba origin, yang berarti bahwa situs dapat memilih untuk bereksperimen dengan fitur platform web baru ini. Demikian pula, FID akan tersedia di Laporan UX Chrome sebagai metrik eksperimental, sehingga akan tersedia selama masa uji coba origin dalam namespace "eksperimental" terpisah.

Cara mengukur FID

Jadi, apa sebenarnya FID itu? Berikut adalah penjelasannya dalam postingan blog pengumuman Penundaan Input Pertama:

Penundaan Input Pertama (FID) mengukur waktu dari saat pengguna pertama kali berinteraksi dengan situs Anda (yaitu saat mereka mengklik link, mengetuk tombol, atau menggunakan kontrol khusus yang didukung JavaScript) hingga saat browser benar-benar dapat merespons interaksi tersebut.

Animasi yang menunjukkan bagaimana thread utama yang sibuk menunda respons terhadap interaksi pengguna.

Ini seperti mengukur waktu dari membunyikan bel pintu seseorang hingga mereka menjawab pintu. Jika butuh waktu lama, mungkin ada banyak alasan. Misalnya, mungkin orang tersebut jauh dari pintu atau mungkin mereka tidak dapat bergerak cepat. Demikian pula, halaman web mungkin sedang sibuk melakukan pekerjaan lain atau perangkat pengguna mungkin lambat.

Mempelajari FID di Laporan UX Chrome

Dengan data FID selama satu bulan dari jutaan sumber, sudah ada banyak insight menarik untuk ditemukan. Mari kita lihat beberapa kueri yang menunjukkan cara mengekstrak wawasan dari Laporan UX Chrome di BigQuery.

Mari kita mulai dengan membuat kueri persentase pengalaman FID cepat untuk developers.google.com. Kita dapat mendefinisikan pengalaman cepat sebagai pengalaman yang FID-nya kurang dari 100 md. Per rekomendasi RAIL, jika penundaannya 100 md atau lebih baik, pengalaman tersebut harus langsung dirasakan oleh pengguna.

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'

Hasilnya menunjukkan bahwa 95% pengalaman FID pada origin ini dianggap instan. Tampaknya sangat bagus, tetapi bagaimana perbandingannya dengan semua asal dalam {i>dataset<i}?

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

Hasil kueri ini menunjukkan bahwa 84% pengalaman FID kurang dari 100 md. Jadi, developers.google.com berada di atas rata-rata.

Selanjutnya, mari kita coba menganalisis data ini untuk melihat apakah ada perbedaan antara persentase FID cepat di desktop versus seluler. Salah satu hipotesisnya adalah perangkat seluler memiliki nilai FID yang lebih lambat, yang mungkin disebabkan oleh hardware yang lebih lambat dibandingkan dengan komputer desktop. Jika kurang canggih, CPU mungkin akan lebih sibuk untuk waktu yang lebih lama dan mengakibatkan pengalaman FID yang lebih lambat.

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
desktop 96.02%
ponsel 79.90%
tablet 76.48%

Hasilnya menguatkan hipotesis kami. Desktop memiliki kepadatan kumulatif pengalaman FID cepat yang lebih tinggi daripada faktor bentuk ponsel dan tablet. Memahami alasan perbedaan ini terjadi, misalnya performa CPU, akan memerlukan pengujian A/B di luar cakupan Laporan UX Chrome.

Setelah kita mengetahui cara mengidentifikasi apakah origin memiliki pengalaman FID yang cepat, mari kita lihat beberapa origin yang berperforma sangat baik.

Contoh 1: http://secretlycanadian.com

Strip film WebPageTest dari secretlycanadian.com

Origin ini memiliki 98% pengalaman FID di bawah 100 milidetik. Bagaimana cara melakukannya? Saat menganalisis cara pembuatannya di WebPageTest, kita dapat melihat bahwa ini adalah halaman WordPress dengan jumlah gambar yang cukup banyak, tetapi memiliki 168 KB JavaScript yang dieksekusi sekitar 500 milidetik di mesin lab. JavaScript ini tidak terlalu banyak menurut Arsip HTTP, yang menempatkan halaman ini di persentil ke-28.

Waterfall AWebPageTest dari secretlycanadian.com

Batang merah muda yang mencakup 2,7 hingga 3,0 detik adalah fase Parse HTML. Selama waktu ini, halaman tidak interaktif dan secara visual tidak lengkap (lihat "3.0" pada setrip film di atas). Setelah itu, setiap tugas panjang yang perlu diproses akan dipecah untuk memastikan bahwa thread utama tetap diam. Garis merah muda pada baris 11 menunjukkan cara kerja JavaScript tersebar dalam burst yang cepat.

Contoh 2: https://www.wtfast.com

Strip film WebPageTest dari wtfast.com

Origin ini memiliki 96% pengalaman FID instan. Library ini memuat JavaScript 267 KB (persentil ke-38 di Arsip HTTP) dan memprosesnya selama 900 milidetik di mesin lab. Setrip film ini menunjukkan bahwa halaman memerlukan waktu sekitar 5 detik untuk menggambar latar belakang dan sekitar 2 detik lagi untuk menggambar konten.

Waterfall WebPageTest di wtfast.com

Yang paling menarik dari hasil adalah tidak ada hal interaktif yang terlihat saat thread utama sibuk antara 3 dan 5 detik. Kelambatan FCP halaman ini sebenarnyalah yang meningkatkan FID. Ini adalah contoh yang baik tentang pentingnya menggunakan banyak metrik untuk mewakili pengalaman pengguna.

Mulai jelajahi

Anda dapat mempelajari FID lebih lanjut di episode The State of the Web minggu ini:

Dengan tersedianya FID dalam Laporan UX Chrome, kami dapat menetapkan dasar pengukuran pengalaman interaktivitas. Dengan menggunakan baseline ini, kita dapat mengamati perubahannya dalam rilis mendatang atau menjalankan benchmark pada masing-masing origin. Jika Anda ingin mulai mengumpulkan FID di pengukuran kolom situs Anda sendiri, daftar ke uji coba origin dengan membuka bit.ly/event-timing-ot dan pilih fitur Waktu Peristiwa. Dan tentu saja, mulai jelajahi set data untuk mendapatkan insight menarik tentang status interaktivitas di web. Metrik ini masih bersifat eksperimental, jadi harap berikan masukan Anda dan bagikan analisis Anda di grup diskusi Laporan UX Chrome atau @ChromeUXReport di Twitter.