LayoutShiftAttribution

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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.

Instance properties

LayoutShiftAttribution.node Read only Experimental: Returns the element that has shifted (null if it has been removed).
LayoutShiftAttribution.previousRect Read only Experimental: Returns a DOMRectReadOnly object representing the position of the element before the shift.
LayoutShiftAttribution.currentRect Read only Experimental: Returns a DOMRectReadOnly object representing the position of the element after the shift.

Instance methods

LayoutShiftAttribution.toJSON() Experimental: 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 });