Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The LayoutShiftAttribution interface provides debugging information about elements which have shifted.
Instances of LayoutShiftAttribution are returned in an array by calling LayoutShift.sources.
LayoutShiftAttribution.node Read only Returns the element that has shifted (null if it has been removed).
LayoutShiftAttribution.previousRect Read only Returns a DOMRectReadOnly object representing the position of the element before the shift.
LayoutShiftAttribution.currentRect Read only Returns a DOMRectReadOnly object representing the position of the element after the shift.
LayoutShiftAttribution.toJSON() Returns a JSON representation of the LayoutShiftAttribution object.
The following example observes layout shifts and identifies the most impactful element. The sources array is sorted by impact area, in descending order — so the first element (sources[0]) represents the element that contributed most to the layout shift. For more detail on that, see Debug Web Vitals in the field.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.sources || entry.sources.length === 0) continue;
const mostImpactfulSource = entry.sources[0];
console.log("Layout shift score:", entry.value);
console.log("Most impactful element:", largestShiftSource.node);
console.log("Previous position:", largestShiftSource.previousRect);
console.log("Current position:", largestShiftSource.currentRect);
}
});
observer.observe({ type: "layout-shift", buffered: true });