Masukan yang diinginkan: Metrik responsivitas eksperimental

Pembaruan terkait rencana kami untuk mengukur responsivitas di web.

Hongbo Song

Pada awal tahun ini, Tim Metrik Kecepatan Chrome membagikan beberapa yang sama yang kami pertimbangkan untuk metrik responsivitas yang baru. Kita ingin merancang metrik yang lebih baik dalam menangkap dari setiap peristiwa secara menyeluruh dan memberikan gambaran yang lebih holistik responsivitas keseluruhan halaman selama masa aktifnya.

Kami telah membuat banyak kemajuan pada metrik ini dalam beberapa bulan terakhir, dan kami kami juga ingin membagikan info terbaru tentang cara kami mengukur latensi interaksi memperkenalkan beberapa opsi agregasi spesifik yang kami pertimbangkan untuk mengukur tingkat respons laman web secara keseluruhan.

Kami ingin mendapatkan masukan dari developer dan pemilik situs tentang mana dari opsi ini yang paling mewakili keseluruhan input tingkat respons laman mereka.

Mengukur latensi interaksi

Sebagai peninjauan, metrik Penundaan Input Pertama (FID) merekam bagian penundaan latensi input. Artinya, waktu antara saat pengguna berinteraksi dengan halaman hingga saat pengendali peristiwa dijalankan.

Dengan metrik baru ini, kami berencana memperluasnya untuk merekam peristiwa selengkapnya durasi, mulai dari input pengguna awal hingga frame berikutnya di-lukis setelah semua pengendali peristiwa sudah berjalan.

Kami juga berencana untuk mengukur interaksi bukan tiap-tiap peristiwa. Interaksi adalah kelompok peristiwa yang dikirim sebagai bagian dari gestur pengguna logis yang sama (misalnya: pointerdown, click, pointerup).

Untuk mengukur latensi interaksi total dari grup peristiwa individu durasi waktu, kami mempertimbangkan dua pendekatan potensial:

• Durasi peristiwa maksimum: latensi interaksi sama dengan latensi terbesar durasi peristiwa tunggal dari peristiwa apa pun dalam grup interaksi.
• Total durasi peristiwa: latensi interaksi adalah jumlah dari semua peristiwa durasi, mengabaikan tumpang tindih apa pun.

Sebagai contoh, diagram di bawah menunjukkan interaksi tekanan tombol yang terdiri dari peristiwa keydown dan keyup. Dalam contoh ini, ada tumpang tindih durasi antara dua peristiwa ini. Untuk mengukur latensi interaksi penekanan tombol, kita bisa menggunakan max(keydown duration, keyup duration) atau sum(keydown duration, keyup duration) - duration overlap:

Ada pro dan kontra dari setiap pendekatan, dan kami ingin mengumpulkan lebih banyak data dan masukan sebelum menyelesaikan definisi latensi.

Gabungkan semua interaksi per halaman

Setelah kita dapat mengukur latensi menyeluruh dari semua interaksi, langkah berikutnya adalah menentukan skor agregat untuk kunjungan halaman, yang mungkin berisi lebih banyak dari satu interaksi.

Setelah mempelajari sejumlah opsi, kami telah mempersempit pilihan kami ke strategi yang diuraikan di bagian berikut, masing-masing yang saat ini kami mengumpulkan data pengguna nyata di Chrome. Kami berencana untuk memublikasikan hasil temuan setelah kami punya waktu untuk mengumpulkan data yang cukup, tapi kami juga mencari untuk mendapatkan masukan langsung dari pemilik situs terkait strategi mana yang akan paling akurat mencerminkan pola interaksi di laman mereka.

Opsi strategi agregasi

Untuk membantu menjelaskan setiap strategi berikut, pertimbangkan contoh kunjungan halaman yang terdiri dari empat interaksi:

Latensi interaksi terburuk

Latensi interaksi individual terbesar yang terjadi pada halaman. Mengingat contoh interaksi yang tercantum di atas, latensi interaksi terburuk adalah 120 md.

Strategi anggaran

Pengalaman pengguna riset menunjukkan bahwa pengguna mungkin tidak melihat latensi di bawah nilai minimum tertentu sebagai negatif. Berdasarkan riset ini, kami mempertimbangkan beberapa strategi anggaran menggunakan nilai minimum berikut untuk setiap jenis peristiwa:

Masing-masing strategi ini hanya akan mempertimbangkan latensi yang lebih besar dari batas anggaran per interaksi. Menggunakan contoh kunjungan halaman di atas, jumlah kelebihan anggaran adalah sebagai berikut:

Latensi interaksi terburuk untuk anggaran

Latensi interaksi tunggal terbesar melebihi anggaran. Menggunakan contoh di atas, akan menjadi max(20, 0, 10, 30) = 30 ms.

Total latensi interaksi melebihi anggaran

Jumlah semua latensi interaksi terhadap anggaran. Menggunakan contoh di atas, akan menjadi (20 + 0 + 10 + 30) = 60 ms.

Latensi interaksi rata-rata melebihi anggaran

Total latensi interaksi di atas anggaran dibagi dengan jumlah total interaksi. Dengan menggunakan contoh di atas, skornya adalah (20 + 0 + 10 + 30) / 4 = 15 ms.

Perkiraan kuantil tinggi

Sebagai alternatif untuk menghitung latensi interaksi terbesar atas anggaran, kami juga mempertimbangkan penggunaan perkiraan kuantil tinggi, yang seharusnya lebih adil untuk laman web yang memiliki banyak interaksi dan mungkin lebih cenderung memiliki yang berbeda. Kami telah mengidentifikasi dua potensi strategi perkiraan kuantil tinggi yang kami sukai:

• Opsi 1: Melacak interaksi terbesar dan terbesar kedua anggaran. Setelah setiap 50 interaksi baru, lepaskan interaksi terbesar dari kumpulan 50 sebelumnya dan menambahkan interaksi terbesar dari kumpulan 50 saat ini. Nilai akhir adalah interaksi terbesar yang tersisa melebihi anggaran.
• Opsi 2: Hitung 10 interaksi terbesar dibandingkan anggaran dan pilih nilai dari daftar itu, bergantung pada jumlah total interaksi. Diberikan N total interaksi, pilih (N / 50 + 1) nilai terbesar, atau nilai ke-10 untuk halaman dengan lebih dari 500 interaksi.

Ukur opsi ini di JavaScript

Contoh kode berikut dapat digunakan untuk menentukan nilai tiga strategi yang disajikan di atas. Perhatikan bahwa pengukuran jumlah total interaksi pada halaman di JavaScript, jadi contoh ini tidak menyertakan strategi interaksi rata-rata atas anggaran atau tingginya strategi perkiraan kuantil.

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 pengembang untuk mencoba metrik responsivitas baru ini di di situs mereka, dan beri tahu kami jika Anda menemukan masalah.

Kirim masukan umum melalui email tentang pendekatan yang diuraikan di sini untuk web-vitals-feedback Google grup dengan "[Metrik Responsivitas]" di baris subjek. Kami benar-benar mencari kami menantikan pendapat Anda.