Signatur
Beschreibung
toJSON() ist die Serialisierungsmethode des InteractionContentfulPaint-Interfaces. Sie erzeugt ein einfaches JavaScript-Objekt mit den Eigenschaften des Performance-Eintrags. Ein solches Objekt lässt sich problemlos als JSON speichern, verschicken oder protokollieren. Beim Aufruf von JSON.stringify() auf einem Eintrag wird toJSON() automatisch aufgerufen.
InteractionContentfulPaint gehört zur experimentellen Soft-Navigations-API. Der Eintrag beschreibt das größte Inhaltselement, das nach einer Nutzerinteraktion gezeichnet wurde, etwa nach einem clientseitigen Routenwechsel in einer Single-Page-App. Das Prinzip gleicht LargestContentfulPaint beim ersten Laden der Seite. Das serialisierte Objekt enthält die geerbten PerformanceEntry-Felder (name, entryType, startTime, duration) und die inhaltsbezogenen Felder wie renderTime, loadTime, size, id und url.
Typischer Einsatz ist das Real User Monitoring (RUM): Man sammelt die Einträge in einem PerformanceObserver, wandelt sie mit toJSON() um und schickt sie per navigator.sendBeacon() oder fetch() an einen Analyse-Endpunkt.
Rückgabewert
name, entryType, startTime, duration, renderTime, loadTime, size, id und url. Die DOM-Referenz element ist nicht enthalten.Beispiele
Einträge beobachten und als JSON ausgeben
const TYPE = 'interaction-contentful-paint';
if (PerformanceObserver.supportedEntryTypes?.includes(TYPE)) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// toJSON() liefert ein einfaches Objekt
console.log(entry.toJSON());
}
});
observer.observe({ type: TYPE, buffered: true });
} else {
console.log('InteractionContentfulPaint wird nicht unterstützt.');
}Messwerte per sendBeacon an einen RUM-Endpunkt senden
const buffer = [];
const observer = new PerformanceObserver((list) => {
// Nur die serialisierbaren Daten puffern, keine DOM-Referenzen
buffer.push(...list.getEntries().map((entry) => entry.toJSON()));
});
try {
observer.observe({ type: 'interaction-contentful-paint', buffered: true });
} catch (err) {
console.warn('Eintragstyp nicht verfügbar:', err);
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && buffer.length > 0) {
navigator.sendBeacon('/rum/icp', JSON.stringify(buffer));
buffer.length = 0;
}
});JSON.stringify ruft toJSON() automatisch auf
const observer = new PerformanceObserver((list) => {
const [entry] = list.getEntries();
// gleichwertig: JSON.stringify(entry.toJSON())
const json = JSON.stringify(entry);
console.log(json);
// Das DOM-Element muss man bei Bedarf selbst beschreiben
const extra = { ...entry.toJSON(), tag: entry.element?.tagName ?? null };
console.log(extra.tag);
});
observer.observe({ type: 'interaction-contentful-paint', buffered: true });// Wichtig · Fallstricke
- Experimentell:
InteractionContentfulPaintgibt es bisher nur in Chromium-Browsern, und zwar hinter einem Flag oder im Origin Trial Soft Navigations. Firefox und Safari unterstützen die Schnittstelle nicht. Prüfe die Unterstützung vorher mitPerformanceObserver.supportedEntryTypes.includes('interaction-contentful-paint'). Name und Felder können sich noch ändern. - Die Eigenschaft
elementist eine DOM-Referenz. Sie wird nicht serialisiert. Brauchst du Informationen über das Element, zum Beispiel einen Selektor oder den Tag-Namen, musst du sie selbst ermitteln und ergänzen. renderTimekann bei Ressourcen von anderen Ursprüngen0sein, wenn der Server keinenTiming-Allow-Origin-Header sendet. Verwende dannloadTimeoderstartTimeals Ersatzwert.urlkann vollständige Bild-URLs mit Query-Parametern enthalten. Bereinige die Daten vor dem Versand an Analyse-Dienste, damit keine personenbezogenen Daten übertragen werden.