Info terbaru terkait rencana kami untuk mengukur responsivitas di web.
Pada awal tahun ini, Tim Metrik Kecepatan Chrome membagikan beberapa ide yang kami pertimbangkan untuk metrik responsivitas baru. Kami ingin merancang metrik yang lebih baik menangkap latensi peristiwa individual secara menyeluruh dan menawarkan gambaran yang lebih menyeluruh tentang responsivitas keseluruhan halaman selama masa aktifnya.
Kami telah membuat banyak progres terkait metrik ini dalam beberapa bulan terakhir, dan kami ingin membagikan info terbaru mengenai rencana pengukuran latensi interaksi serta memperkenalkan beberapa opsi agregasi spesifik yang kami pertimbangkan untuk mengukur responsivitas keseluruhan halaman web.
Kami ingin mendapatkan masukan dari developer dan pemilik situs tentang opsi mana yang paling mewakili keseluruhan respons input halaman mereka.
Mengukur latensi interaksi
Sebagai ulasan, metrik Penundaan Input Pertama (FID) mencatat bagian penundaan latensi input. Artinya, waktu antara saat pengguna berinteraksi dengan halaman hingga saat pengendali peristiwa dapat dijalankan.
Dengan metrik baru ini, kami berencana memperluasnya untuk menangkap durasi peristiwa penuh, dari input pengguna awal hingga frame berikutnya digambar setelah semua pengendali peristiwa dijalankan.
Kami juga berencana untuk mengukur
interaksi,
bukan peristiwa individual. Interaksi adalah grup peristiwa yang
dikirim sebagai bagian dari gestur pengguna logis yang sama (misalnya:
pointerdown
, click
, pointerup
).
Untuk mengukur total latensi interaksi dari grup durasi peristiwa individual, kami mempertimbangkan dua pendekatan potensial:
- Durasi peristiwa maksimum: latensi interaksi sama dengan durasi peristiwa tunggal terbesar dari peristiwa apa pun dalam grup interaksi.
- Total durasi peristiwa: latensi interaksi adalah jumlah dari semua durasi peristiwa, dengan mengabaikan tumpang-tindih.
Sebagai contoh, diagram di bawah menunjukkan interaksi penekanan tombol yang terdiri
dari peristiwa keydown
dan keyup
. Dalam contoh ini, ada durasi tumpang-tindih
antara kedua peristiwa tersebut. Untuk mengukur latensi interaksi penekanan tombol,
kita dapat menggunakan max(keydown duration, keyup duration)
atau sum(keydown duration, keyup duration) - duration overlap
:
Ada kelebihan dan kekurangan dari setiap pendekatan, dan kami ingin mengumpulkan lebih banyak data serta masukan sebelum menyelesaikan definisi latensi.
Gabungkan semua interaksi per halaman
Setelah kita dapat mengukur latensi semua interaksi secara menyeluruh, langkah selanjutnya adalah menentukan skor gabungan untuk kunjungan halaman, yang mungkin berisi lebih dari satu interaksi.
Setelah menjelajahi sejumlah opsi, kami telah mempersempit pilihan ke strategi yang diuraikan di bagian berikut, yang saat ini kami kumpulkan data pengguna sungguhan di Chrome. Kami berencana untuk memublikasikan hasil temuan kami setelah kami memiliki waktu untuk mengumpulkan data yang cukup, tetapi kami juga mencari masukan langsung dari pemilik situs tentang strategi mana yang paling akurat mencerminkan pola interaksi di halaman mereka.
Opsi strategi agregasi
Untuk membantu menjelaskan masing-masing strategi berikut, pertimbangkan contoh kunjungan halaman yang terdiri dari empat interaksi:
Interaksi | Latensi |
---|---|
Klik | 120 md |
Klik | 20 md |
Efek tombol | 60 md |
Efek tombol | 80 md |
Latensi interaksi terburuk
Latensi interaksi individual terbesar yang terjadi di halaman. Dengan contoh interaksi yang tercantum di atas, latensi interaksi terburuknya adalah 120 milidetik.
Strategi anggaran
Riset pengalaman pengguna menunjukkan bahwa pengguna mungkin tidak melihat latensi di bawah nilai minimum tertentu sebagai negatif. Berdasarkan riset ini, kami mempertimbangkan beberapa strategi anggaran yang menggunakan nilai minimum berikut untuk setiap jenis peristiwa:
Jenis interaksi | Nilai minimum anggaran |
---|---|
Klik/ketuk | 100 md |
Tarik | 100 md |
Keyboard | 50 md |
Masing-masing strategi ini hanya akan mempertimbangkan latensi yang melebihi nilai minimum anggaran per interaksi. Dengan menggunakan contoh kunjungan halaman di atas, jumlah yang melebihi anggaran adalah sebagai berikut:
Interaksi | Latensi | Latensi melebihi anggaran |
---|---|---|
Klik | 120 md | 20 md |
Klik | 20 md | 0 md |
Efek tombol | 60 md | 10 md |
Efek tombol | 80 md | 30 md |
Latensi interaksi terburuk melebihi anggaran
Latensi interaksi tunggal terbesar melebihi anggaran. Menggunakan contoh di atas, skornya adalah max(20, 0, 10, 30) = 30 ms
.
Total latensi interaksi melebihi anggaran
Jumlah semua latensi interaksi terhadap anggaran. Menggunakan contoh di atas, skornya adalah (20 + 0 + 10 + 30) = 60 ms
.
Latensi interaksi rata-rata melebihi anggaran
Total latensi interaksi yang melebihi anggaran dibagi dengan jumlah total
interaksi. Menggunakan contoh di atas, skornya adalah (20 + 0 + 10 + 30) / 4 = 15 ms
.
Perkiraan kuantil tinggi
Sebagai alternatif untuk menghitung latensi interaksi terbesar terhadap anggaran, kami juga mempertimbangkan untuk menggunakan perkiraan kuantil tinggi, yang seharusnya lebih adil dibandingkan halaman web yang memiliki banyak interaksi dan mungkin lebih mungkin memiliki pencilan yang besar. Kami mengidentifikasi dua strategi perkiraan kuantil tinggi potensial yang kami sukai:
- Opsi 1: Pantau interaksi terbesar dan terbesar kedua di atas anggaran. Setelah setiap 50 interaksi baru, hapus interaksi terbesar dari kumpulan 50 interaksi sebelumnya dan tambahkan interaksi terbesar dari kumpulan 50 interaksi saat ini. Nilai akhir adalah interaksi terbesar yang tersisa atas anggaran.
- Opsi 2: Hitung 10 interaksi terbesar terhadap anggaran, lalu pilih nilai dari daftar tersebut berdasarkan jumlah total interaksi. Dengan mempertimbangkan N total interaksi, pilih nilai terbesar (N / 50 + 1), atau nilai ke-10 untuk halaman dengan lebih dari 500 interaksi.
Ukur opsi ini di JavaScript
Contoh kode berikut dapat digunakan untuk menentukan nilai dari tiga strategi pertama yang ditampilkan di atas. Perhatikan bahwa pengukuran jumlah total interaksi pada halaman belum dapat dilakukan di JavaScript, sehingga contoh ini tidak menyertakan interaksi rata-rata atas strategi anggaran atau strategi perkiraan kuantil tinggi.
const interactionMap = new Map();
let worstLatency = 0;
let worstLatencyOverBudget = 0;
let totalLatencyOverBudget = 0;
new PerformanceObserver((entries) => {
for (const entry of entries.getEntries()) {
// Ignore entries without an interaction ID.
if (entry.interactionId > 0) {
// Get the interaction for this entry, or create one if it doesn't exist.
let interaction = interactionMap.get(entry.interactionId);
if (!interaction) {
interaction = {latency: 0, entries: []};
interactionMap.set(entry.interactionId, interaction);
}
interaction.entries.push(entry);
const latency = Math.max(entry.duration, interaction.latency);
worstLatency = Math.max(worstLatency, latency);
const budget = entry.name.includes('key') ? 50 : 100;
const latencyOverBudget = Math.max(latency - budget, 0);
worstLatencyOverBudget = Math.max(
latencyOverBudget,
worstLatencyOverBudget,
);
if (latencyOverBudget) {
const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
}
// Set the latency on the interaction so future events can reference.
interaction.latency = latency;
// Log the updated metric values.
console.log({
worstLatency,
worstLatencyOverBudget,
totalLatencyOverBudget,
});
}
}
// Set the `durationThreshold` to 50 to capture keyboard interactions
// that are over-budget (the default `durationThreshold` is 100).
}).observe({type: 'event', buffered: true, durationThreshold: 50});
Masukan
Kami ingin mendorong developer untuk mencoba metrik responsivitas baru ini di situs mereka, dan memberi tahu kami jika Anda menemukan masalah apa pun.
Kirim masukan umum melalui email tentang pendekatan yang diuraikan di sini ke grup Google web-vitals-feedback dengan "[Responsiveness Metrics]" di baris subjek. Kami sangat menantikan masukan Anda.