Masukan yang diinginkan: Metrik responsivitas eksperimental

Info terbaru terkait rencana kami untuk mengukur responsivitas di web.

Hongbo Song

Poin penting: Artikel ini ditulis selama periode waktu ketika metrik responsivitas baru dikembangkan untuk mengukur latensi menyeluruh di halaman web. Metrik baru tersebut telah dirilis, dan diberi nama Interaction to Next Paint (INP). Pada 12 Maret 2024, INP menjadi Core Web Vital, yang menggantikan FID.

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.

Catatan: Durasi peristiwa dimaksudkan sebagai waktu dari stempel waktu hardware peristiwa hingga waktu saat paint berikutnya dilakukan setelah peristiwa ditangani. Namun, jika peristiwa tersebut tidak menyebabkan update, durasinya adalah waktu dari stempel waktu hardware peristiwa hingga saat kita yakin peristiwa tersebut tidak akan menyebabkan update apa pun.

Catatan: Untuk interaksi keyboard, kami biasanya mengukur keydown dan keyup. Namun, untuk IME, seperti metode input untuk bahasa China dan Jepang, kita mengukur peristiwa input antara compositionstart dan compositionend.

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});

Perhatian: Saat ini ada beberapa bug di Chrome yang memengaruhi akurasi stempel waktu interaksi yang dilaporkan. Bug ini telah diperbaiki di versi 98, jadi sebaiknya developer menguji strategi ini di Chrome Canary untuk mendapatkan hasil yang paling akurat.

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.