Gesamte Vordergrundzeit berechnen

In diesem Leitfaden wird beschrieben, wie Sie die Gesamtzeit, die ein Nutzer aktiv auf einer Seite verbringt, genau berechnen können. Bei herkömmlichen Messwerten wie der Zeit auf der Seite wird oft fälschlicherweise die Zeit berücksichtigt, die die Seite im Hintergrund geöffnet war. Mit der VisibilityStateEntry API können Sie nur die „Vordergrundzeit“ messen und erhalten so einen besseren Messwert für das Nutzer-Engagement.

Berechnung der Zeit im Vordergrund implementieren

Die PerformanceTimeline API stellt Änderungen des Sichtbarkeitsstatus als Leistungseinträge dar. Anstatt auf visibilitychange-Ereignisse zu reagieren und die Zeit während einer Sitzung manuell zu erfassen, können Sie jederzeit den gesamten Sichtbarkeitsverlauf abfragen.

OBLIGATORISCH: Sie müssen die visibility-state-Leistungseinträge abfragen, um die tatsächliche Zeit im Vordergrund zu berechnen.

/**
 * 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;
}

Fallbacks und Browserunterstützung

Die VisibilityStateEntry API ist eine moderne Ergänzung der Performance Timeline und wird möglicherweise nicht in allen Browsern unterstützt.

Da performance.getEntriesByType('visibility-state') in nicht unterstützten Browsern ein leeres Array zurückgibt, ist die Funktionserkennung in den Berechnungsablauf integriert. Sie sollten immer prüfen, ob Einträge zurückgegeben werden, bevor Sie fortfahren.

Wenn die API nicht unterstützt wird, wird empfohlen, performance.now() zurückzugeben. Dies ist die Gesamtzeit seit der Navigation, die als angemessene Obergrenze für die Interaktionszeit dient, wenn der Verlauf des Sichtbarkeitsstatus nicht verfügbar ist.

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