Menghitung total waktu latar depan

Panduan ini menjelaskan cara menghitung secara akurat total waktu yang dihabiskan pengguna untuk melihat halaman secara aktif. Metrik tradisional seperti waktu di halaman sering kali salah menyertakan waktu yang dihabiskan di halaman di latar belakang. Dengan menggunakan VisibilityStateEntry API, Anda hanya dapat mengukur "waktu latar depan", yang memberikan metrik engagement pengguna yang lebih baik.

Menerapkan penghitungan waktu latar depan

PerformanceTimeline API mengekspos perubahan status visibilitas sebagai entri performa. Daripada bereaksi terhadap peristiwa visibilitychange dan mengumpulkan waktu secara manual selama sesi, Anda dapat mengkueri seluruh histori visibilitas kapan saja.

WAJIB: Anda harus mengkueri entri performa visibility-state untuk menghitung waktu latar depan yang sebenarnya.

/**
 * Calculates total time the page was in the visible state.
 *
 * @returns {number} Total foreground time in milliseconds.
 */
function getTotalForegroundTime() {
  // MANDATORY: Query the visibility-state entries from the performance timeline.
  const entries = performance.getEntriesByType('visibility-state');

  // Fallback: If the browser does not support VisibilityStateEntry,
  // the API will gracefully return an empty array.
  if (entries.length === 0) {
    // Return total time since navigation start as a fallback.
    return performance.now();
  }

  let totalForegroundTime = 0;

  for (let i = 0; i < entries.length; i++) {
    // Only calculate duration for periods where the state was 'visible'
    if (entries[i].name === 'visible') {
      const start = entries[i].startTime;

      // The end time is the start time of the next state change,
      // or the current time if this is the final entry.
      const end = i + 1 < entries.length
          ? entries[i + 1].startTime
          : performance.now();

      totalForegroundTime += (end - start);
    }
  }

  return totalForegroundTime;
}

Penggantian & dukungan browser

VisibilityStateEntry API adalah tambahan modern untuk Performance Timeline dan mungkin tidak didukung di semua browser.

Karena performance.getEntriesByType('visibility-state') menampilkan array kosong di browser yang tidak didukung, deteksi fitur disertakan dalam alur penghitungan. Anda harus selalu memeriksa apakah entri ditampilkan sebelum melanjutkan.

Jika API tidak didukung, penggantian yang direkomendasikan adalah menampilkan performance.now(). Hal ini menunjukkan total waktu sejak navigasi, yang berfungsi sebagai batas atas yang wajar untuk waktu engagement saat histori status visibilitas tidak tersedia.

const entries = performance.getEntriesByType('visibility-state');

// If the array is empty, the API is likely unsupported.
if (entries.length === 0) {
  // Fallback: Return total time since page load.
  return performance.now();
}