Tujuan Laporan Pengalaman Pengguna Chrome adalah membantu komunitas web memahami distribusi dan evolusi performa pengguna yang sebenarnya. Hingga saat ini, fokus kami adalah pada metrik pemuatan halaman dan paint seperti First Contentful Paint (FCP) dan Onload (OL), yang telah membantu kami memahami performa situs secara visual bagi pengguna. Mulai dari rilis Juni 2018, kami bereksperimen dengan metrik baru yang berfokus pada pengguna dan berfokus pada interaktivitas halaman web: First Input Delay (FID). Metrik baru ini akan memungkinkan kami lebih memahami seberapa responsif situs terhadap input pengguna.
FID baru-baru ini tersedia di Chrome sebagai uji coba origin, yang berarti situs dapat memilih untuk bereksperimen dengan fitur platform web baru ini. Demikian pula, FID akan tersedia di Laporan UX Chrome sebagai metrik eksperimental, yang berarti akan tersedia selama durasi uji coba origin dalam namespace "eksperimental" yang terpisah.
Cara FID diukur
Jadi, apa sebenarnya FID? Berikut adalah definisinya dalam postingan blog pengumuman First Input Delay:
Jeda Input Pertama (FID) mengukur waktu dari saat pengguna pertama kali berinteraksi dengan situs Anda (yaitu saat mereka mengklik link, mengetuk tombol, atau menggunakan kontrol kustom yang didukung JavaScript) hingga saat browser benar-benar dapat merespons interaksi tersebut.
Cara ini seperti mengukur waktu sejak bel pintu seseorang membunyikan bel pintu hingga dia menjawab pintu. Jika memerlukan waktu lama, mungkin ada banyak alasan. Misalnya, mungkin orang tersebut berada jauh dari pintu atau mungkin dia tidak dapat bergerak dengan 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 satu bulan dari jutaan origin, sudah ada banyak insight menarik yang dapat ditemukan. Mari kita lihat beberapa kueri yang menunjukkan cara mengekstrak insight ini dari Laporan UX Chrome di BigQuery.
Mari kita mulai dengan membuat kueri untuk persentase pengalaman FID cepat untuk developers.google.com. Kita dapat menentukan pengalaman cepat sebagai pengalaman dengan FID kurang dari 100 md. Sesuai rekomendasi RAIL, jika penundaan adalah 100 md atau lebih baik, penundaan tersebut akan terasa seketika bagi 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 origin dalam set data?
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 milidetik. Jadi, developers.google.com berada di atas rata-rata.
Selanjutnya, mari kita coba mengelompokkan data ini untuk melihat apakah ada perbedaan antara persentase FID cepat di desktop dan seluler. Salah satu hipotesisnya adalah perangkat seluler memiliki nilai FID yang lebih lambat, mungkin karena hardware yang lebih lambat dibandingkan dengan komputer desktop. Jika CPU kurang bertenaga, mungkin akan lebih sibuk dalam waktu yang lebih lama dan menyebabkan pengalaman FID menjadi 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% |
| telepon | 79,90% |
| tablet | 76,48% |
Hasilnya menguatkan hipotesis kami. Desktop memiliki kepadatan pengalaman FID cepat yang lebih tinggi daripada faktor bentuk ponsel dan tablet. Untuk memahami alasan perbedaan ini, misalnya performa CPU, diperlukan pengujian A/B di luar cakupan Chrome UX Report.
Setelah kita melihat cara mengidentifikasi apakah origin memiliki pengalaman FID yang cepat, mari kita lihat beberapa origin yang berperforma sangat baik.
Contoh 1: http://secretlycanadian.com
Origin ini memiliki 98% pengalaman FID di bawah 100 milidetik. Bagaimana cara melakukannya? Dengan menganalisis cara pembuatannya di WebPageTest, kita dapat melihat bahwa ini adalah halaman WordPress dengan banyak gambar, tetapi memiliki JavaScript 168 KB yang dijalankan dalam waktu sekitar 500 milidetik di mesin lab kami. Menurut HTTP Archive, jumlah JavaScript ini tidak terlalu banyak, sehingga halaman ini berada di persentil ke-28.
Batang merah muda yang berlangsung selama 2,7 hingga 3,0 detik adalah fase Parse HTML. Selama waktu ini, halaman tidak interaktif dan tampak tidak lengkap (lihat "3,0 dtk" pada setrip film di atas). Setelah itu, tugas panjang apa pun yang perlu diproses akan dipecah untuk memastikan thread utama tetap tidak aktif. Garis merah muda di baris 11 menunjukkan cara kerja JavaScript yang tersebar dalam burst cepat.
Contoh 2: https://www.wtfast.com
Asal ini memiliki pengalaman FID instan 96%. Halaman ini memuat JavaScript sebesar 267 KB (persentil ke-38 di HTTP Archive) dan memprosesnya selama 900 md di mesin lab. Filmstrip menunjukkan bahwa halaman memerlukan waktu sekitar 5 detik untuk mewarnai latar belakang dan sekitar 2 detik lagi untuk mewarnai konten.
Yang paling menarik dari hasilnya adalah tidak ada konten interaktif yang terlihat saat thread utama sibuk antara 3 dan 5 detik. Sebenarnya, lambatnya FCP halaman ini 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 di Laporan UX Chrome, kami dapat menetapkan dasar pengukuran pengalaman interaktivitas. Dengan menggunakan dasar pengukuran ini, kita dapat mengamati perubahannya dalam rilis mendatang atau melakukan benchmark pada setiap origin. Jika Anda ingin mulai mengumpulkan FID dalam pengukuran kolom situs Anda sendiri, daftar ke uji coba origin dengan membuka bit.ly/event-timing-ot dan pilih fitur Penentuan Waktu Peristiwa. Dan tentu saja, mulai menjelajahi set data untuk mendapatkan insight menarik tentang status interaktivitas di web. Ini masih merupakan metrik eksperimental, jadi beri kami masukan dan bagikan analisis Anda di grup diskusi Chrome UX Report atau @ChromeUXReport di Twitter.