Signatur
Beschreibung
LayoutShift.toJSON() ist ein Serialisierer. Die Methode wandelt einen LayoutShift-Performance-Eintrag in ein gewöhnliches JavaScript-Objekt um. Enthalten sind die geerbten Felder von PerformanceEntry (name, entryType, startTime, duration) sowie die spezifischen Felder value, hadRecentInput, lastInputTime und sources.
Meistens ruft man die Methode nicht selbst auf. JSON.stringify() nutzt sie automatisch, sobald ein LayoutShift-Objekt serialisiert wird. Praktisch ist das, wenn man Layout-Verschiebungen protokollieren oder für die Berechnung des Cumulative Layout Shift (CLS) per navigator.sendBeacon() an einen Analyse-Server schicken will.
Wichtig: Das Feld sources enthält LayoutShiftAttribution-Objekte. Deren node-Eigenschaft ist ein DOM-Knoten und lässt sich nicht sinnvoll serialisieren. In der JSON-Ausgabe fehlt der Knoten daher bzw. erscheint als leeres Objekt. Wer wissen will, welches Element sich verschoben hat, muss selbst einen Selektor oder Bezeichner daraus ableiten.
Rückgabewert
name, entryType, startTime, duration, value, hadRecentInput, lastInputTime und sources des LayoutShift-Eintrags.Beispiele
Layout-Verschiebungen als JSON protokollieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Explizit aufgerufen: liefert ein einfaches Objekt
console.log(entry.toJSON());
}
});
observer.observe({ type: 'layout-shift', buffered: true });Implizite Nutzung durch JSON.stringify()
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
// JSON.stringify ruft toJSON() automatisch auf
console.log(JSON.stringify(entries, null, 2));
});
observer.observe({ type: 'layout-shift', buffered: true });CLS-Daten mit lesbaren Quellen an den Server senden
const shifts = [];
// Aus einem DOM-Knoten einen einfachen Selektor bauen
const describeNode = (node) => {
if (!node || node.nodeType !== Node.ELEMENT_NODE) return null;
return node.id ? `#${node.id}` : node.tagName.toLowerCase();
};
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.hadRecentInput) continue; // Verschiebungen nach Nutzereingaben ignorieren
const data = entry.toJSON();
data.sources = entry.sources.map((s) => ({
element: describeNode(s.node),
previousRect: s.previousRect.toJSON(),
currentRect: s.currentRect.toJSON()
}));
shifts.push(data);
}
}).observe({ type: 'layout-shift', buffered: true });
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && shifts.length) {
navigator.sendBeacon('/analytics/cls', JSON.stringify(shifts));
}
});// Wichtig · Fallstricke
- Kompatibilität: Die Layout Instability API (und damit
LayoutShift) gibt es nur in Chromium-basierten Browsern. Firefox und Safari unterstützen sie nicht. Vorher prüfen, z. B. mitPerformanceObserver.supportedEntryTypes.includes('layout-shift'). - DOM-Knoten gehen verloren:
sources[i].nodeübersteht die Serialisierung nicht sinnvoll. Wer die betroffenen Elemente braucht, muss sie vorher selbst in Selektoren oder Bezeichner umwandeln. - Das Ergebnis ist eine Momentaufnahme als einfaches Objekt. Es ist kein
LayoutShift-Objekt mehr und hat dessen Prototyp-Methoden nicht. - Einträge mit
hadRecentInput === truezählen nicht zum CLS-Wert und sollten vor dem Senden meist herausgefiltert werden. nameist beiLayoutShift-Einträgen immer ein leerer String unddurationimmer0.