LargestContentfulPaint.toJSON() — Methode · JavaScript-Referenz

Signatur

LargestContentfulPaint.prototype.toJSON()

Beschreibung

Die Methode toJSON() ist der Serialisierer der Schnittstelle LargestContentfulPaint. Sie erzeugt ein einfaches JavaScript-Objekt, das die Eigenschaften des Performance-Eintrags als Momentaufnahme enthält. Das sind die Felder aus PerformanceEntry (name, entryType, startTime, duration) und die LCP-spezifischen Felder wie renderTime, loadTime, size, id und url.

Normalerweise ruft man toJSON() nicht selbst auf. JSON.stringify() nutzt die Methode automatisch, wenn Sie einen LargestContentfulPaint-Eintrag serialisieren. Ohne toJSON() käme dabei nur {} heraus, weil die Eigenschaften als Getter am Prototyp liegen und nicht als eigene Eigenschaften der Instanz.

Typische Anwendungsfälle sind Real-User-Monitoring (RUM) und das Senden von Core-Web-Vitals-Daten an einen Analytics-Endpunkt, etwa mit navigator.sendBeacon() oder fetch(). Auch zum Protokollieren und Speichern von LCP-Messwerten ist die Methode praktisch.

Die Eigenschaft element fehlt im Ergebnis. Ein DOM-Element lässt sich nicht als JSON serialisieren. Wenn Sie das auslösende Element erfassen wollen, müssen Sie selbst eine Beschreibung ergänzen, zum Beispiel Tag-Name oder CSS-Selektor.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt mit den serialisierbaren Eigenschaften des Eintrags, u. a. name, entryType ("largest-contentful-paint"), startTime, duration, renderTime, loadTime, size, id und url. element ist nicht enthalten.

Beispiele

LCP-Eintrag als JSON-Objekt ausgeben

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  // Momentaufnahme als einfaches Objekt
  console.log(lastEntry.toJSON());
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });

{ name: '', entryType: 'largest-contentful-paint', startTime: 1234.5, duration: 0, size: 187300, renderTime: 1234.5, loadTime: 1180.2, id: 'hero', url: 'https://example.com/hero.jpg' }

JSON.stringify() ruft toJSON() automatisch auf

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Ohne toJSON() käme hier nur "{}" heraus
    console.log(JSON.stringify(entry));
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

{"name":"","entryType":"largest-contentful-paint","startTime":1234.5,"duration":0,"size":187300,"renderTime":1234.5,"loadTime":1180.2,"id":"hero","url":"https://example.com/hero.jpg"}

Finalen LCP-Wert beim Verlassen der Seite an Analytics senden

let latestLcp = null;

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  latestLcp = entries[entries.length - 1];
}).observe({ type: 'largest-contentful-paint', buffered: true });

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'hidden' || !latestLcp) return;

  const payload = {
    ...latestLcp.toJSON(),
    // element wird nicht serialisiert, daher eine eigene Beschreibung ergänzen
    elementTag: latestLcp.element?.tagName ?? null,
    page: location.pathname,
  };

  navigator.sendBeacon('/analytics/lcp', JSON.stringify(payload));
  latestLcp = null; // nur einmal senden
});

// Wichtig · Fallstricke

element fehlt: Das DOM-Element, das den LCP ausgelöst hat, steht nicht im Ergebnis. Speichern Sie bei Bedarf selbst den Tag-Namen, die id oder einen Selektor.
renderTime kann 0 sein: Bei Bildern von einer anderen Herkunft, die ohne Timing-Allow-Origin-Header ausgeliefert werden, ist renderTime je nach Browser 0 oder nur grob angegeben. Nehmen Sie dann startTime bzw. loadTime als Ersatz.
Nur eine Momentaufnahme: Das Ergebnis wird nicht aktualisiert. Der Browser kann weitere, größere LCP-Kandidaten melden. Der endgültige Wert steht erst nach einer Nutzereingabe oder beim Verlassen der Seite fest.
Neuere Browser liefern mehr Felder: Aktuelle Chromium-Versionen fügen je nach Version weitere Felder hinzu, etwa paintTime und presentationTime. Verlassen Sie sich nicht auf eine feste Liste von Feldern.
Browser-Unterstützung: Chromium-basierte Browser (ab 77) und Firefox (ab 122) unterstützen die Methode. Safari unterstützt die LCP-API erst in sehr neuen Versionen. Prüfen Sie vorher mit PerformanceObserver.supportedEntryTypes.includes('largest-contentful-paint'), ob die API verfügbar ist.

Siehe auch

LargestContentfulPaint PerformanceObserver PerformanceEntry.toJSON() LargestContentfulPaint.renderTime LargestContentfulPaint.element JSON.stringify() InteractionContentfulPaint.toJSON()